i give up lol

oops forgot to build UI
pass 2
2026-09-16 09:31:20 -04:00 · 2026-01-17 20:35:03 -05:00 · 2026-01-17 20:29:41 -05:00 · 2026-01-17 20:28:16 -05:00 · 2026-01-17 19:32:36 -05:00
16 changed files with 673 additions and 164 deletions
@@ -13,6 +13,15 @@ media:
  #   http://<base>/<roverId>/whep
  # Example: http://192.168.0.86:8889/video
  whepBaseUrl: "http://192.168.0.86:8889/video"
+  preview:
+    enabled: false
+    codec: "av1"
+    transport: "rtsp"
+    fps: 10
+    width: 640
+    roomBitrateKbps: 200
+    roverBitrateKbps: 350
+    gopSeconds: 2

 homeAssistant:
  url: "http://homeassistant.local:8123"
@@ -30,5 +30,6 @@ require('./src/services/sessionService');
 require('./src/services/batteryManager');
 require('./src/services/replaySocketService');
 require('./src/services/replaySegmentManager');
+require('./src/services/media/previewTranscoderService');
 require('./src/services/discordBotService');
 require('./src/services/httpServer');
@@ -8,7 +8,7 @@ metricsAddress: 0.0.0.0:9998
 pprof: no
 pprofAddress: 127.0.0.1:9999

-rtsp: no
+rtsp: yes
 rtmp: no
 hls: no

@@ -11,7 +11,7 @@
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
    <title>Multi Roomba Rover</title>
-    <script type="module" crossorigin src="/assets/index-BosVsfhJ.js"></script>
+    <script type="module" crossorigin src="/assets/index-B7raLs13.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-Fk2eqSbH.css">
  </head>
  <body>
@@ -0,0 +1,255 @@
+const { spawn } = require('child_process');
+const EventEmitter = require('events');
+const logger = require('../../globals/logger').child('previewTranscoder');
+const { loadConfig } = require('../../helpers/configLoader');
+const roverManager = require('../roverManager');
+const { getRoomCameras, roomCameraEvents } = require('../roomCameraService');
+
+const events = new EventEmitter();
+const config = loadConfig();
+const mediaConfig = config.media || {};
+const previewConfig = mediaConfig.preview || {};
+
+const ENABLED = Boolean(previewConfig.enabled);
+const PREVIEW_CODEC = String(previewConfig.codec || 'av1').toLowerCase();
+const PREVIEW_TRANSPORT = String(previewConfig.transport || 'rtsp').toLowerCase();
+const PREVIEW_FPS = Number(previewConfig.fps || 10);
+const PREVIEW_WIDTH = Number(previewConfig.width || 640);
+const ROOM_BITRATE_KBPS = Number(previewConfig.roomBitrateKbps || 200);
+const ROVER_BITRATE_KBPS = Number(previewConfig.roverBitrateKbps || 350);
+const PRESET = Number.isFinite(previewConfig.preset) ? String(previewConfig.preset) : '8';
+const GOP_SECONDS = Number(previewConfig.gopSeconds || 2);
+const FFMPEG_BIN = previewConfig.ffmpegBin || process.env.FFMPEG_BIN || 'ffmpeg';
+
+const recorders = new Map(); // key -> { proc, source }
+let syncTimer = null;
+
+function encodeStreamId(streamId) {
+  return encodeURIComponent(streamId).replace(/%2F/g, '/');
+}
+
+function buildSrtReadUrl(streamId) {
+  return `srt://127.0.0.1:9000?streamid=read:${encodeStreamId(streamId)}`;
+}
+
+function buildSrtPublishUrl(streamId) {
+  const encoded = encodeStreamId(streamId);
+  return `srt://127.0.0.1:9000?streamid=#!::r=${encoded},m=publish&latency=10&mode=caller&transtype=live&pkt_size=1316`;
+}
+
+function buildRtspPublishUrl(streamId) {
+  return `rtsp://127.0.0.1:8554/${streamId}`;
+}
+
+function sanitizeCodec(codec) {
+  return String(codec || '').toLowerCase().replace(/[^a-z0-9]/g, '') || 'av1';
+}
+
+function buildPreviewId(id, codec) {
+  return `${id}-preview-${sanitizeCodec(codec)}`;
+}
+
+function getRoomCameraStream(camera) {
+  if (camera.streamUrl) return camera.streamUrl;
+  const url = String(camera.url || '');
+  if (url.includes('.mjpg') || url.includes('mjpeg') || url.includes('stream')) {
+    return url;
+  }
+  return null;
+}
+
+function listSources() {
+  const rooms = getRoomCameras()
+    .map((camera) => {
+      const streamUrl = getRoomCameraStream(camera);
+      if (!streamUrl) return null;
+      const id = String(camera.id);
+      return {
+        type: 'room',
+        id,
+        label: camera.name || id,
+        inputUrl: streamUrl,
+        outputId: `room/${buildPreviewId(id, PREVIEW_CODEC)}`,
+        bitrateKbps: ROOM_BITRATE_KBPS,
+      };
+    })
+    .filter(Boolean);
+  const rovers = roverManager.getRoster().map((rover) => {
+    const id = String(rover.id);
+    return {
+      type: 'rover',
+      id,
+      label: rover.name || id,
+      inputUrl: buildSrtReadUrl(id),
+      outputId: buildPreviewId(id, PREVIEW_CODEC),
+      bitrateKbps: ROVER_BITRATE_KBPS,
+    };
+  });
+  return [...rooms, ...rovers];
+}
+
+function buildKey(source) {
+  return `${source.type}:${source.id}:${source.outputId}`;
+}
+
+function buildArgs(source) {
+  const gop = Math.max(1, Math.round(GOP_SECONDS * PREVIEW_FPS));
+  const maxrate = Math.floor(source.bitrateKbps * 1.1);
+  const bufsize = Math.max(1, source.bitrateKbps * 2);
+  const codec = PREVIEW_CODEC === 'av1' ? 'libsvtav1' : 'libx264';
+  const extraCodecArgs =
+    codec === 'libx264'
+      ? ['-tune', 'zerolatency', '-profile:v', 'baseline', '-sc_threshold', '0']
+      : [];
+  const outputUrl =
+    PREVIEW_TRANSPORT === 'rtsp' ? buildRtspPublishUrl(source.outputId) : buildSrtPublishUrl(source.outputId);
+  const outputArgs =
+    PREVIEW_TRANSPORT === 'rtsp'
+      ? ['-f', 'rtsp', '-rtsp_transport', 'tcp']
+      : ['-f', 'mpegts'];
+  return {
+    outputUrl,
+    args: [
+      '-hide_banner',
+      '-loglevel',
+      'info',
+    '-fflags',
+    'nobuffer',
+    '-flags',
+    'low_delay',
+    '-i',
+    source.inputUrl,
+    '-an',
+    '-vf',
+    `fps=${PREVIEW_FPS},scale=${PREVIEW_WIDTH}:-1`,
+    '-c:v',
+    codec,
+    '-preset',
+    PRESET,
+    ...extraCodecArgs,
+    '-g',
+    String(gop),
+    '-keyint_min',
+    String(gop),
+    '-b:v',
+    `${source.bitrateKbps}k`,
+    '-maxrate',
+    `${maxrate}k`,
+    '-bufsize',
+    `${bufsize}k`,
+    '-pix_fmt',
+    'yuv420p',
+      ...outputArgs,
+      outputUrl,
+    ],
+  };
+}
+
+function spawnRecorder(source) {
+  const key = buildKey(source);
+  if (recorders.has(key)) return;
+  const { args, outputUrl } = buildArgs(source);
+  logger.info('Preview transcoder starting', {
+    key,
+    transport: PREVIEW_TRANSPORT,
+    codec: PREVIEW_CODEC,
+    inputUrl: source.inputUrl,
+    outputUrl,
+  });
+  const proc = spawn(FFMPEG_BIN, args, { stdio: ['ignore', 'ignore', 'pipe'] });
+  const stderrChunks = [];
+  let stderrSize = 0;
+  proc.stderr.on('data', (chunk) => {
+    if (!chunk || stderrSize > 8192) return;
+    stderrChunks.push(chunk);
+    stderrSize += chunk.length;
+  });
+  recorders.set(key, { proc, source });
+  proc.on('exit', (code, signal) => {
+    recorders.delete(key);
+    const stderrBuffer = stderrChunks.length ? Buffer.concat(stderrChunks) : null;
+    if (stderrBuffer && stderrBuffer.length) {
+      const preview = stderrBuffer.toString('utf8', 0, 600).trim();
+      logger.warn('Preview transcoder stderr', {
+        key,
+        stderrBytes: stderrBuffer.length,
+        stderrPreview: preview || '<non-utf8>',
+      });
+    } else {
+      logger.warn('Preview transcoder stderr', { key, stderrBytes: 0 });
+    }
+    if (!ENABLED) return;
+    const delay = 2000;
+    logger.warn('Preview transcoder exited; restarting', { key, code, signal });
+    setTimeout(() => {
+      if (!recorders.has(key) && ENABLED) {
+        spawnRecorder(source);
+      }
+    }, delay);
+  });
+  events.emit('spawn', { key, source });
+}
+
+function stopRecorder(key) {
+  const entry = recorders.get(key);
+  if (!entry) return;
+  entry.proc.kill('SIGTERM');
+  recorders.delete(key);
+  events.emit('stop', { key, source: entry.source });
+}
+
+function syncRecorders() {
+  const sources = listSources();
+  const desiredKeys = new Set();
+  sources.forEach((source) => {
+    const key = buildKey(source);
+    desiredKeys.add(key);
+    if (!recorders.has(key)) {
+      spawnRecorder(source);
+    }
+  });
+  Array.from(recorders.keys()).forEach((key) => {
+    if (!desiredKeys.has(key)) {
+      stopRecorder(key);
+    }
+  });
+  logger.info('Preview transcoders synced', { total: desiredKeys.size });
+}
+
+function start() {
+  if (!ENABLED) {
+    logger.info('Preview transcoders disabled');
+    return;
+  }
+  syncRecorders();
+  if (!syncTimer) {
+    syncTimer = setInterval(syncRecorders, 10000);
+  }
+}
+
+function stop() {
+  if (syncTimer) {
+    clearInterval(syncTimer);
+    syncTimer = null;
+  }
+  Array.from(recorders.keys()).forEach((key) => stopRecorder(key));
+}
+
+roverManager.managerEvents.on('rover', () => {
+  if (ENABLED) {
+    syncRecorders();
+  }
+});
+roomCameraEvents.on('update', () => {
+  if (ENABLED) {
+    syncRecorders();
+  }
+});
+
+start();
+
+module.exports = {
+  previewEvents: events,
+  syncPreviewTranscoders: syncRecorders,
+  stopPreviewTranscoders: stop,
+};
@@ -46,7 +46,11 @@ function extractStreamInfo(path) {
  const remaining = segments.slice(start, end);
  if (remaining.length === 1) {
    const rawId = remaining[0] || '';
-    const baseId = rawId.endsWith('-audio') ? rawId.slice(0, -6) : rawId;
+    let baseId = rawId.endsWith('-audio') ? rawId.slice(0, -6) : rawId;
+    const previewMatch = baseId.match(/^(.*)-preview-[a-z0-9]+$/);
+    if (previewMatch) {
+      baseId = previewMatch[1];
+    }
    return { type: 'rover', id: rawId, baseId };
  }
  if (remaining.length === 2 && remaining[0] === 'room') {
@@ -4,6 +4,7 @@ const { getMode, MODES } = require('./modeManager');
 const { isAdmin, isLockdownAdmin, getRole } = require('./roleService');
 const videoSessions = require('./videoSessions');
 const roverManager = require('./roverManager');
+const { getRoomCamera } = require('./roomCameraService');
 const { loadConfig } = require('../helpers/configLoader');

 const config = loadConfig();
@@ -36,6 +37,17 @@ function buildWhepUrlForSource(source) {
  return `${cleanBase}/${segments.join('/')}/whep`;
 }

+function sanitizeCodec(codec) {
+  return String(codec || '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, '');
+}
+
+function buildPreviewId(id, codec) {
+  const cleanCodec = sanitizeCodec(codec) || 'av1';
+  return `${id}-preview-${cleanCodec}`;
+}
+
 function passesMode(socket) {
  const mode = getMode();
  if (mode === MODES.LOCKDOWN) {
@@ -65,14 +77,21 @@ function canViewRoomCamera(socket) {

 function normalizeRequest(payload = {}) {
  if (!payload) return null;
+  const preview = Boolean(payload.preview || payload.mode === 'preview');
+  const codec = payload.codec ? String(payload.codec) : null;
  if (payload.type && payload.id) {
-    return { type: payload.type, id: String(payload.id) };
+    return {
+      type: payload.type,
+      id: String(payload.id),
+      preview,
+      codec,
+    };
  }
  if (payload.roverId) {
-    return { type: 'rover', id: String(payload.roverId) };
+    return { type: 'rover', id: String(payload.roverId), preview, codec };
  }
  if (payload.roomCameraId) {
-    return { type: 'room', id: String(payload.roomCameraId) };
+    return { type: 'room', id: String(payload.roomCameraId), preview, codec };
  }
  return null;
 }
@@ -93,16 +112,30 @@ io.on('connection', (socket) => {
          throw new Error('Not authorized for video');
        }
      } else if (target.type === 'room') {
-        throw new Error('Room cameras now use the snapshot feed');
+        if (!target.preview) {
+          throw new Error('Room cameras now use the snapshot feed');
+        }
+        if (!getRoomCamera(target.id)) {
+          throw new Error('Room camera not found');
+        }
      } else {
        throw new Error('Unsupported video source');
      }
-      const url = buildWhepUrlForSource(target);
+      const requestId = target.preview ? buildPreviewId(target.id, target.codec) : target.id;
+      const requestTarget = { ...target, id: requestId };
+      const url = buildWhepUrlForSource(requestTarget);
      if (!url) {
        throw new Error('Server video base URL missing');
      }
-      const sessionId = videoSessions.createSession(socket, target);
-      cb({ url, token: sessionId, type: target.type, id: target.id });
+      const sessionId = videoSessions.createSession(socket, requestTarget);
+      cb({
+        url,
+        token: sessionId,
+        type: requestTarget.type,
+        id: requestTarget.id,
+        preview: Boolean(target.preview),
+        codec: target.codec || null,
+      });
    } catch (err) {
      logger.warn('video request failed: %s', err.message);
      cb({ error: err.message });
@@ -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();
@@ -69,6 +70,20 @@ 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 av1Supported = supportsAv1WebRtc();
+  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}
@@ -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}
@@ -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={Boolean(previewSession?.url)}
+              />
            </article>
          );
        })}
@@ -11,23 +11,42 @@ function normalizeEntry(entry) {
  if (typeof entry === 'object') {
    if (entry.type && entry.id) {
      const id = String(entry.id);
+      const preview = Boolean(entry.preview);
+      const codec = entry.codec ? String(entry.codec) : null;
      let key = entry.key;
      if (!key) {
        key = entry.type === 'room' ? `room:${id}` : id;
+        if (preview) {
+          key = `${key}:preview${codec ? `:${codec}` : ''}`;
+        }
      }
      return {
        type: entry.type,
        id,
        key,
+        preview,
+        codec,
      };
    }
    if (entry.roverId) {
      const id = String(entry.roverId);
-      return { type: 'rover', id, key: entry.key || id };
+      return {
+        type: 'rover',
+        id,
+        key: entry.key || id,
+        preview: Boolean(entry.preview),
+        codec: entry.codec ? String(entry.codec) : null,
+      };
    }
    if (entry.roomCameraId) {
      const id = String(entry.roomCameraId);
-      return { type: 'room', id, key: entry.key || `room:${id}` };
+      return {
+        type: 'room',
+        id,
+        key: entry.key || `room:${id}`,
+        preview: Boolean(entry.preview),
+        codec: entry.codec ? String(entry.codec) : null,
+      };
    }
  }
  return null;
@@ -86,6 +105,12 @@ export function useVideoRequests(sourceList = [], options = {}) {

    function requestEntry(entry) {
      const payload = entry.type === 'room' ? { roomCameraId: entry.id } : { roverId: entry.id };
+      if (entry.preview) {
+        payload.preview = true;
+        if (entry.codec) {
+          payload.codec = entry.codec;
+        }
+      }
      socket.emit('video:request', payload, (resp = {}) => {
        if (cancelled) return;
        setSources((prev) => ({ ...prev, [entry.key]: resp }));
@@ -0,0 +1,28 @@
+let cachedAv1Support = null;
+
+function hasAv1CodecCapability() {
+  if (typeof RTCRtpReceiver !== 'undefined' && RTCRtpReceiver.getCapabilities) {
+    const caps = RTCRtpReceiver.getCapabilities('video');
+    const codecs = caps?.codecs || [];
+    return codecs.some((codec) => {
+      const mime = (codec?.mimeType || '').toLowerCase();
+      return mime === 'video/av1' || mime === 'video/av01' || mime === 'video/av1x';
+    });
+  }
+  if (typeof document !== 'undefined') {
+    const video = document.createElement('video');
+    if (typeof video.canPlayType === 'function') {
+      const result = video.canPlayType('video/mp4; codecs="av01.0.05M.08"');
+      return result === 'probably' || result === 'maybe';
+    }
+  }
+  return false;
+}
+
+export function supportsAv1WebRtc() {
+  if (cachedAv1Support != null) {
+    return cachedAv1Support;
+  }
+  cachedAv1Support = hasAv1CodecCapability();
+  return cachedAv1Support;
+}
@@ -10,6 +10,8 @@ import VideoTile from '../components/VideoTile.jsx';
 import ChatPanel from '../components/ChatPanel.jsx';
 import AlertFeed from '../components/AlertFeed.jsx';
 import useDefaultNickname from '../hooks/useDefaultNickname.js';
+import RoomCameraFeed from '../components/RoomCameraFeed.jsx';
+import { supportsAv1WebRtc } from '../lib/mediaSupport.js';

 const ROTATE_MS = 20000;

@@ -40,6 +42,23 @@ function MiniSummaryContent() {
    roster.map((rover) => rover.id),
    { enabled: !inLockdown, version: session?.mode },
  );
+  const av1Supported = supportsAv1WebRtc();
+  const previewEntries = roster.map((rover) => ({
+    type: 'rover',
+    id: rover.id,
+    key: `rover:${rover.id}:preview:av1`,
+    preview: true,
+    codec: 'av1',
+  }));
+  const roomPreviewEntries = roomCameras.map((camera) => ({
+    type: 'room',
+    id: camera.id,
+    key: `room:${camera.id}:preview:av1`,
+    preview: true,
+    codec: 'av1',
+  }));
+  const previewSources = useVideoRequests(previewEntries, { enabled: !inLockdown && av1Supported });
+  const roomPreviewSources = useVideoRequests(roomPreviewEntries, { enabled: !inLockdown && av1Supported });
  const audioEntries = useMemo(
    () =>
      roster.flatMap((rover) => {
@@ -91,10 +110,18 @@ function MiniSummaryContent() {
  const activeCamera = activeEntry?.type === 'room' ? activeEntry.camera : null;

  const activeSnapshot = activeRover ? snapshotFeeds[activeRover.id] || null : null;
+  const activePreview =
+    activeRover && previewSources[`rover:${activeRover.id}:preview:av1`]
+      ? previewSources[`rover:${activeRover.id}:preview:av1`]
+      : null;
  const activeAudio = activeRover ? audioSources[`${activeRover.id}-audio`] || null : null;
  const activeFrame = activeRover ? frames[activeRover.id] || null : null;
  const driverLabel = activeRover ? formatDriverLabel({ roverId: activeRover.id, session }) : null;
  const activeFeed = activeCamera ? feeds[activeCamera.id] || null : null;
+  const activeRoomPreview =
+    activeCamera && roomPreviewSources[`room:${activeCamera.id}:preview:av1`]
+      ? roomPreviewSources[`room:${activeCamera.id}:preview:av1`]
+      : null;

  if (inLockdown) {
    return (
@@ -118,8 +145,8 @@ function MiniSummaryContent() {
        ) : activeRover ? (
          <FitViewportFrame>
            <VideoTile
-              sessionInfo={null}
-              videoMode="snapshot"
+              sessionInfo={activePreview?.url ? activePreview : null}
+              videoMode={activePreview?.url ? 'whep' : 'snapshot'}
              snapshotFeed={activeSnapshot}
              audioSessionInfo={activeAudio}
              label={activeRover.name || activeRover.id}
@@ -135,7 +162,12 @@ function MiniSummaryContent() {
          </FitViewportFrame>
        ) : activeCamera ? (
          <FitViewportFrame>
-            <RoomCameraFrame camera={activeCamera} feed={activeFeed} />
+            <RoomCameraFrame
+              camera={activeCamera}
+              feed={activeFeed}
+              videoSession={activeRoomPreview}
+              preferVideo={Boolean(activeRoomPreview?.url)}
+            />
          </FitViewportFrame>
        ) : (
          <div className="flex h-full w-full items-center justify-center text-sm text-slate-500">
@@ -158,26 +190,15 @@ export default function MiniSummaryApp() {
  );
 }

-function RoomCameraFrame({ camera, feed }) {
-  const hasImage = feed?.objectUrl;
-  const connecting = feed && feed.status === 'connecting';
+function RoomCameraFrame({ camera, feed, videoSession, preferVideo }) {
  return (
    <div className="relative h-full w-full bg-zinc-950">
-      {hasImage ? (
-        <img
-          src={feed.objectUrl}
-          alt={camera.name || camera.id}
-          className="h-full w-full object-cover"
-          draggable={false}
-        />
-      ) : (
-        <div className="flex h-full w-full items-center justify-center text-sm text-slate-500">
-          {connecting ? `Connecting to ${camera.name || camera.id}…` : 'No frame yet'}
-        </div>
-      )}
-      <div className="absolute left-1 top-1 rounded bg-black/60 px-1 py-0.25 text-xs text-slate-200">
-        {camera.name || camera.id}
-      </div>
+      <RoomCameraFeed
+        feed={feed}
+        label={camera.name || camera.id}
+        videoSession={videoSession}
+        preferVideo={preferVideo}
+      />
    </div>
  );
 }
@@ -13,6 +13,7 @@ import RoverRoster from '../components/RoverRoster.jsx';
 import AlertFeed from '../components/AlertFeed.jsx';
 import useDefaultNickname from '../hooks/useDefaultNickname.js';
 import CommunityGoalBanner from '../components/CommunityGoalBanner.jsx';
+import { supportsAv1WebRtc } from '../lib/mediaSupport.js';

 function formatDriverLabel({ roverId, session }) {
  const activeDriverId = session?.activeDrivers?.[roverId] || null;
@@ -25,14 +26,15 @@ function formatDriverLabel({ roverId, session }) {
  return driverText;
 }

-function RoverSpectatorCard({ rover, frame, snapshotFeed, audioInfo, session }) {
+function RoverSpectatorCard({ rover, frame, snapshotFeed, previewSession, audioInfo, session }) {
  const driverLabel = formatDriverLabel({ roverId: rover.id, session });
+  const hasPreview = Boolean(previewSession?.url);
  return (
    <article className="min-h-[16rem] rounded bg-zinc-900 p-0.5 sm:min-h-[18rem]">
      <div className="min-h-0 overflow-hidden rounded bg-black/20">
        <VideoTile
-          sessionInfo={null}
-          videoMode="snapshot"
+          sessionInfo={hasPreview ? previewSession : null}
+          videoMode={hasPreview ? 'whep' : 'snapshot'}
          snapshotFeed={snapshotFeed}
          audioSessionInfo={audioInfo}
          label={rover.name}
@@ -48,7 +50,7 @@ function RoverSpectatorCard({ rover, frame, snapshotFeed, audioInfo, session })
  );
 }

-function RoverRow({ roster, frames, snapshotFeeds, audioSources, session }) {
+function RoverRow({ roster, frames, snapshotFeeds, previewSources, audioSources, session }) {
  if (roster.length === 0) {
    return <p className="col-span-full text-slate-400">No rovers registered.</p>;
  }
@@ -60,6 +62,7 @@ function RoverRow({ roster, frames, snapshotFeeds, audioSources, session }) {
          rover={rover}
          frame={frames[rover.id]}
          snapshotFeed={snapshotFeeds[rover.id]}
+          previewSession={previewSources[`rover:${rover.id}:preview:av1`] || null}
          audioInfo={audioSources[`${rover.id}-audio`]}
          session={session}
          showHudMap
@@ -104,6 +107,15 @@ function SpectatorContent() {
    roster.map((rover) => rover.id),
    { enabled: !inLockdown, version: session?.mode },
  );
+  const av1Supported = supportsAv1WebRtc();
+  const previewEntries = roster.map((rover) => ({
+    type: 'rover',
+    id: rover.id,
+    key: `rover:${rover.id}:preview:av1`,
+    preview: true,
+    codec: 'av1',
+  }));
+  const previewSources = useVideoRequests(previewEntries, { enabled: !inLockdown && av1Supported, version: session?.mode });
  const audioEntries = roster.flatMap((rover) =>
    rover.media?.audioPublishUrl
      ? [{ type: 'rover', id: `${rover.id}-audio`, key: `${rover.id}-audio` }]
@@ -130,6 +142,7 @@ function SpectatorContent() {
            roster={roster}
            frames={frames}
            snapshotFeeds={snapshotFeeds}
+            previewSources={previewSources}
            audioSources={audioSources}
            session={session}
          />
Author	SHA1	Message	Date
legop3	3a8bb8a0cf	i give up lol	2026-01-17 20:35:03 -05:00
legop3	87936510b2	oops forgot to build UI	2026-01-17 20:29:41 -05:00
legop3	66b8c839b7	pass 2	2026-01-17 20:28:16 -05:00
legop3	7041a3c6df	pass 1	2026-01-17 19:32:36 -05:00