webrtc_example-dev

Running

App Files Files Community

cduss commited on Feb 2

Commit

04560b1

1 Parent(s): aa9f47b

wip

Browse files

Files changed (2) hide show

README.md +9 -4
index.html +105 -126

README.md CHANGED Viewed

@@ -5,16 +5,21 @@ colorFrom: blue
 colorTo: indigo
 sdk: static
 pinned: false
-hf_oauth: true
-hf_oauth_expiration_minutes: 480
 ---
 # Reachy Mini WebRTC Demo
-WebRTC dashboard to connect to your Reachy Mini robot via the central signaling server.
 ## Features
 - Video streaming from robot camera
 - Head control via data channel
-- HuggingFace OAuth authentication

 colorTo: indigo
 sdk: static
 pinned: false
 ---
 # Reachy Mini WebRTC Demo
+WebRTC dashboard to connect directly to your Reachy Mini robot.
 ## Features
 - Video streaming from robot camera
 - Head control via data channel
+- Direct WebSocket connection to robot daemon
+## Usage
+1. Enter your robot's IP address (e.g., 192.168.1.95)
+2. Click Connect to establish signaling connection
+3. Select the robot stream and click Start Stream
+4. Use the head controls to move the robot's head

index.html CHANGED Viewed

@@ -52,9 +52,6 @@
             width: 100%;
             margin-bottom: 10px;
         }
-        input[type="password"] {
-            font-family: monospace;
-        }
         button {
             background: #00d4ff;
             color: #000;
@@ -102,25 +99,20 @@
         }
         .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. Connection</h2>
-                <p style="color: #888; font-size: 0.9em;">You should be automatically authenticated via your HuggingFace login.</p>
                 <div class="controls">
                     <button id="connectBtn" onclick="connectSignaling()">Connect</button>
@@ -128,21 +120,13 @@
                 </div>
                 <div style="margin-top: 15px;">
-                    <span>Status: </span>
                     <span id="signalingStatus" class="status disconnected">Disconnected</span>
                 </div>
-                <!-- Fallback token input (hidden by default, shown if auto-auth fails) -->
-                <div id="tokenSection" style="display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid #0f3460;">
-                    <label>HuggingFace Token (fallback):</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>
-                    <button onclick="connectWithToken()" style="width: 100%;">Connect with Token</button>
-                </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>
@@ -190,19 +174,18 @@
     </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;
         // Logging
         function log(message, type = 'info') {
             const logArea = document.getElementById('logArea');
             const entry = document.createElement('div');
             entry.className = `log-entry ${type}`;
             entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
@@ -215,35 +198,33 @@
             document.getElementById('logArea').innerHTML = '';
         }
-        // Signaling - try without token first (HF proxy auth)
         function connectSignaling() {
-            doConnect(SIGNALING_SERVER);
-        }
-        // Fallback: connect with explicit token
-        function connectWithToken() {
-            const token = document.getElementById('hfToken').value.trim();
-            if (!token) {
-                log('Please enter your HuggingFace token', 'error');
                 return;
             }
-            localStorage.setItem('hf_token', token);
-            doConnect(`${SIGNALING_SERVER}?token=${encodeURIComponent(token)}`);
-        }
-        function doConnect(url) {
-            log(`Connecting to 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;
-                    document.getElementById('tokenSection').style.display = 'none';
                 };
                 signalingWs.onmessage = (event) => {
@@ -253,24 +234,17 @@
                 };
                 signalingWs.onerror = (error) => {
-                    log(`WebSocket error`, 'error');
                 };
                 signalingWs.onclose = (event) => {
                     log(`Disconnected: code=${event.code}`);
-                    if (event.code === 4001) {
-                        log('Auto-auth failed. Please enter your HF token below.', 'error');
-                        document.getElementById('tokenSection').style.display = 'block';
-                        // Try loading saved token
-                        const savedToken = localStorage.getItem('hf_token');
-                        if (savedToken) {
-                            document.getElementById('hfToken').value = savedToken;
-                        }
-                    }
                     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');
@@ -288,6 +262,7 @@
         function updateSignalingStatus(status) {
             const el = document.getElementById('signalingStatus');
             el.className = `status ${status}`;
             el.textContent = status.charAt(0).toUpperCase() + status.slice(1);
         }
@@ -296,9 +271,7 @@
             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':
@@ -306,13 +279,22 @@
                     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':
@@ -325,7 +307,7 @@
                     break;
                 case 'error':
-                    log(`Server error: ${msg.details}`, 'error');
                     break;
             }
         }
@@ -335,20 +317,38 @@
             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) {
@@ -356,38 +356,35 @@
             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.ontrack = (event) => {
-                log(`Received track: ${event.track.kind}`, 'success');
                 if (event.track.kind === 'video') {
                     document.getElementById('remoteVideo').srcObject = event.streams[0];
                 }
             };
             peerConnection.onicecandidate = (event) => {
-                if (event.candidate) {
-                    log(`Sending ICE candidate`);
                     signalingWs.send(JSON.stringify({
                         type: 'peer',
-                        sessionId: selectedProducerId,
                         ice: {
                             candidate: event.candidate.candidate,
                             sdpMLineIndex: event.candidate.sdpMLineIndex,
@@ -398,27 +395,31 @@
             };
             peerConnection.oniceconnectionstatechange = () => {
-                log(`ICE state: ${peerConnection.iceConnectionState}`);
                 if (peerConnection.iceConnectionState === 'connected' ||
                     peerConnection.iceConnectionState === 'completed') {
                     updateWebrtcStatus('connected');
                     document.getElementById('stopStreamBtn').disabled = false;
                     document.getElementById('sendPoseBtn').disabled = false;
                     document.getElementById('centerBtn').disabled = false;
-                } else if (peerConnection.iceConnectionState === 'disconnected' ||
-                           peerConnection.iceConnectionState === 'failed') {
                     updateWebrtcStatus('disconnected');
                 }
             };
             peerConnection.ondatachannel = (event) => {
-                log(`Data channel received: ${event.channel.label}`, 'success');
                 dataChannel = event.channel;
-                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
@@ -426,10 +427,7 @@
         }
         async function handlePeerMessage(msg) {
-            if (!peerConnection) {
-                log('No peer connection', 'error');
-                return;
-            }
             try {
                 if (msg.sdp) {
@@ -437,20 +435,18 @@
                     await peerConnection.setRemoteDescription(new RTCSessionDescription(msg.sdp));
                     if (msg.sdp.type === 'offer') {
-                        log('Creating answer...');
                         const answer = await peerConnection.createAnswer();
                         await peerConnection.setLocalDescription(answer);
-                        log('Sending SDP answer');
                         signalingWs.send(JSON.stringify({
                             type: 'peer',
-                            sessionId: selectedProducerId,
                             sdp: { type: 'answer', sdp: answer.sdp }
                         }));
                     }
                 }
                 if (msg.ice) {
-                    log('Received ICE candidate');
                     await peerConnection.addIceCandidate(new RTCIceCandidate(msg.ice));
                 }
             } catch (e) {
@@ -467,49 +463,23 @@
                 dataChannel.close();
                 dataChannel = null;
             }
             document.getElementById('remoteVideo').srcObject = null;
             updateWebrtcStatus('disconnected');
             document.getElementById('stopStreamBtn').disabled = true;
             document.getElementById('sendPoseBtn').disabled = true;
             document.getElementById('centerBtn').disabled = true;
-            log('Stream stopped');
         }
         function updateWebrtcStatus(status) {
             const el = document.getElementById('webrtcStatus');
             el.className = `status ${status}`;
             const labels = { connected: 'Connected', disconnected: 'Not Connected', connecting: 'Connecting...' };
             el.textContent = labels[status] || status;
         }
-        // Data Channel
-        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 degToRad(deg) {
-            return deg * Math.PI / 180;
-        }
-        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,
-                -sp,        0,      cp, 0,
-                0,          0,       0, 1
-            ];
-        }
         function sendHeadPose() {
             if (!dataChannel || dataChannel.readyState !== 'open') {
                 log('Data channel not ready', 'error');
@@ -518,11 +488,20 @@
             const yaw = parseFloat(document.getElementById('yawInput').value) || 0;
             const pitch = parseFloat(document.getElementById('pitchInput').value) || 0;
-            const matrix = createRotationMatrix(yaw, pitch);
-            const msg = JSON.stringify({ set_target: matrix });
-            dataChannel.send(msg);
             log(`Sent pose: yaw=${yaw}, pitch=${pitch}`);
         }
@@ -532,8 +511,8 @@
             sendHeadPose();
         }
-        // Init
-        log('Ready. Enter your HuggingFace token and connect.', 'info');
     </script>
 </body>
 </html>

             width: 100%;
             margin-bottom: 10px;
         }
         button {
             background: #00d4ff;
             color: #000;
         }
         .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">Connect directly to your robot</p>
         <div class="grid">
             <!-- Connection Panel -->
             <div class="card">
                 <h2>1. Connection</h2>
+                <label>Robot Address:</label>
+                <input type="text" id="robotAddress" value="192.168.1.95" placeholder="e.g., 192.168.1.95 or reachy-mini.local">
                 <div class="controls">
                     <button id="connectBtn" onclick="connectSignaling()">Connect</button>
                 </div>
                 <div style="margin-top: 15px;">
+                    <span>Signaling: </span>
                     <span id="signalingStatus" class="status disconnected">Disconnected</span>
                 </div>
+                <h3 style="margin-top: 20px; font-size: 1em;">Available Streams:</h3>
                 <div id="producerList" class="producer-list">
+                    <em style="color: #666;">Connect to robot first</em>
                 </div>
             </div>
     </div>
     <script>
         // State
         let signalingWs = null;
         let peerConnection = null;
         let dataChannel = null;
         let selectedProducerId = null;
         let myPeerId = null;
+        let currentSessionId = null;
         // Logging
         function log(message, type = 'info') {
             const logArea = document.getElementById('logArea');
+            if (!logArea) return;
             const entry = document.createElement('div');
             entry.className = `log-entry ${type}`;
             entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
             document.getElementById('logArea').innerHTML = '';
         }
+        // Signaling - connect to robot's daemon WebSocket proxy
         function connectSignaling() {
+            const robotAddress = document.getElementById('robotAddress').value.trim();
+            if (!robotAddress) {
+                log('Please enter robot address', 'error');
                 return;
             }
+            // Connect to daemon's WebRTC signaling proxy endpoint
+            const url = `ws://${robotAddress}:8000/webrtc/ws`;
+            log(`Connecting to ${url}...`);
             updateSignalingStatus('connecting');
             try {
                 signalingWs = new WebSocket(url);
                 signalingWs.onopen = () => {
+                    log('Connected to signaling!', 'success');
                     updateSignalingStatus('connected');
                     document.getElementById('connectBtn').disabled = true;
                     document.getElementById('disconnectBtn').disabled = false;
+                    // Request listener role to get producer list
+                    signalingWs.send(JSON.stringify({
+                        type: 'setPeerStatus',
+                        roles: ['listener'],
+                        meta: { name: 'WebRTC Dashboard' }
+                    }));
                 };
                 signalingWs.onmessage = (event) => {
                 };
                 signalingWs.onerror = (error) => {
+                    log('WebSocket error - check robot address', 'error');
                 };
                 signalingWs.onclose = (event) => {
                     log(`Disconnected: code=${event.code}`);
                     updateSignalingStatus('disconnected');
                     document.getElementById('connectBtn').disabled = false;
                     document.getElementById('disconnectBtn').disabled = true;
                     document.getElementById('startStreamBtn').disabled = true;
+                    selectedProducerId = null;
+                    myPeerId = null;
                 };
             } catch (e) {
                 log(`Failed to connect: ${e.message}`, 'error');
         function updateSignalingStatus(status) {
             const el = document.getElementById('signalingStatus');
+            if (!el) return;
             el.className = `status ${status}`;
             el.textContent = status.charAt(0).toUpperCase() + status.slice(1);
         }
             switch (msg.type) {
                 case 'welcome':
                     myPeerId = msg.peerId;
+                    log(`My peer ID: ${myPeerId.substring(0, 8)}...`, 'success');
                     break;
                 case 'list':
                     break;
                 case 'peerStatusChanged':
+                    log(`Producer ${msg.peerId.substring(0, 8)}... ${msg.roles?.length ? 'available' : 'gone'}`);
+                    if (msg.roles && msg.roles.includes('producer')) {
+                        // Add/update producer
+                        addProducer(msg.peerId, msg.meta);
+                    }
                     break;
                 case 'sessionStarted':
+                    currentSessionId = msg.sessionId;
+                    log(`Session started: ${msg.sessionId.substring(0, 8)}...`, 'success');
+                    break;
+                case 'startSession':
+                    // Robot is starting session with us (we're consumer)
+                    currentSessionId = msg.sessionId;
+                    log(`Session from robot: ${msg.sessionId.substring(0, 8)}...`, 'success');
                     break;
                 case 'peer':
                     break;
                 case 'error':
+                    log(`Error: ${msg.details}`, 'error');
                     break;
             }
         }
             container.innerHTML = '';
             if (!producers || !Array.isArray(producers) || producers.length === 0) {
+                container.innerHTML = '<em style="color: #666;">No streams available</em>';
                 return;
             }
             for (const producer of producers) {
+                addProducerElement(producer.id, producer.meta);
             }
+            log(`Found ${producers.length} stream(s)`, 'success');
+        }
+        function addProducer(peerId, meta) {
+            const container = document.getElementById('producerList');
+            // Check if already exists
+            if (document.getElementById(`producer-${peerId}`)) return;
+            // Clear "no streams" message if present
+            if (container.querySelector('em')) {
+                container.innerHTML = '';
+            }
+            addProducerElement(peerId, meta);
+        }
+        function addProducerElement(peerId, meta) {
+            const container = document.getElementById('producerList');
+            const div = document.createElement('div');
+            div.id = `producer-${peerId}`;
+            div.className = 'producer-item';
+            const name = meta?.name || 'Reachy Mini';
+            div.innerHTML = `<strong>${name}</strong><br><small style="color: #888;">${peerId.substring(0, 8)}...</small>`;
+            div.onclick = () => selectProducer(peerId, div);
+            container.appendChild(div);
         }
         function selectProducer(peerId, element) {
             element.classList.add('selected');
             selectedProducerId = peerId;
             document.getElementById('startStreamBtn').disabled = false;
+            log(`Selected: ${peerId.substring(0, 8)}...`);
         }
         // WebRTC
         async function startStream() {
             if (!selectedProducerId) {
+                log('No stream selected', 'error');
                 return;
             }
             log('Creating peer connection...');
             updateWebrtcStatus('connecting');
+            peerConnection = new RTCPeerConnection({
                 iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+            });
             peerConnection.ontrack = (event) => {
+                log(`Received ${event.track.kind} track`, 'success');
                 if (event.track.kind === 'video') {
                     document.getElementById('remoteVideo').srcObject = event.streams[0];
                 }
             };
             peerConnection.onicecandidate = (event) => {
+                if (event.candidate && currentSessionId) {
                     signalingWs.send(JSON.stringify({
                         type: 'peer',
+                        sessionId: currentSessionId,
                         ice: {
                             candidate: event.candidate.candidate,
                             sdpMLineIndex: event.candidate.sdpMLineIndex,
             };
             peerConnection.oniceconnectionstatechange = () => {
+                log(`ICE: ${peerConnection.iceConnectionState}`);
                 if (peerConnection.iceConnectionState === 'connected' ||
                     peerConnection.iceConnectionState === 'completed') {
                     updateWebrtcStatus('connected');
                     document.getElementById('stopStreamBtn').disabled = false;
                     document.getElementById('sendPoseBtn').disabled = false;
                     document.getElementById('centerBtn').disabled = false;
+                } else if (peerConnection.iceConnectionState === 'failed' ||
+                           peerConnection.iceConnectionState === 'disconnected') {
                     updateWebrtcStatus('disconnected');
+                    if (peerConnection.iceConnectionState === 'failed') {
+                        log('Connection failed', 'error');
+                    }
                 }
             };
             peerConnection.ondatachannel = (event) => {
+                log(`Data channel: ${event.channel.label}`, 'success');
                 dataChannel = event.channel;
+                dataChannel.onopen = () => log('Data channel open', 'success');
+                dataChannel.onclose = () => log('Data channel closed');
+                dataChannel.onmessage = (e) => log(`DC message: ${e.data}`);
             };
+            log('Requesting session...');
             signalingWs.send(JSON.stringify({
                 type: 'startSession',
                 peerId: selectedProducerId
         }
         async function handlePeerMessage(msg) {
+            if (!peerConnection) return;
             try {
                 if (msg.sdp) {
                     await peerConnection.setRemoteDescription(new RTCSessionDescription(msg.sdp));
                     if (msg.sdp.type === 'offer') {
                         const answer = await peerConnection.createAnswer();
                         await peerConnection.setLocalDescription(answer);
                         signalingWs.send(JSON.stringify({
                             type: 'peer',
+                            sessionId: currentSessionId,
                             sdp: { type: 'answer', sdp: answer.sdp }
                         }));
+                        log('Sent SDP answer');
                     }
                 }
                 if (msg.ice) {
                     await peerConnection.addIceCandidate(new RTCIceCandidate(msg.ice));
                 }
             } catch (e) {
                 dataChannel.close();
                 dataChannel = null;
             }
+            currentSessionId = null;
             document.getElementById('remoteVideo').srcObject = null;
             updateWebrtcStatus('disconnected');
             document.getElementById('stopStreamBtn').disabled = true;
             document.getElementById('sendPoseBtn').disabled = true;
             document.getElementById('centerBtn').disabled = true;
         }
         function updateWebrtcStatus(status) {
             const el = document.getElementById('webrtcStatus');
+            if (!el) return;
             el.className = `status ${status}`;
             const labels = { connected: 'Connected', disconnected: 'Not Connected', connecting: 'Connecting...' };
             el.textContent = labels[status] || status;
         }
         // Head Control
         function sendHeadPose() {
             if (!dataChannel || dataChannel.readyState !== 'open') {
                 log('Data channel not ready', 'error');
             const yaw = parseFloat(document.getElementById('yawInput').value) || 0;
             const pitch = parseFloat(document.getElementById('pitchInput').value) || 0;
+            const yawRad = yaw * Math.PI / 180;
+            const pitchRad = pitch * Math.PI / 180;
+            const cy = Math.cos(yawRad), sy = Math.sin(yawRad);
+            const cp = Math.cos(pitchRad), sp = Math.sin(pitchRad);
+            const matrix = [
+                cy * cp, -sy, cy * sp, 0,
+                sy * cp,  cy, sy * sp, 0,
+                -sp,       0,      cp, 0,
+                0,         0,       0, 1
+            ];
+            dataChannel.send(JSON.stringify({ set_target: matrix }));
             log(`Sent pose: yaw=${yaw}, pitch=${pitch}`);
         }
             sendHeadPose();
         }
+        // Initialize
+        log('Ready. Enter robot address and click Connect.', 'info');
     </script>
 </body>
 </html>