| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> |
| <title>Reachy Mini - Pollen Robotics</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --pollen-coral: #FF6B35; |
| --pollen-coral-light: #FF8A5C; |
| --pollen-coral-dark: #E55A2B; |
| --pollen-dark: #1A1A2E; |
| --pollen-darker: #0F0F1A; |
| --pollen-card: #16213E; |
| --pollen-card-light: #1E2A4A; |
| --text-primary: #FFFFFF; |
| --text-secondary: #A0AEC0; |
| --text-muted: #718096; |
| --success: #48BB78; |
| --warning: #ECC94B; |
| --danger: #F56565; |
| } |
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| |
| body { |
| font-family: 'Inter', system-ui, -apple-system, sans-serif; |
| background: var(--pollen-darker); |
| color: var(--text-primary); |
| min-height: 100vh; |
| min-height: 100dvh; |
| overflow-x: hidden; |
| } |
| |
| |
| .header { |
| background: rgba(0,0,0,0.4); |
| backdrop-filter: blur(10px); |
| padding: 8px 16px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| border-bottom: 1px solid rgba(255,107,53,0.2); |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .logo img { |
| width: 32px; |
| height: 32px; |
| border-radius: 6px; |
| } |
| |
| .logo-text { |
| font-weight: 700; |
| font-size: 1em; |
| color: var(--pollen-coral); |
| } |
| |
| .logo-text span { |
| color: var(--text-secondary); |
| font-weight: 400; |
| font-size: 0.85em; |
| } |
| |
| .user-section { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .user-badge { |
| background: var(--pollen-card); |
| padding: 4px 12px; |
| border-radius: 16px; |
| font-size: 0.8em; |
| } |
| |
| .btn-logout { |
| background: transparent; |
| border: 1px solid var(--text-muted); |
| color: var(--text-secondary); |
| padding: 4px 12px; |
| border-radius: 12px; |
| cursor: pointer; |
| font-size: 0.75em; |
| } |
| |
| |
| .app-container { |
| display: flex; |
| flex-direction: column; |
| padding: 8px; |
| gap: 8px; |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| |
| |
| .video-container { |
| position: relative; |
| background: #000; |
| border-radius: 12px; |
| overflow: hidden; |
| aspect-ratio: 16/9; |
| width: 100%; |
| } |
| |
| video { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| background: linear-gradient(135deg, #0a0a15 0%, #1a1a2e 100%); |
| } |
| |
| .video-overlay-top { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| padding: 12px; |
| background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%); |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| } |
| |
| .connection-badge { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| background: rgba(0,0,0,0.5); |
| padding: 6px 12px; |
| border-radius: 16px; |
| font-size: 0.8em; |
| } |
| |
| .status-indicator { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--danger); |
| } |
| |
| .status-indicator.connected { |
| background: var(--success); |
| box-shadow: 0 0 8px var(--success); |
| } |
| |
| .status-indicator.connecting { |
| background: var(--warning); |
| animation: blink 0.8s infinite; |
| } |
| |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.4; } |
| } |
| |
| .robot-name { |
| background: rgba(0,0,0,0.5); |
| padding: 6px 12px; |
| border-radius: 16px; |
| font-size: 0.8em; |
| font-weight: 500; |
| } |
| |
| .video-overlay-bottom { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| padding: 12px; |
| background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); |
| } |
| |
| .video-controls { |
| display: flex; |
| justify-content: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
| |
| .btn { |
| padding: 8px 16px; |
| border: none; |
| border-radius: 8px; |
| font-weight: 600; |
| font-size: 0.85em; |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| |
| .btn-primary { |
| background: var(--pollen-coral); |
| color: white; |
| } |
| |
| .btn-secondary { |
| background: rgba(255,255,255,0.15); |
| color: white; |
| } |
| |
| .btn-danger { |
| background: var(--danger); |
| color: white; |
| } |
| |
| .btn:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
| |
| .btn-mute { |
| background: rgba(255,255,255,0.15); |
| color: white; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
| |
| .btn-mute.muted { |
| background: var(--danger); |
| } |
| |
| .btn-mute svg { |
| width: 16px; |
| height: 16px; |
| } |
| |
| |
| .panel { |
| background: var(--pollen-card); |
| border-radius: 12px; |
| overflow: hidden; |
| } |
| |
| .panel-header { |
| padding: 10px 14px; |
| background: rgba(0,0,0,0.2); |
| font-weight: 600; |
| font-size: 0.85em; |
| color: var(--pollen-coral); |
| } |
| |
| .panel-content { |
| padding: 12px; |
| } |
| |
| |
| .slider-row { |
| display: flex; |
| gap: 12px; |
| align-items: center; |
| margin-bottom: 12px; |
| } |
| |
| .slider-row:last-child { |
| margin-bottom: 0; |
| } |
| |
| .slider-label { |
| font-size: 0.8em; |
| color: var(--text-secondary); |
| min-width: 80px; |
| } |
| |
| .slider { |
| flex: 1; |
| height: 8px; |
| -webkit-appearance: none; |
| background: var(--pollen-darker); |
| border-radius: 4px; |
| } |
| |
| .slider::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 20px; |
| height: 20px; |
| background: var(--pollen-coral); |
| border-radius: 50%; |
| cursor: pointer; |
| } |
| |
| .slider-value { |
| font-family: monospace; |
| font-size: 0.8em; |
| color: var(--pollen-coral); |
| min-width: 45px; |
| text-align: right; |
| } |
| |
| |
| .sound-row { |
| display: flex; |
| gap: 8px; |
| margin-bottom: 10px; |
| } |
| |
| .sound-input { |
| flex: 1; |
| padding: 8px 10px; |
| background: var(--pollen-darker); |
| border: 1px solid var(--pollen-card-light); |
| border-radius: 6px; |
| color: var(--text-primary); |
| font-size: 0.85em; |
| } |
| |
| .sound-presets { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| margin-bottom: 12px; |
| } |
| |
| .preset-chip { |
| padding: 4px 10px; |
| background: var(--pollen-darker); |
| border: 1px solid var(--pollen-card-light); |
| border-radius: 12px; |
| color: var(--text-secondary); |
| font-size: 0.7em; |
| cursor: pointer; |
| } |
| |
| .preset-chip:hover { |
| border-color: var(--pollen-coral); |
| color: var(--pollen-coral); |
| } |
| |
| |
| .robot-list { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
| |
| .robot-card { |
| padding: 10px 14px; |
| background: var(--pollen-darker); |
| border: 2px solid transparent; |
| border-radius: 8px; |
| cursor: pointer; |
| } |
| |
| .robot-card:hover { |
| background: var(--pollen-card-light); |
| } |
| |
| .robot-card.selected { |
| border-color: var(--pollen-coral); |
| } |
| |
| .robot-card .name { |
| font-weight: 600; |
| font-size: 0.9em; |
| } |
| |
| .robot-card .id { |
| font-size: 0.75em; |
| color: var(--text-muted); |
| font-family: monospace; |
| } |
| |
| |
| @media (min-width: 900px) { |
| .app-container { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| grid-template-rows: auto auto auto auto; |
| max-width: 1200px; |
| gap: 12px; |
| } |
| |
| .video-container { |
| grid-column: 1; |
| grid-row: 1 / 3; |
| } |
| |
| #robotSelector { |
| grid-column: 1; |
| grid-row: 3; |
| } |
| |
| .panel:nth-of-type(1) { |
| grid-column: 2; |
| grid-row: 1; |
| } |
| |
| .panel:nth-of-type(2) { |
| grid-column: 2; |
| grid-row: 2; |
| } |
| |
| .panel:nth-of-type(3) { |
| grid-column: 2; |
| grid-row: 3; |
| } |
| } |
| |
| |
| .login-view { |
| min-height: 100vh; |
| min-height: 100dvh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 20px; |
| } |
| |
| .login-card { |
| background: var(--pollen-card); |
| padding: 40px; |
| border-radius: 16px; |
| text-align: center; |
| max-width: 380px; |
| } |
| |
| .login-logo { |
| width: 72px; |
| height: 72px; |
| margin-bottom: 20px; |
| border-radius: 12px; |
| } |
| |
| .login-card h2 { |
| color: var(--pollen-coral); |
| margin-bottom: 10px; |
| font-size: 1.5em; |
| } |
| |
| .login-card p { |
| color: var(--text-secondary); |
| margin-bottom: 24px; |
| font-size: 0.9em; |
| line-height: 1.5; |
| } |
| |
| .btn-hf { |
| background: #FFD21E; |
| color: #000; |
| border: none; |
| padding: 12px 28px; |
| border-radius: 8px; |
| font-size: 0.95em; |
| font-weight: 700; |
| cursor: pointer; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .hidden { display: none !important; } |
| </style> |
| </head> |
| <body> |
| |
| <div id="loginView" class="login-view"> |
| <div class="login-card"> |
| <img class="login-logo" src="https://raw.githubusercontent.com/pollen-robotics/reachy-mini-desktop-app/develop/src-tauri/icons/128x128.png" alt="Reachy Mini"> |
| <h2>Reachy Mini</h2> |
| <p>Sign in with your HuggingFace account to connect and control your robot remotely.</p> |
| <button class="btn-hf" onclick="loginToHuggingFace()"> |
| <svg width="18" height="18" viewBox="0 0 95 88" fill="currentColor"> |
| <path d="M47.5 0C26.3 0 9.1 17.2 9.1 38.4v2.9c0 4.5 1.1 9 3.2 13L0 88h95L82.7 54.3c2.1-4 3.2-8.5 3.2-13v-2.9C85.9 17.2 68.7 0 47.5 0z"/> |
| </svg> |
| Sign in with Hugging Face |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="mainApp" class="hidden"> |
| <header class="header"> |
| <div class="logo"> |
| <img src="https://raw.githubusercontent.com/pollen-robotics/reachy-mini-desktop-app/develop/src-tauri/icons/128x128.png" alt="Reachy Mini"> |
| <div class="logo-text">Reachy Mini <span>by Pollen Robotics</span></div> |
| </div> |
| <div class="user-section"> |
| <div class="user-badge"><span id="username">@user</span></div> |
| <button class="btn-logout" onclick="logout()">Sign out</button> |
| </div> |
| </header> |
|
|
| <div class="app-container"> |
| |
| <div class="video-container"> |
| <video id="remoteVideo" autoplay playsinline></video> |
|
|
| <div class="video-overlay-top"> |
| <div class="connection-badge"> |
| <div class="status-indicator" id="statusIndicator"></div> |
| <span id="statusText">Disconnected</span> |
| </div> |
| <div class="robot-name" id="robotName"></div> |
| </div> |
|
|
| <div class="video-overlay-bottom"> |
| <div class="video-controls"> |
| <button class="btn btn-secondary" id="connectBtn" onclick="connectSignaling()">Connect</button> |
| <button class="btn btn-primary" id="startBtn" onclick="startStream()" disabled>Start</button> |
| <button class="btn btn-danger" id="stopBtn" onclick="stopStream()" disabled>Stop</button> |
| <button class="btn btn-mute muted" id="muteBtn" onclick="toggleMute()" disabled> |
| <svg id="speakerOffIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon> |
| <line x1="23" y1="9" x2="17" y2="15"></line> |
| <line x1="17" y1="9" x2="23" y2="15"></line> |
| </svg> |
| <svg id="speakerOnIcon" class="hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon> |
| <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path> |
| </svg> |
| <span id="muteText">Unmute</span> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
|
|
| |
| <div id="robotSelector" class="panel hidden"> |
| <div class="panel-header">Available Robots</div> |
| <div class="panel-content"> |
| <div id="robotList" class="robot-list"> |
| <div style="color: var(--text-muted); font-size: 0.85em;">Searching...</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="panel"> |
| <div class="panel-header">Head Orientation</div> |
| <div class="panel-content"> |
| <div class="slider-row"> |
| <span class="slider-label">Roll</span> |
| <input type="range" class="slider" id="rollSlider" min="-20" max="20" value="0" step="0.5"> |
| <span class="slider-value" id="rollValue">0.0°</span> |
| </div> |
| <div class="slider-row"> |
| <span class="slider-label">Pitch</span> |
| <input type="range" class="slider" id="pitchSlider" min="-30" max="30" value="0" step="0.5"> |
| <span class="slider-value" id="pitchValue">0.0°</span> |
| </div> |
| <div class="slider-row"> |
| <span class="slider-label">Yaw</span> |
| <input type="range" class="slider" id="yawSlider" min="-45" max="45" value="0" step="0.5"> |
| <span class="slider-value" id="yawValue">0.0°</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="panel"> |
| <div class="panel-header">Antennas</div> |
| <div class="panel-content"> |
| <div class="slider-row"> |
| <span class="slider-label">Right</span> |
| <input type="range" class="slider" id="rightAntSlider" min="-175" max="175" value="0"> |
| <span class="slider-value" id="rightAntValue">0°</span> |
| </div> |
| <div class="slider-row"> |
| <span class="slider-label">Left</span> |
| <input type="range" class="slider" id="leftAntSlider" min="-175" max="175" value="0"> |
| <span class="slider-value" id="leftAntValue">0°</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="panel"> |
| <div class="panel-header">Sound</div> |
| <div class="panel-content"> |
| <div class="sound-row"> |
| <input type="text" class="sound-input" id="soundInput" placeholder="Sound file..."> |
| <button class="btn btn-primary" id="btnPlaySound" onclick="playSound()" disabled>Play</button> |
| </div> |
| <div class="sound-presets"> |
| <span class="preset-chip" onclick="playSoundPreset('wake_up.wav')">wake_up</span> |
| <span class="preset-chip" onclick="playSoundPreset('go_sleep.wav')">go_sleep</span> |
| <span class="preset-chip" onclick="playSoundPreset('yes.wav')">yes</span> |
| <span class="preset-chip" onclick="playSoundPreset('no.wav')">no</span> |
| </div> |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
|
|
| <script type="module"> |
| import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.15.2/+esm"; |
| |
| const SIGNALING_SERVER = 'https://cduss-reachy-mini-central.hf.space'; |
| |
| |
| let peerConnection = null; |
| let dataChannel = null; |
| let selectedProducerId = null; |
| let myPeerId = null; |
| let currentSessionId = null; |
| let userToken = null; |
| let currentUser = null; |
| let sseAbortController = null; |
| let stateRefreshInterval = null; |
| |
| |
| let headSlidersActive = false; |
| |
| |
| let latencyMonitorId = null; |
| |
| |
| let isMuted = true; |
| |
| |
| window.loginToHuggingFace = loginToHuggingFace; |
| window.logout = logout; |
| window.connectSignaling = connectSignaling; |
| window.startStream = startStream; |
| window.stopStream = stopStream; |
| window.playSound = playSound; |
| window.playSoundPreset = playSoundPreset; |
| window.toggleMute = toggleMute; |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| initAuth(); |
| initHeadSliders(); |
| initAntennaSliders(); |
| }); |
| |
| |
| async function initAuth() { |
| try { |
| const oauthResult = await oauthHandleRedirectIfPresent(); |
| if (oauthResult) { |
| currentUser = oauthResult.userInfo.name || oauthResult.userInfo.preferred_username; |
| userToken = oauthResult.accessToken; |
| sessionStorage.setItem('hf_token', userToken); |
| sessionStorage.setItem('hf_username', currentUser); |
| sessionStorage.setItem('hf_token_expires', oauthResult.accessTokenExpiresAt); |
| showMainApp(); |
| } else { |
| const storedToken = sessionStorage.getItem('hf_token'); |
| const storedUser = sessionStorage.getItem('hf_username'); |
| const expires = sessionStorage.getItem('hf_token_expires'); |
| if (storedToken && storedUser && expires && new Date(expires) > new Date()) { |
| userToken = storedToken; |
| currentUser = storedUser; |
| showMainApp(); |
| } else { |
| showLogin(); |
| } |
| } |
| } catch (e) { |
| console.error('Auth error:', e); |
| showLogin(); |
| } |
| } |
| |
| async function loginToHuggingFace() { |
| window.location.href = await oauthLoginUrl(); |
| } |
| |
| function logout() { |
| sessionStorage.clear(); |
| userToken = null; |
| currentUser = null; |
| disconnectAll(); |
| showLogin(); |
| } |
| |
| function showLogin() { |
| document.getElementById('loginView').classList.remove('hidden'); |
| document.getElementById('mainApp').classList.add('hidden'); |
| } |
| |
| function showMainApp() { |
| document.getElementById('loginView').classList.add('hidden'); |
| document.getElementById('mainApp').classList.remove('hidden'); |
| document.getElementById('username').textContent = '@' + currentUser; |
| } |
| |
| |
| function updateStatus(status, text) { |
| document.getElementById('statusIndicator').className = 'status-indicator ' + status; |
| document.getElementById('statusText').textContent = text; |
| } |
| |
| async function sendToServer(message) { |
| try { |
| const res = await fetch(`${SIGNALING_SERVER}/send?token=${encodeURIComponent(userToken)}`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify(message) |
| }); |
| return await res.json(); |
| } catch (e) { |
| console.error('Send error:', e); |
| return null; |
| } |
| } |
| |
| function sendCommand(cmd) { |
| if (!dataChannel || dataChannel.readyState !== 'open') return false; |
| dataChannel.send(JSON.stringify(cmd)); |
| return true; |
| } |
| |
| async function connectSignaling() { |
| if (!userToken) return; |
| updateStatus('connecting', 'Connecting...'); |
| document.getElementById('connectBtn').disabled = true; |
| sseAbortController = new AbortController(); |
| |
| try { |
| const res = await fetch(`${SIGNALING_SERVER}/events?token=${encodeURIComponent(userToken)}`, { |
| signal: sseAbortController.signal |
| }); |
| if (!res.ok) throw new Error(`HTTP ${res.status}`); |
| |
| updateStatus('connected', 'Connected'); |
| document.getElementById('robotSelector').classList.remove('hidden'); |
| |
| const reader = res.body.getReader(); |
| const decoder = new TextDecoder(); |
| let buffer = ''; |
| |
| while (true) { |
| const { done, value } = await reader.read(); |
| if (done) break; |
| buffer += decoder.decode(value, { stream: true }); |
| const lines = buffer.split('\n'); |
| buffer = lines.pop(); |
| for (const line of lines) { |
| if (line.startsWith('data:')) { |
| try { handleSignalingMessage(JSON.parse(line.slice(5).trim())); } catch (e) {} |
| } |
| } |
| } |
| } catch (e) { |
| if (e.name !== 'AbortError') console.error('Connection failed:', e); |
| updateStatus('', 'Disconnected'); |
| document.getElementById('connectBtn').disabled = false; |
| document.getElementById('robotSelector').classList.add('hidden'); |
| } |
| } |
| |
| function disconnectAll() { |
| if (sseAbortController) sseAbortController.abort(); |
| stopStream(); |
| document.getElementById('connectBtn').disabled = false; |
| } |
| |
| async function handleSignalingMessage(msg) { |
| switch (msg.type) { |
| case 'welcome': |
| myPeerId = msg.peerId; |
| await sendToServer({ type: 'setPeerStatus', roles: ['listener'], meta: { name: 'Telepresence' } }); |
| break; |
| case 'list': |
| displayRobots(msg.producers); |
| break; |
| case 'peerStatusChanged': |
| const list = await sendToServer({ type: 'list' }); |
| if (list?.producers) displayRobots(list.producers); |
| break; |
| case 'sessionStarted': |
| currentSessionId = msg.sessionId; |
| break; |
| case 'peer': |
| handlePeerMessage(msg); |
| break; |
| } |
| } |
| |
| function displayRobots(robots) { |
| const list = document.getElementById('robotList'); |
| list.innerHTML = ''; |
| if (!robots?.length) { |
| list.innerHTML = '<div style="color: var(--text-muted);">No robots online</div>'; |
| document.getElementById('startBtn').disabled = true; |
| return; |
| } |
| for (const robot of robots) { |
| const div = document.createElement('div'); |
| div.className = 'robot-card' + (robot.id === selectedProducerId ? ' selected' : ''); |
| div.innerHTML = `<div class="name">${robot.meta?.name || 'Reachy Mini'}</div><div class="id">${robot.id.slice(0, 12)}...</div>`; |
| div.onclick = () => { |
| document.querySelectorAll('.robot-card').forEach(e => e.classList.remove('selected')); |
| div.classList.add('selected'); |
| selectedProducerId = robot.id; |
| document.getElementById('robotName').textContent = robot.meta?.name || 'Reachy Mini'; |
| document.getElementById('startBtn').disabled = false; |
| }; |
| list.appendChild(div); |
| } |
| } |
| |
| |
| async function startStream() { |
| if (!selectedProducerId) return; |
| updateStatus('connecting', 'Connecting...'); |
| |
| |
| const video = document.getElementById('remoteVideo'); |
| video.muted = true; |
| isMuted = true; |
| updateMuteButton(); |
| |
| peerConnection = new RTCPeerConnection({ |
| iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] |
| }); |
| |
| peerConnection.ontrack = (e) => { |
| if (e.track.kind === 'video') { |
| const video = document.getElementById('remoteVideo'); |
| video.srcObject = e.streams[0]; |
| video.playsInline = true; |
| if ('requestVideoFrameCallback' in video) { |
| startLatencyMonitor(video); |
| } |
| } |
| }; |
| |
| peerConnection.onicecandidate = async (e) => { |
| if (e.candidate && currentSessionId) { |
| await sendToServer({ |
| type: 'peer', |
| sessionId: currentSessionId, |
| ice: { candidate: e.candidate.candidate, sdpMLineIndex: e.candidate.sdpMLineIndex, sdpMid: e.candidate.sdpMid } |
| }); |
| } |
| }; |
| |
| peerConnection.oniceconnectionstatechange = () => { |
| const state = peerConnection.iceConnectionState; |
| if (state === 'connected' || state === 'completed') { |
| updateStatus('connected', 'Connected'); |
| enableControls(true); |
| document.getElementById('robotSelector').classList.add('hidden'); |
| stateRefreshInterval = setInterval(() => sendCommand({ get_state: true }), 500); |
| } else if (state === 'failed' || state === 'disconnected') { |
| updateStatus('', 'Connection lost'); |
| } |
| }; |
| |
| peerConnection.ondatachannel = (e) => { |
| dataChannel = e.channel; |
| dataChannel.onopen = () => sendCommand({ get_state: true }); |
| dataChannel.onmessage = (e) => handleRobotMessage(JSON.parse(e.data)); |
| }; |
| |
| document.getElementById('startBtn').disabled = true; |
| document.getElementById('stopBtn').disabled = false; |
| |
| const res = await sendToServer({ type: 'startSession', peerId: selectedProducerId }); |
| if (res?.sessionId) currentSessionId = res.sessionId; |
| } |
| |
| 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); |
| await sendToServer({ type: 'peer', sessionId: currentSessionId, sdp: { type: 'answer', sdp: answer.sdp } }); |
| } |
| } |
| if (msg.ice) { |
| await peerConnection.addIceCandidate(new RTCIceCandidate(msg.ice)); |
| } |
| } catch (e) { |
| console.error('WebRTC error:', e); |
| } |
| } |
| |
| |
| function startLatencyMonitor(video) { |
| if (latencyMonitorId) clearInterval(latencyMonitorId); |
| |
| latencyMonitorId = setInterval(() => { |
| if (!video.srcObject || video.paused) return; |
| |
| const buffered = video.buffered; |
| if (buffered.length > 0) { |
| const bufferedEnd = buffered.end(buffered.length - 1); |
| const lag = bufferedEnd - video.currentTime; |
| |
| |
| if (lag > 0.5) { |
| console.log(`Latency correction: was ${lag.toFixed(2)}s behind`); |
| video.currentTime = bufferedEnd - 0.1; |
| } |
| } |
| }, 2000); |
| } |
| |
| async function stopStream() { |
| if (latencyMonitorId) clearInterval(latencyMonitorId); |
| if (stateRefreshInterval) clearInterval(stateRefreshInterval); |
| |
| |
| if (currentSessionId) { |
| await sendToServer({ type: 'endSession', sessionId: currentSessionId }); |
| } |
| |
| if (peerConnection) peerConnection.close(); |
| if (dataChannel) dataChannel.close(); |
| |
| peerConnection = null; |
| dataChannel = null; |
| currentSessionId = null; |
| document.getElementById('remoteVideo').srcObject = null; |
| document.getElementById('startBtn').disabled = !selectedProducerId; |
| document.getElementById('stopBtn').disabled = true; |
| document.getElementById('robotSelector').classList.remove('hidden'); |
| enableControls(false); |
| updateStatus('connected', 'Connected'); |
| } |
| |
| function enableControls(enabled) { |
| document.getElementById('btnPlaySound').disabled = !enabled; |
| document.getElementById('muteBtn').disabled = !enabled; |
| } |
| |
| function toggleMute() { |
| isMuted = !isMuted; |
| document.getElementById('remoteVideo').muted = isMuted; |
| updateMuteButton(); |
| } |
| |
| function updateMuteButton() { |
| const btn = document.getElementById('muteBtn'); |
| const speakerOffIcon = document.getElementById('speakerOffIcon'); |
| const speakerOnIcon = document.getElementById('speakerOnIcon'); |
| const muteText = document.getElementById('muteText'); |
| |
| if (isMuted) { |
| btn.classList.add('muted'); |
| speakerOffIcon.classList.remove('hidden'); |
| speakerOnIcon.classList.add('hidden'); |
| muteText.textContent = 'Unmute'; |
| } else { |
| btn.classList.remove('muted'); |
| speakerOffIcon.classList.add('hidden'); |
| speakerOnIcon.classList.remove('hidden'); |
| muteText.textContent = 'Mute'; |
| } |
| } |
| |
| |
| function handleRobotMessage(data) { |
| if (data.state) updateStateDisplay(data.state); |
| if (data.error) console.error('Robot error:', data.error); |
| } |
| |
| function updateStateDisplay(state) { |
| if (state.head_pose) { |
| const m = state.head_pose; |
| const pitch = Math.asin(-m[2][0]) * 180 / Math.PI; |
| const yaw = Math.atan2(m[1][0], m[0][0]) * 180 / Math.PI; |
| const roll = Math.atan2(m[2][1], m[2][2]) * 180 / Math.PI; |
| |
| |
| if (!headSlidersActive) { |
| document.getElementById('rollSlider').value = roll; |
| document.getElementById('rollValue').textContent = roll.toFixed(1) + '°'; |
| document.getElementById('pitchSlider').value = pitch; |
| document.getElementById('pitchValue').textContent = pitch.toFixed(1) + '°'; |
| document.getElementById('yawSlider').value = yaw; |
| document.getElementById('yawValue').textContent = yaw.toFixed(1) + '°'; |
| } |
| } |
| if (state.antennas) { |
| const r = (state.antennas[0] * 180 / Math.PI).toFixed(0); |
| const l = (state.antennas[1] * 180 / Math.PI).toFixed(0); |
| document.getElementById('rightAntSlider').value = r; |
| document.getElementById('rightAntValue').textContent = r + '°'; |
| document.getElementById('leftAntSlider').value = l; |
| document.getElementById('leftAntValue').textContent = l + '°'; |
| } |
| } |
| |
| |
| function initHeadSliders() { |
| const rollSlider = document.getElementById('rollSlider'); |
| const pitchSlider = document.getElementById('pitchSlider'); |
| const yawSlider = document.getElementById('yawSlider'); |
| const rollValue = document.getElementById('rollValue'); |
| const pitchValue = document.getElementById('pitchValue'); |
| const yawValue = document.getElementById('yawValue'); |
| |
| function sendHeadPose() { |
| const roll = parseFloat(rollSlider.value); |
| const pitch = parseFloat(pitchSlider.value); |
| const yaw = parseFloat(yawSlider.value); |
| sendCommand({ set_target: buildMatrix(yaw, pitch, roll) }); |
| } |
| |
| function onSliderStart() { |
| headSlidersActive = true; |
| } |
| |
| function onSliderEnd() { |
| headSlidersActive = false; |
| } |
| |
| |
| rollSlider.addEventListener('mousedown', onSliderStart); |
| rollSlider.addEventListener('touchstart', onSliderStart); |
| rollSlider.addEventListener('mouseup', onSliderEnd); |
| rollSlider.addEventListener('touchend', onSliderEnd); |
| rollSlider.addEventListener('input', () => { |
| rollValue.textContent = parseFloat(rollSlider.value).toFixed(1) + '°'; |
| sendHeadPose(); |
| }); |
| |
| |
| pitchSlider.addEventListener('mousedown', onSliderStart); |
| pitchSlider.addEventListener('touchstart', onSliderStart); |
| pitchSlider.addEventListener('mouseup', onSliderEnd); |
| pitchSlider.addEventListener('touchend', onSliderEnd); |
| pitchSlider.addEventListener('input', () => { |
| pitchValue.textContent = parseFloat(pitchSlider.value).toFixed(1) + '°'; |
| sendHeadPose(); |
| }); |
| |
| |
| yawSlider.addEventListener('mousedown', onSliderStart); |
| yawSlider.addEventListener('touchstart', onSliderStart); |
| yawSlider.addEventListener('mouseup', onSliderEnd); |
| yawSlider.addEventListener('touchend', onSliderEnd); |
| yawSlider.addEventListener('input', () => { |
| yawValue.textContent = parseFloat(yawSlider.value).toFixed(1) + '°'; |
| sendHeadPose(); |
| }); |
| } |
| |
| function buildMatrix(yawDeg, pitchDeg, rollDeg) { |
| const y = yawDeg * Math.PI / 180; |
| const p = pitchDeg * Math.PI / 180; |
| const r = rollDeg * Math.PI / 180; |
| const cy = Math.cos(y), sy = Math.sin(y); |
| const cp = Math.cos(p), sp = Math.sin(p); |
| const cr = Math.cos(r), sr = Math.sin(r); |
| return [ |
| [cy * cp, cy * sp * sr - sy * cr, cy * sp * cr + sy * sr, 0], |
| [sy * cp, sy * sp * sr + cy * cr, sy * sp * cr - cy * sr, 0], |
| [-sp, cp * sr, cp * cr, 0], |
| [0, 0, 0, 1] |
| ]; |
| } |
| |
| |
| function initAntennaSliders() { |
| const rightSlider = document.getElementById('rightAntSlider'); |
| const leftSlider = document.getElementById('leftAntSlider'); |
| const rightValue = document.getElementById('rightAntValue'); |
| const leftValue = document.getElementById('leftAntValue'); |
| |
| function sendAntennas() { |
| const r = parseFloat(rightSlider.value) * Math.PI / 180; |
| const l = parseFloat(leftSlider.value) * Math.PI / 180; |
| sendCommand({ set_antennas: [r, l] }); |
| } |
| |
| rightSlider.addEventListener('input', () => { |
| rightValue.textContent = rightSlider.value + '°'; |
| sendAntennas(); |
| }); |
| |
| leftSlider.addEventListener('input', () => { |
| leftValue.textContent = leftSlider.value + '°'; |
| sendAntennas(); |
| }); |
| } |
| |
| |
| function playSound() { |
| const file = document.getElementById('soundInput').value.trim(); |
| if (file) sendCommand({ play_sound: file }); |
| } |
| |
| function playSoundPreset(file) { |
| document.getElementById('soundInput').value = file; |
| sendCommand({ play_sound: file }); |
| } |
| </script> |
| </body> |
| </html> |
|
|
