webrtc_example-dev

Running

cduss Claude Opus 4.5 commited on Feb 2

Commit

805c57f

1 Parent(s): d1a2d70

Update demo app to use central signaling server

- Connect to cduss-reachy-mini-central.hf.space
- Add HuggingFace token authentication
- Save token in localStorage for convenience
- Simplified UI for robot connection

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Files changed (1) hide show

index.html +97 -61

index.html CHANGED Viewed

@@ -52,6 +52,9 @@
             width: 100%;
             margin-bottom: 10px;
         }
         button {
             background: #00d4ff;
             color: #000;
@@ -99,21 +102,27 @@
         }
         .producer-item:hover { background: #1a4a80; }
         .producer-item.selected { border: 2px solid #00d4ff; }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Reachy Mini WebRTC Dashboard</h1>
-        <p class="subtitle">Test WebRTC connection to robot</p>
         <div class="grid">
             <!-- Connection Panel -->
             <div class="card">
-                <h2>1. Signaling Server</h2>
-                <label>Robot IP Address:</label>
-                <input type="text" id="robotIp" value="192.168.1.95" placeholder="192.168.1.95">
-                <label>Signaling Port:</label>
-                <input type="text" id="signalingPort" value="8443" placeholder="8443">
                 <div class="controls">
                     <button id="connectBtn" onclick="connectSignaling()">Connect</button>
@@ -125,7 +134,7 @@
                     <span id="signalingStatus" class="status disconnected">Disconnected</span>
                 </div>
-                <h3 style="margin-top: 20px; font-size: 1em;">Available Producers:</h3>
                 <div id="producerList" class="producer-list">
                     <em style="color: #666;">Connect to signaling server first</em>
                 </div>
@@ -175,12 +184,21 @@
     </div>
     <script>
         // State
         let signalingWs = null;
         let peerConnection = null;
         let dataChannel = null;
         let selectedProducerId = null;
-        let sessionId = null;
         // Logging
         function log(message, type = 'info') {
@@ -199,47 +217,51 @@
         // Signaling
         function connectSignaling() {
-            const ip = document.getElementById('robotIp').value;
-            const port = document.getElementById('signalingPort').value;
-            const url = `ws://${ip}:${port}`;
-            log(`Connecting to signaling server: ${url}`);
             updateSignalingStatus('connecting');
             try {
                 signalingWs = new WebSocket(url);
                 signalingWs.onopen = () => {
-                    log('Signaling WebSocket connected!', 'success');
                     updateSignalingStatus('connected');
                     document.getElementById('connectBtn').disabled = true;
                     document.getElementById('disconnectBtn').disabled = false;
-                    // Request producer list
-                    setTimeout(() => {
-                        log('Requesting producer list...');
-                        signalingWs.send(JSON.stringify({ type: 'list' }));
-                    }, 500);
                 };
                 signalingWs.onmessage = (event) => {
-                    log(`Signaling message: ${event.data.substring(0, 200)}...`);
-                    handleSignalingMessage(JSON.parse(event.data));
                 };
                 signalingWs.onerror = (error) => {
-                    log(`Signaling WebSocket error: ${error.message || 'Unknown error'}`, 'error');
                 };
                 signalingWs.onclose = (event) => {
-                    log(`Signaling WebSocket closed: code=${event.code}, reason=${event.reason}`);
                     updateSignalingStatus('disconnected');
                     document.getElementById('connectBtn').disabled = false;
                     document.getElementById('disconnectBtn').disabled = true;
                     document.getElementById('startStreamBtn').disabled = true;
                 };
             } catch (e) {
-                log(`Failed to create WebSocket: ${e.message}`, 'error');
                 updateSignalingStatus('disconnected');
             }
         }
@@ -259,17 +281,40 @@
         }
         function handleSignalingMessage(msg) {
-            if (msg.type === 'welcome') {
-                sessionId = msg.peerId;
-                log(`Got session ID: ${sessionId}`, 'success');
-            } else if (msg.type === 'list') {
-                displayProducers(msg.producers);
-            } else if (msg.type === 'sessionStarted') {
-                log(`Session started with peer: ${msg.peerId}`, 'success');
-            } else if (msg.type === 'peer') {
-                handlePeerMessage(msg);
-            } else if (msg.type === 'error') {
-                log(`Signaling error: ${msg.details}`, 'error');
             }
         }
@@ -277,21 +322,21 @@
             const container = document.getElementById('producerList');
             container.innerHTML = '';
-            // GStreamer returns array of {id, meta} objects
             if (!producers || !Array.isArray(producers) || producers.length === 0) {
-                container.innerHTML = '<em style="color: #666;">No producers available</em>';
                 return;
             }
             for (const producer of producers) {
                 const div = document.createElement('div');
                 div.className = 'producer-item';
-                div.innerHTML = `<strong>${producer.meta?.name || 'Unknown'}</strong><br><small>${producer.id}</small>`;
                 div.onclick = () => selectProducer(producer.id, div);
                 container.appendChild(div);
             }
-            log(`Found ${producers.length} producer(s)`, 'success');
         }
         function selectProducer(peerId, element) {
@@ -299,22 +344,21 @@
             element.classList.add('selected');
             selectedProducerId = peerId;
             document.getElementById('startStreamBtn').disabled = false;
-            log(`Selected producer: ${peerId}`);
         }
         // WebRTC
         async function startStream() {
             if (!selectedProducerId) {
-                log('No producer selected', 'error');
                 return;
             }
             log('Creating peer connection...');
             updateWebrtcStatus('connecting');
-            // LAN connection - no STUN needed for local network
             const config = {
-                iceServers: []
             };
             peerConnection = new RTCPeerConnection(config);
@@ -342,7 +386,7 @@
             };
             peerConnection.oniceconnectionstatechange = () => {
-                log(`ICE connection state: ${peerConnection.iceConnectionState}`);
                 if (peerConnection.iceConnectionState === 'connected' ||
                     peerConnection.iceConnectionState === 'completed') {
                     updateWebrtcStatus('connected');
@@ -361,19 +405,17 @@
                 setupDataChannel(dataChannel);
             };
-            // GStreamer webrtcsink is the offerer, we are the answerer
-            // Just request to start a session, then wait for SDP offer
-            log('Requesting session with producer...');
             signalingWs.send(JSON.stringify({
                 type: 'startSession',
                 peerId: selectedProducerId
             }));
-            // SDP offer will arrive via handlePeerMessage
         }
         async function handlePeerMessage(msg) {
             if (!peerConnection) {
-                log('No peer connection, ignoring message', 'error');
                 return;
             }
@@ -397,14 +439,10 @@
                 if (msg.ice) {
                     log('Received ICE candidate');
-                    try {
-                        await peerConnection.addIceCandidate(new RTCIceCandidate(msg.ice));
-                    } catch (e) {
-                        log(`Failed to add ICE candidate: ${e.message}`, 'error');
-                    }
                 }
             } catch (e) {
-                log(`Error handling peer message: ${e.message}`, 'error');
             }
         }
@@ -436,8 +474,8 @@
         function setupDataChannel(channel) {
             channel.onopen = () => log('Data channel opened', 'success');
             channel.onclose = () => log('Data channel closed');
-            channel.onerror = (e) => log(`Data channel error: ${e}`, 'error');
-            channel.onmessage = (event) => log(`Data channel message: ${event.data}`);
         }
         // Head Control
@@ -446,14 +484,12 @@
         }
         function createRotationMatrix(yawDeg, pitchDeg) {
-            // Create a 4x4 transformation matrix from yaw and pitch
             const yaw = degToRad(yawDeg);
             const pitch = degToRad(pitchDeg);
             const cy = Math.cos(yaw), sy = Math.sin(yaw);
             const cp = Math.cos(pitch), sp = Math.sin(pitch);
-            // Combined rotation: Rz(yaw) * Ry(pitch)
             return [
                 cy * cp,  -sy, cy * sp, 0,
                 sy * cp,   cy, sy * sp, 0,
@@ -475,7 +511,7 @@
             const msg = JSON.stringify({ set_target: matrix });
             dataChannel.send(msg);
-            log(`Sent head pose: yaw=${yaw}, pitch=${pitch}`);
         }
         function centerHead() {
@@ -485,7 +521,7 @@
         }
         // Init
-        log('Dashboard loaded. Enter robot IP and connect to signaling server.', 'info');
     </script>
 </body>
 </html>

             width: 100%;
             margin-bottom: 10px;
         }
+        input[type="password"] {
+            font-family: monospace;
+        }
         button {
             background: #00d4ff;
             color: #000;
         }
         .producer-item:hover { background: #1a4a80; }
         .producer-item.selected { border: 2px solid #00d4ff; }
+        .token-info {
+            font-size: 0.85em;
+            color: #888;
+            margin-top: 5px;
+        }
+        .token-info a { color: #00d4ff; }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Reachy Mini WebRTC Dashboard</h1>
+        <p class="subtitle">Connect to your robot via central signaling server</p>
         <div class="grid">
             <!-- Connection Panel -->
             <div class="card">
+                <h2>1. Authentication & Connection</h2>
+                <label>HuggingFace Token:</label>
+                <input type="password" id="hfToken" placeholder="hf_...">
+                <p class="token-info">Get your token from <a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a></p>
                 <div class="controls">
                     <button id="connectBtn" onclick="connectSignaling()">Connect</button>
                     <span id="signalingStatus" class="status disconnected">Disconnected</span>
                 </div>
+                <h3 style="margin-top: 20px; font-size: 1em;">Available Robots:</h3>
                 <div id="producerList" class="producer-list">
                     <em style="color: #666;">Connect to signaling server first</em>
                 </div>
     </div>
     <script>
+        // Central signaling server
+        const SIGNALING_SERVER = 'wss://cduss-reachy-mini-central.hf.space/ws';
         // State
         let signalingWs = null;
         let peerConnection = null;
         let dataChannel = null;
         let selectedProducerId = null;
+        let myPeerId = null;
+        // Try to load token from localStorage
+        const savedToken = localStorage.getItem('hf_token');
+        if (savedToken) {
+            document.getElementById('hfToken').value = savedToken;
+        }
         // Logging
         function log(message, type = 'info') {
         // Signaling
         function connectSignaling() {
+            const token = document.getElementById('hfToken').value.trim();
+            if (!token) {
+                log('Please enter your HuggingFace token', 'error');
+                return;
+            }
+            // Save token for convenience
+            localStorage.setItem('hf_token', token);
+            const url = `${SIGNALING_SERVER}?token=${encodeURIComponent(token)}`;
+            log(`Connecting to central signaling server...`);
             updateSignalingStatus('connecting');
             try {
                 signalingWs = new WebSocket(url);
                 signalingWs.onopen = () => {
+                    log('Connected to signaling server!', 'success');
                     updateSignalingStatus('connected');
                     document.getElementById('connectBtn').disabled = true;
                     document.getElementById('disconnectBtn').disabled = false;
                 };
                 signalingWs.onmessage = (event) => {
+                    const msg = JSON.parse(event.data);
+                    log(`Received: ${msg.type}`);
+                    handleSignalingMessage(msg);
                 };
                 signalingWs.onerror = (error) => {
+                    log(`WebSocket error`, 'error');
                 };
                 signalingWs.onclose = (event) => {
+                    log(`Disconnected: code=${event.code}`);
+                    if (event.code === 4001) {
+                        log('Invalid token - please check your HuggingFace token', 'error');
+                    }
                     updateSignalingStatus('disconnected');
                     document.getElementById('connectBtn').disabled = false;
                     document.getElementById('disconnectBtn').disabled = true;
                     document.getElementById('startStreamBtn').disabled = true;
                 };
             } catch (e) {
+                log(`Failed to connect: ${e.message}`, 'error');
                 updateSignalingStatus('disconnected');
             }
         }
         }
         function handleSignalingMessage(msg) {
+            switch (msg.type) {
+                case 'welcome':
+                    myPeerId = msg.peerId;
+                    log(`My peer ID: ${myPeerId}`, 'success');
+                    // Request producer list
+                    signalingWs.send(JSON.stringify({ type: 'list' }));
+                    break;
+                case 'list':
+                    displayProducers(msg.producers);
+                    break;
+                case 'peerStatusChanged':
+                    log(`Producer ${msg.peerId} ${msg.roles?.length ? 'available' : 'left'}`);
+                    // Refresh list
+                    signalingWs.send(JSON.stringify({ type: 'list' }));
+                    break;
+                case 'sessionStarted':
+                    log(`Session started with producer: ${msg.peerId}`, 'success');
+                    break;
+                case 'peer':
+                    handlePeerMessage(msg);
+                    break;
+                case 'endSession':
+                    log('Session ended');
+                    stopStream();
+                    break;
+                case 'error':
+                    log(`Server error: ${msg.details}`, 'error');
+                    break;
             }
         }
             const container = document.getElementById('producerList');
             container.innerHTML = '';
             if (!producers || !Array.isArray(producers) || producers.length === 0) {
+                container.innerHTML = '<em style="color: #666;">No robots available. Make sure your robot is connected.</em>';
                 return;
             }
             for (const producer of producers) {
                 const div = document.createElement('div');
                 div.className = 'producer-item';
+                const name = producer.meta?.name || 'Unknown Robot';
+                div.innerHTML = `<strong>${name}</strong><br><small style="color: #888;">${producer.id.substring(0, 8)}...</small>`;
                 div.onclick = () => selectProducer(producer.id, div);
                 container.appendChild(div);
             }
+            log(`Found ${producers.length} robot(s)`, 'success');
         }
         function selectProducer(peerId, element) {
             element.classList.add('selected');
             selectedProducerId = peerId;
             document.getElementById('startStreamBtn').disabled = false;
+            log(`Selected robot: ${peerId.substring(0, 8)}...`);
         }
         // WebRTC
         async function startStream() {
             if (!selectedProducerId) {
+                log('No robot selected', 'error');
                 return;
             }
             log('Creating peer connection...');
             updateWebrtcStatus('connecting');
             const config = {
+                iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
             };
             peerConnection = new RTCPeerConnection(config);
             };
             peerConnection.oniceconnectionstatechange = () => {
+                log(`ICE state: ${peerConnection.iceConnectionState}`);
                 if (peerConnection.iceConnectionState === 'connected' ||
                     peerConnection.iceConnectionState === 'completed') {
                     updateWebrtcStatus('connected');
                 setupDataChannel(dataChannel);
             };
+            // Request session with producer - producer will send the SDP offer
+            log('Requesting session with robot...');
             signalingWs.send(JSON.stringify({
                 type: 'startSession',
                 peerId: selectedProducerId
             }));
         }
         async function handlePeerMessage(msg) {
             if (!peerConnection) {
+                log('No peer connection', 'error');
                 return;
             }
                 if (msg.ice) {
                     log('Received ICE candidate');
+                    await peerConnection.addIceCandidate(new RTCIceCandidate(msg.ice));
                 }
             } catch (e) {
+                log(`Error: ${e.message}`, 'error');
             }
         }
         function setupDataChannel(channel) {
             channel.onopen = () => log('Data channel opened', 'success');
             channel.onclose = () => log('Data channel closed');
+            channel.onerror = (e) => log(`Data channel error`, 'error');
+            channel.onmessage = (event) => log(`Received: ${event.data}`);
         }
         // Head Control
         }
         function createRotationMatrix(yawDeg, pitchDeg) {
             const yaw = degToRad(yawDeg);
             const pitch = degToRad(pitchDeg);
             const cy = Math.cos(yaw), sy = Math.sin(yaw);
             const cp = Math.cos(pitch), sp = Math.sin(pitch);
             return [
                 cy * cp,  -sy, cy * sp, 0,
                 sy * cp,   cy, sy * sp, 0,
             const msg = JSON.stringify({ set_target: matrix });
             dataChannel.send(msg);
+            log(`Sent pose: yaw=${yaw}, pitch=${pitch}`);
         }
         function centerHead() {
         }
         // Init
+        log('Ready. Enter your HuggingFace token and connect.', 'info');
     </script>
 </body>
 </html>