webrtc_example-dev

Running

cduss Claude Opus 4.5 commited on Feb 2

Commit

b293436

1 Parent(s): 04560b1

Add OAuth and central signaling server support

- Update index.html with HuggingFace OAuth authentication
- Connect to central signaling server (wss://cduss-reachy-mini-central.hf.space/ws)
- Enable hf_oauth in README.md configuration

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

Files changed (2) hide show

README.md +14 -7
index.html +220 -118

README.md CHANGED Viewed

@@ -5,21 +5,28 @@ colorFrom: blue
 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

 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
+## How it works
+1. Sign in with your HuggingFace account
+2. Connect to the central signaling server
+3. Select your robot from the list
+4. Start the video stream
+## Requirements
+- Robot must be running with WebRTC enabled and connected to the central signaling server
+- Robot must have a valid HuggingFace token configured

index.html CHANGED Viewed

@@ -62,6 +62,15 @@
         button:hover { background: #00a8cc; }
         button:disabled { background: #555; cursor: not-allowed; }
         .log {
             background: #0a0a1a;
             border-radius: 8px;
@@ -99,81 +108,118 @@
         }
         .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>
-                    <button id="disconnectBtn" onclick="disconnectSignaling()" disabled>Disconnect</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>
-            <!-- Video Panel -->
-            <div class="card">
-                <h2>2. Video Stream</h2>
-                <video id="remoteVideo" autoplay playsinline muted></video>
-                <div class="controls">
-                    <button id="startStreamBtn" onclick="startStream()" disabled>Start Stream</button>
-                    <button id="stopStreamBtn" onclick="stopStream()" disabled>Stop Stream</button>
-                </div>
-                <div style="margin-top: 15px;">
-                    <span>WebRTC: </span>
-                    <span id="webrtcStatus" class="status disconnected">Not Connected</span>
                 </div>
-            </div>
-            <!-- Control Panel -->
-            <div class="card">
-                <h2>3. Head Control</h2>
-                <p style="color: #888; font-size: 0.9em;">Send head pose commands via data channel</p>
-                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
-                    <div>
-                        <label>Yaw (deg):</label>
-                        <input type="number" id="yawInput" value="0" min="-45" max="45">
                     </div>
-                    <div>
-                        <label>Pitch (deg):</label>
-                        <input type="number" id="pitchInput" value="0" min="-30" max="30">
                     </div>
                 </div>
-                <div class="controls">
-                    <button id="sendPoseBtn" onclick="sendHeadPose()" disabled>Send Pose</button>
-                    <button id="centerBtn" onclick="centerHead()" disabled>Center</button>
-                </div>
-            </div>
-            <!-- Log Panel -->
-            <div class="card">
-                <h2>Debug Log</h2>
-                <div id="logArea" class="log"></div>
-                <button onclick="clearLog()" style="margin-top: 10px; width: 100%;">Clear Log</button>
             </div>
         </div>
     </div>
-    <script>
         // State
         let signalingWs = null;
         let peerConnection = null;
@@ -181,6 +227,90 @@
         let selectedProducerId = null;
         let myPeerId = null;
         let currentSessionId = null;
         // Logging
         function log(message, type = 'info') {
@@ -198,33 +328,25 @@
             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) => {
@@ -234,11 +356,15 @@
                 };
                 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;
@@ -271,7 +397,15 @@
             switch (msg.type) {
                 case 'welcome':
                     myPeerId = msg.peerId;
-                    log(`My peer ID: ${myPeerId.substring(0, 8)}...`, 'success');
                     break;
                 case 'list':
@@ -279,11 +413,9 @@
                     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':
@@ -291,12 +423,6 @@
                     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':
                     handlePeerMessage(msg);
                     break;
@@ -317,38 +443,20 @@
             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) {
@@ -362,7 +470,7 @@
         // WebRTC
         async function startStream() {
             if (!selectedProducerId) {
-                log('No stream selected', 'error');
                 return;
             }
@@ -402,12 +510,9 @@
                     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');
-                    }
                 }
             };
@@ -416,10 +521,10 @@
                 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
@@ -510,9 +615,6 @@
             document.getElementById('pitchInput').value = 0;
             sendHeadPose();
         }
-        // Initialize
-        log('Ready. Enter robot address and click Connect.', 'info');
     </script>
 </body>
 </html>

         button:hover { background: #00a8cc; }
         button:disabled { background: #555; cursor: not-allowed; }
+        .btn-hf {
+            background: #ff9d00;
+            color: #000;
+            width: 100%;
+            padding: 12px 20px;
+            font-size: 1.1em;
+        }
+        .btn-hf:hover { background: #ffb340; }
         .log {
             background: #0a0a1a;
             border-radius: 8px;
         }
         .producer-item:hover { background: #1a4a80; }
         .producer-item.selected { border: 2px solid #00d4ff; }
+        .user-info {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px;
+            background: #0f3460;
+            border-radius: 8px;
+            margin-bottom: 15px;
+        }
+        .user-info .username { flex: 1; font-weight: 500; }
+        .user-info button { padding: 6px 12px; font-size: 0.9em; }
+        #login-view, #main-view { display: none; }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Reachy Mini WebRTC Dashboard</h1>
+        <p class="subtitle">Connect to your robot via central signaling server</p>
+        <!-- Login View -->
+        <div id="login-view">
+            <div class="card" style="max-width: 400px; margin: 50px auto; text-align: center;">
+                <h2>Sign In Required</h2>
+                <p style="color: #888; margin-bottom: 20px;">Sign in with your HuggingFace account to connect to your robot.</p>
+                <button class="btn-hf" onclick="loginToHuggingFace()">
+                    Sign in with Hugging Face
+                </button>
+            </div>
+        </div>
+        <!-- Main View (after login) -->
+        <div id="main-view">
+            <div class="grid">
+                <!-- Connection Panel -->
+                <div class="card">
+                    <h2>1. Connection</h2>
+                    <div class="user-info">
+                        <span>Signed in as</span>
+                        <span class="username" id="username">@user</span>
+                        <button onclick="logout()">Sign out</button>
+                    </div>
+                    <div class="controls">
+                        <button id="connectBtn" onclick="connectSignaling()">Connect to Server</button>
+                        <button id="disconnectBtn" onclick="disconnectSignaling()" disabled>Disconnect</button>
+                    </div>
+                    <div style="margin-top: 15px;">
+                        <span>Status: </span>
+                        <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>
+                <!-- Video Panel -->
+                <div class="card">
+                    <h2>2. Video Stream</h2>
+                    <video id="remoteVideo" autoplay playsinline muted></video>
+                    <div class="controls">
+                        <button id="startStreamBtn" onclick="startStream()" disabled>Start Stream</button>
+                        <button id="stopStreamBtn" onclick="stopStream()" disabled>Stop Stream</button>
+                    </div>
+                    <div style="margin-top: 15px;">
+                        <span>WebRTC: </span>
+                        <span id="webrtcStatus" class="status disconnected">Not Connected</span>
+                    </div>
                 </div>
+                <!-- Control Panel -->
+                <div class="card">
+                    <h2>3. Head Control</h2>
+                    <p style="color: #888; font-size: 0.9em;">Send head pose commands via data channel</p>
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                        <div>
+                            <label>Yaw (deg):</label>
+                            <input type="number" id="yawInput" value="0" min="-45" max="45">
+                        </div>
+                        <div>
+                            <label>Pitch (deg):</label>
+                            <input type="number" id="pitchInput" value="0" min="-30" max="30">
+                        </div>
                     </div>
+                    <div class="controls">
+                        <button id="sendPoseBtn" onclick="sendHeadPose()" disabled>Send Pose</button>
+                        <button id="centerBtn" onclick="centerHead()" disabled>Center</button>
                     </div>
                 </div>
+                <!-- Log Panel -->
+                <div class="card">
+                    <h2>Debug Log</h2>
+                    <div id="logArea" class="log"></div>
+                    <button onclick="clearLog()" style="margin-top: 10px; width: 100%;">Clear Log</button>
+                </div>
             </div>
         </div>
     </div>
+    <!-- HuggingFace Hub library for OAuth -->
+    <script type="module">
+        import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.15.2/+esm";
+        // Central signaling server (same HF space owner)
+        const SIGNALING_SERVER = 'wss://cduss-reachy-mini-central.hf.space/ws';
         // State
         let signalingWs = null;
         let peerConnection = null;
         let selectedProducerId = null;
         let myPeerId = null;
         let currentSessionId = null;
+        let userToken = null;
+        let currentUser = null;
+        // Make functions available globally
+        window.loginToHuggingFace = loginToHuggingFace;
+        window.logout = logout;
+        window.connectSignaling = connectSignaling;
+        window.disconnectSignaling = disconnectSignaling;
+        window.startStream = startStream;
+        window.stopStream = stopStream;
+        window.sendHeadPose = sendHeadPose;
+        window.centerHead = centerHead;
+        window.clearLog = clearLog;
+        // Initialize on page load
+        document.addEventListener('DOMContentLoaded', initAuth);
+        async function initAuth() {
+            try {
+                // Check if returning from OAuth redirect
+                const oauthResult = await oauthHandleRedirectIfPresent();
+                if (oauthResult) {
+                    currentUser = oauthResult.userInfo.name || oauthResult.userInfo.fullname || oauthResult.userInfo.preferred_username;
+                    userToken = oauthResult.accessToken;
+                    sessionStorage.setItem('hf_token', userToken);
+                    sessionStorage.setItem('hf_username', currentUser);
+                    sessionStorage.setItem('hf_token_expires', oauthResult.accessTokenExpiresAt);
+                    log('OAuth login successful: ' + currentUser, 'success');
+                    showMainView();
+                } else {
+                    // Check stored session
+                    const storedToken = sessionStorage.getItem('hf_token');
+                    const storedUser = sessionStorage.getItem('hf_username');
+                    const tokenExpires = sessionStorage.getItem('hf_token_expires');
+                    if (storedToken && storedUser && tokenExpires && new Date(tokenExpires) > new Date()) {
+                        userToken = storedToken;
+                        currentUser = storedUser;
+                        showMainView();
+                    } else {
+                        showLoginView();
+                    }
+                }
+            } catch (error) {
+                console.error('Auth error:', error);
+                log('Auth error: ' + error.message, 'error');
+                showLoginView();
+            }
+        }
+        async function loginToHuggingFace() {
+            try {
+                const loginUrl = await oauthLoginUrl();
+                window.location.href = loginUrl;
+            } catch (error) {
+                console.error('Login error:', error);
+                alert('Failed to initiate login: ' + error.message);
+            }
+        }
+        function logout() {
+            sessionStorage.removeItem('hf_token');
+            sessionStorage.removeItem('hf_username');
+            sessionStorage.removeItem('hf_token_expires');
+            userToken = null;
+            currentUser = null;
+            disconnectSignaling();
+            showLoginView();
+        }
+        function showLoginView() {
+            document.getElementById('login-view').style.display = 'block';
+            document.getElementById('main-view').style.display = 'none';
+        }
+        function showMainView() {
+            document.getElementById('login-view').style.display = 'none';
+            document.getElementById('main-view').style.display = 'block';
+            document.getElementById('username').textContent = '@' + currentUser;
+            log('Ready. Click "Connect to Server" to find your robot.', 'info');
+        }
         // Logging
         function log(message, type = 'info') {
             document.getElementById('logArea').innerHTML = '';
         }
+        // Signaling
         function connectSignaling() {
+            if (!userToken) {
+                log('Not authenticated', 'error');
                 return;
             }
+            const url = `${SIGNALING_SERVER}?token=${encodeURIComponent(userToken)}`;
+            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;
                 };
                 signalingWs.onmessage = (event) => {
                 };
                 signalingWs.onerror = (error) => {
+                    log('WebSocket error', 'error');
                 };
                 signalingWs.onclose = (event) => {
                     log(`Disconnected: code=${event.code}`);
+                    if (event.code === 4001) {
+                        log('Authentication failed - please sign in again', 'error');
+                        logout();
+                    }
                     updateSignalingStatus('disconnected');
                     document.getElementById('connectBtn').disabled = false;
                     document.getElementById('disconnectBtn').disabled = true;
             switch (msg.type) {
                 case 'welcome':
                     myPeerId = msg.peerId;
+                    log(`Connected as: ${myPeerId.substring(0, 8)}...`, 'success');
+                    // Register as listener to get producer announcements
+                    signalingWs.send(JSON.stringify({
+                        type: 'setPeerStatus',
+                        roles: ['listener'],
+                        meta: { name: 'WebRTC Dashboard' }
+                    }));
+                    // Request list of producers
+                    signalingWs.send(JSON.stringify({ type: 'list' }));
                     break;
                 case 'list':
                     break;
                 case 'peerStatusChanged':
+                    log(`Robot ${msg.peerId.substring(0, 8)}... ${msg.roles?.length ? 'connected' : 'disconnected'}`);
+                    // Refresh producer list
+                    signalingWs.send(JSON.stringify({ type: 'list' }));
                     break;
                 case 'sessionStarted':
                     log(`Session started: ${msg.sessionId.substring(0, 8)}...`, 'success');
                     break;
                 case 'peer':
                     handlePeerMessage(msg);
                     break;
             container.innerHTML = '';
             if (!producers || !Array.isArray(producers) || producers.length === 0) {
+                container.innerHTML = '<em style="color: #666;">No robots connected. Make sure your robot is online and connected to central server.</em>';
                 return;
             }
             for (const producer of producers) {
+                const div = document.createElement('div');
+                div.className = 'producer-item';
+                const name = producer.meta?.name || 'Reachy Mini';
+                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) {
         // WebRTC
         async function startStream() {
             if (!selectedProducerId) {
+                log('No robot selected', 'error');
                 return;
             }
                     document.getElementById('stopStreamBtn').disabled = false;
                     document.getElementById('sendPoseBtn').disabled = false;
                     document.getElementById('centerBtn').disabled = false;
+                } else if (peerConnection.iceConnectionState === 'failed') {
                     updateWebrtcStatus('disconnected');
+                    log('Connection failed', 'error');
                 }
             };
                 dataChannel = event.channel;
                 dataChannel.onopen = () => log('Data channel open', 'success');
                 dataChannel.onclose = () => log('Data channel closed');
+                dataChannel.onmessage = (e) => log(`Received: ${e.data}`);
             };
+            log('Requesting session with robot...');
             signalingWs.send(JSON.stringify({
                 type: 'startSession',
                 peerId: selectedProducerId
             document.getElementById('pitchInput').value = 0;
             sendHeadPose();
         }
     </script>
 </body>
 </html>