test latency

index.html

@@ -41,7 +41,7 @@
         <div class="app-container">
             <!-- Video -->
             <div class="video-container">
-                <video id="remoteVideo" autoplay playsinline></video>
+                <video id="remoteVideo" autoplay playsinline muted></video>
 
                 <div class="video-overlay-top">
                     <div class="connection-badge">
@@ -49,6 +49,9 @@
                         <span id="statusText">Disconnected</span>
                     </div>
                     <div class="robot-name" id="robotName"></div>
+                    <div class="latency-badge hidden" id="latencyBadge">
+                        <span id="latencyValue">--</span>
+                    </div>
                 </div>
 
                 <div class="video-overlay-bottom">
@@ -159,13 +162,14 @@
     </div>
 
     <script type="module">
-        import { ReachyMini } from "https://cdn.jsdelivr.net/gh/pollen-robotics/reachy_mini@develop/js/reachy-mini.js";
+        import { ReachyMini } from "https://cdn.jsdelivr.net/gh/pollen-robotics/reachy_mini@invest-latency/js/reachy-mini.js";
 
         const robot = new ReachyMini();
 
         let selectedRobotId = null;
         let headSlidersActive = false;
         let detachVideo = null;
+        let latencyIntervalId = null;
 
         // Export functions for inline onclick handlers
         window.loginToHuggingFace = () => robot.login();
@@ -214,6 +218,7 @@
                 updateStatus('connected', 'Connected');
                 enableControls(true);
                 document.getElementById('robotSelector').classList.add('hidden');
+                startLatencyDisplay();
             });
 
             robot.addEventListener('sessionStopped', () => {
@@ -223,6 +228,7 @@
                 enableControls(false);
                 updateStatus('connected', 'Connected');
                 updateMicButton();
+                stopLatencyDisplay();
             });
 
             robot.addEventListener('state', (e) => updateStateDisplay(e.detail));
@@ -289,6 +295,65 @@
             }
         }
 
+        // ===================== Latency =====================
+        function startLatencyDisplay() {
+            const badge = document.getElementById('latencyBadge');
+            const label = document.getElementById('latencyValue');
+            badge.classList.remove('hidden');
+
+            latencyIntervalId = setInterval(async () => {
+                const video = document.getElementById('remoteVideo');
+                let bufLagMs = null;
+                let rttMs = null;
+                let jitterMs = null;
+
+                // Buffer lag (how far behind live edge)
+                if (video && video.buffered && video.buffered.length > 0) {
+                    const end = video.buffered.end(video.buffered.length - 1);
+                    bufLagMs = Math.round((end - video.currentTime) * 1000);
+                }
+
+                // WebRTC stats: RTT + jitter buffer delay
+                if (robot._pc) {
+                    try {
+                        const stats = await robot._pc.getStats();
+                        stats.forEach(report => {
+                            if (report.type === 'candidate-pair' && report.currentRoundTripTime != null) {
+                                rttMs = Math.round(report.currentRoundTripTime * 1000);
+                            }
+                            if (report.type === 'inbound-rtp' && report.kind === 'video') {
+                                if (report.jitterBufferDelay != null && report.jitterBufferEmittedCount > 0) {
+                                    jitterMs = Math.round((report.jitterBufferDelay / report.jitterBufferEmittedCount) * 1000);
+                                }
+                            }
+                        });
+                    } catch (_) { /* no stats yet */ }
+                }
+
+                // Display
+                const parts = [];
+                if (bufLagMs != null) parts.push(`buf ${bufLagMs}ms`);
+                if (rttMs != null) parts.push(`rtt ${rttMs}ms`);
+                if (jitterMs != null) parts.push(`jit ${jitterMs}ms`);
+                label.textContent = parts.length ? parts.join(' · ') : '--';
+
+                // Color based on buffer lag
+                badge.classList.remove('good', 'ok', 'bad');
+                if (bufLagMs != null) {
+                    if (bufLagMs < 200) badge.classList.add('good');
+                    else if (bufLagMs < 500) badge.classList.add('ok');
+                    else badge.classList.add('bad');
+                }
+            }, 1000);
+        }
+
+        function stopLatencyDisplay() {
+            if (latencyIntervalId) { clearInterval(latencyIntervalId); latencyIntervalId = null; }
+            const badge = document.getElementById('latencyBadge');
+            badge.classList.add('hidden');
+            badge.classList.remove('good', 'ok', 'bad');
+        }
+
         // ===================== Session =====================
         async function startStream() {
             if (!selectedRobotId) return;

style.css

@@ -132,6 +132,22 @@ video {
     font-size: 0.8em;
 }
 
+.latency-badge {
+    display: flex;
+    align-items: center;
+    background: rgba(0,0,0,0.5);
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 0.75em;
+    font-variant-numeric: tabular-nums;
+    color: var(--text-secondary);
+    font-family: 'Inter', monospace;
+}
+
+.latency-badge.good { color: var(--success); }
+.latency-badge.ok { color: var(--warning); }
+.latency-badge.bad { color: var(--danger); }
+
 .status-indicator {
     width: 8px;
     height: 8px;