pass 1

webui/src/components/DriverVideoPanel.jsx

@@ -5,6 +5,7 @@ import { useVideoRequests } from '../hooks/useVideoRequests.js';
 import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
 import { useControlSystem } from '../controls/index.js';
 import VideoTile from './VideoTile.jsx';
+import { supportsAv1WebRtc } from '../lib/mediaSupport.js';
 
 export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
   const { session } = useSession();
@@ -23,6 +24,7 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
     return () => clearInterval(timer);
   }, [session?.mode]);
   const roverId = session?.assignment?.roverId;
+  const av1Supported = supportsAv1WebRtc();
   const rosterEntry =
     roverId && session?.roster ? session.roster.find((item) => String(item.id) === String(roverId)) : null;
   const hasAudio = Boolean(rosterEntry?.media?.audioPublishUrl);
@@ -69,6 +71,19 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
   const sources = useVideoRequests(entries);
   const info = roverId && shouldShowVideo ? sources[roverId] : null;
   const audioInfo = roverId && hasAudio ? sources[`${roverId}-audio`] : null;
+  const previewEntries = roverId
+    ? [
+        {
+          type: 'rover',
+          id: roverId,
+          key: `rover:${roverId}:preview:av1`,
+          preview: true,
+          codec: 'av1',
+        },
+      ]
+    : [];
+  const previewSources = useVideoRequests(previewEntries, { enabled: Boolean(roverId) && av1Supported });
+  const previewSession = roverId ? previewSources[`rover:${roverId}:preview:av1`] || null : null;
   const snapshotFeeds = useRoverSnapshots(roverId ? [roverId] : [], {
     enabled: Boolean(roverId),
     version: session?.mode,
@@ -114,8 +129,8 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
     <section className="panel">
       {roverId ? (
         <VideoTile
-          sessionInfo={info}
-          videoMode={shouldShowVideo ? 'whep' : 'snapshot'}
+          sessionInfo={shouldShowVideo ? info : previewSession?.url ? previewSession : null}
+          videoMode={shouldShowVideo ? 'whep' : previewSession?.url ? 'whep' : 'snapshot'}
           snapshotFeed={snapshotFeed}
           audioSessionInfo={audioInfo}
           label={roverLabel}
@@ -123,7 +138,13 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
           batteryConfig={batteryConfig}
           layoutFormat={layoutFormat}
           songNote={song?.note}
-          qualityNotice={!shouldShowVideo ? 'Preview feed (low FPS) until your turn.' : null}
+          qualityNotice={
+            !shouldShowVideo
+              ? previewSession?.url
+                ? 'Preview feed (AV1) until your turn.'
+                : 'Preview feed (snapshots) until your turn.'
+              : null
+          }
           showTurnCue={turnCueVisible}
           turnTimerText={turnTimerText}
           turnSeconds={turnSeconds}

webui/src/components/RoomCameraFeed.jsx

@@ -1,7 +1,74 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { WhepPlayer } from '../lib/whepPlayer.js';
 
-export default function RoomCameraFeed({ feed, label }) {
+function RoomCameraVideo({ sessionInfo, label, onStatus }) {
+  const videoRef = useRef(null);
+  const [status, setStatus] = useState('idle');
+  const [detail, setDetail] = useState(null);
+
+  useEffect(() => {
+    if (!sessionInfo?.url || !videoRef.current) return undefined;
+    let active = true;
+    let player;
+
+    const handleStatus = (nextStatus, info) => {
+      if (!active) return;
+      setStatus(nextStatus);
+      setDetail(info || null);
+      if (typeof onStatus === 'function') {
+        onStatus(nextStatus);
+      }
+    };
+
+    player = new WhepPlayer({
+      url: sessionInfo.url,
+      token: sessionInfo.token,
+      video: videoRef.current,
+      onStatus: handleStatus,
+    });
+
+    player.start().catch((err) => {
+      if (!active) return;
+      setStatus('error');
+      setDetail(err.message);
+      if (typeof onStatus === 'function') {
+        onStatus('error');
+      }
+    });
+
+    return () => {
+      active = false;
+      player?.stop();
+    };
+  }, [sessionInfo?.url, sessionInfo?.token, onStatus]);
+
+  return (
+    <div className="relative h-full w-full">
+      <video
+        ref={videoRef}
+        className="h-full w-full object-cover"
+        muted
+        playsInline
+        autoPlay
+        controls={false}
+        aria-label={label}
+      />
+      {status !== 'playing' && (
+        <div className="absolute inset-0 flex items-center justify-center text-sm text-slate-300">
+          {detail ? `Video error: ${detail}` : 'Connecting video…'}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function RoomCameraFeed({ feed, label, videoSession = null, preferVideo = false }) {
   const [blink, setBlink] = useState(false);
+  const [videoFailed, setVideoFailed] = useState(false);
+
+  useEffect(() => {
+    setVideoFailed(false);
+  }, [videoSession?.url, videoSession?.token]);
 
   useEffect(() => {
     if (!feed) return;
@@ -15,12 +82,27 @@ export default function RoomCameraFeed({ feed, label }) {
     return feed.status || 'Connecting…';
   }, [feed]);
 
+  const showVideo = Boolean(preferVideo && videoSession?.url && !videoFailed);
+  const showSnapshot = Boolean(!showVideo && feed?.objectUrl);
+
   return (
     <div className="relative w-full overflow-hidden rounded bg-black" style={{ aspectRatio: '4 / 3' }}>
-      {feed?.objectUrl ? (
+      {showVideo ? (
+        <RoomCameraVideo
+          sessionInfo={videoSession}
+          label={label}
+          onStatus={(nextStatus) => {
+            if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
+              setVideoFailed(true);
+            }
+          }}
+        />
+      ) : showSnapshot ? (
         <img src={feed.objectUrl} alt={label} className="h-full w-full object-cover" />
       ) : (
-        <div className="flex h-full w-full items-center justify-center text-sm text-slate-300">Waiting for frame…</div>
+        <div className="flex h-full w-full items-center justify-center text-sm text-slate-300">
+          {preferVideo ? 'Waiting for video…' : 'Waiting for frame…'}
+        </div>
       )}
       <div className="pointer-events-none absolute left-0 top-0 bg-black/70 px-0.5 py-0.5 text-xs font-semibold text-white">
         {label}

webui/src/components/RoomCameraPanel.jsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
 import { useSettingsNamespace } from '../settings/index.js';
 import { useRoomCameraSnapshots } from '../hooks/useRoomCameraSnapshots.js';
+import { useVideoRequests } from '../hooks/useVideoRequests.js';
+import { supportsAv1WebRtc } from '../lib/mediaSupport.js';
 import RoomCameraFeed from './RoomCameraFeed.jsx';
 
 function EmptyState() {
@@ -32,6 +34,15 @@ export default function RoomCameraPanel({
   const { session } = useSession();
   const cameras = session?.roomCameras || [];
   const feedMap = useRoomCameraSnapshots(cameras.map((camera) => ({ id: camera.id })));
+  const av1Supported = supportsAv1WebRtc();
+  const previewEntries = cameras.map((camera) => ({
+    type: 'room',
+    id: camera.id,
+    key: `room:${camera.id}:preview:av1`,
+    preview: true,
+    codec: 'av1',
+  }));
+  const previewSources = useVideoRequests(previewEntries, { enabled: av1Supported });
   const { value: orientationSettings, save: saveOrientationSettings } = useSettingsNamespace('roomCameraPanels', {});
   const [orientation, setOrientation] = useState(() =>
     normalizeOrientation(
@@ -96,13 +107,19 @@ export default function RoomCameraPanel({
       <div className={containerClass}>
         {cameras.map((camera) => {
           const feed = feedMap[camera.id] || null;
+          const previewSession = previewSources[`room:${camera.id}:preview:av1`] || null;
           return (
             <article key={camera.id} className="w-full space-y-0.5 rounded bg-zinc-950 p-0.5 shadow-inner shadow-black/40">
               {/* <header className="space-y-0.5">
                 <p className="text-lg font-semibold text-white">{camera.name || camera.id}</p>
                 {camera.description && <p className="text-xs text-slate-500">{camera.description}</p>}
               </header> */}
-              <RoomCameraFeed feed={feed} label={camera.name || camera.id} />
+              <RoomCameraFeed
+                feed={feed}
+                label={camera.name || camera.id}
+                videoSession={previewSession}
+                preferVideo={av1Supported}
+              />
             </article>
           );
         })}