low quality preview for non-drivers

2026-09-15 17:12:59 -04:00 · 2026-01-13 01:45:15 -05:00
parent 56b89b5dff
commit c265121335
14 changed files with 551 additions and 59 deletions
@@ -21,6 +21,7 @@ require('./src/services/videoSessions');
 require('./src/services/videoAuthService');
 require('./src/services/videoSocketService');
 require('./src/services/roomCameraSocketService');
+require('./src/services/roverSnapshotSocketService');
 require('./src/services/embedHttpService');
 require('./src/services/logStreamService');
 require('./src/services/homeAssistantService');
@@ -6,6 +6,7 @@ MEDIAMTX_BASE_URL="https://github.com/bluenviron/mediamtx/releases/download/v${M
 MEDIAMTX_BIN="/usr/local/bin/mediamtx"
 MEDIAMTX_CONF_DIR="/etc/mediamtx"
 MEDIAMTX_CONFIG="$MEDIAMTX_CONF_DIR/mediamtx.yml"
+MEDIAMTX_SNAPSHOT_SCRIPT="$MEDIAMTX_CONF_DIR/rover-snapshot.sh"
 MEDIAMTX_SERVICE="/etc/systemd/system/mediamtx.service"
 MULTIROVER_SERVICE="/etc/systemd/system/multirover.service"

@@ -24,6 +25,7 @@ SCRIPT_DIR=$(cd "$(dirname "$0")" && pwd)
 SERVER_DIR="$SCRIPT_DIR"
 CONFIG_PATH="$SERVER_DIR/config.yaml"
 MEDIAMTX_TEMPLATE="$SERVER_DIR/mediamtx/mediamtx.yml"
+MEDIAMTX_SNAPSHOT_TEMPLATE="$SERVER_DIR/mediamtx/rover-snapshot.sh"

 echo "[1/6] Installing dependencies..."
 dnf install -y nodejs npm curl tar >/dev/null
@@ -71,6 +73,13 @@ fi
 echo "      Installing mediaMTX config -> $MEDIAMTX_CONFIG"
 rm -f "$MEDIAMTX_CONFIG"
 install -m 0644 "$MEDIAMTX_TEMPLATE" "$MEDIAMTX_CONFIG"
+if [[ ! -f "$MEDIAMTX_SNAPSHOT_TEMPLATE" ]]; then
+  echo "mediaMTX snapshot script missing at $MEDIAMTX_SNAPSHOT_TEMPLATE" >&2
+  exit 1
+fi
+echo "      Installing mediaMTX snapshot script -> $MEDIAMTX_SNAPSHOT_SCRIPT"
+rm -f "$MEDIAMTX_SNAPSHOT_SCRIPT"
+install -m 0755 "$MEDIAMTX_SNAPSHOT_TEMPLATE" "$MEDIAMTX_SNAPSHOT_SCRIPT"
 chown -R "$TARGET_USER":"$TARGET_USER" "$MEDIAMTX_CONF_DIR"

 echo "[4/6] Writing systemd units..."
@@ -42,3 +42,4 @@ paths:
  all:
    source: publisher
    sourceOnDemand: no
+    runOnReady: /etc/mediamtx/rover-snapshot.sh
@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+STREAM_ID="${MTX_PATH:-}"
+if [[ -z "${STREAM_ID}" ]]; then
+  echo "MTX_PATH is required." >&2
+  exit 1
+fi
+
+if [[ "${STREAM_ID}" == *-audio ]]; then
+  exit 0
+fi
+
+OUTPUT_DIR="${ROVER_SNAPSHOT_DIR:-/run/rover-snapshots}"
+FPS="${ROVER_SNAPSHOT_FPS:-1}"
+WIDTH="${ROVER_SNAPSHOT_WIDTH:-640}"
+QUALITY="${ROVER_SNAPSHOT_QUALITY:-8}"
+
+mkdir -p "${OUTPUT_DIR}"
+OUTPUT_PATH="${OUTPUT_DIR}/${STREAM_ID}.jpg"
+
+INPUT_URL="${ROVER_SNAPSHOT_INPUT_URL:-srt://127.0.0.1:9000?streamid=#!::r=${STREAM_ID},m=play&latency=20&mode=caller&transtype=live&pkt_size=1316}"
+
+exec /usr/bin/ffmpeg -hide_banner -loglevel warning \
+  -fflags nobuffer \
+  -i "${INPUT_URL}" \
+  -vf "fps=${FPS},scale=${WIDTH}:-1" \
+  -q:v "${QUALITY}" \
+  -an \
+  -f image2 \
+  -update 1 \
+  "${OUTPUT_PATH}"
@@ -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-DNGguoJu.js"></script>
+    <script type="module" crossorigin src="/assets/index-ClyuL_YR.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-COnIgwcF.css">
  </head>
  <body>
@@ -0,0 +1,94 @@
+const EventEmitter = require('events');
+const fs = require('fs/promises');
+const path = require('path');
+const logger = require('../globals/logger').child('roverSnapshot');
+const roverManager = require('./roverManager');
+
+const SNAPSHOT_DIR = process.env.ROVER_SNAPSHOT_DIR || '/run/rover-snapshots';
+const POLL_INTERVAL_MS = 500;
+
+const roverState = new Map(); // id -> { frame, ts, error, failures, fetching, mtimeMs }
+const events = new EventEmitter(); // frame, status
+let pollTimer = null;
+
+function markState(id, updates = {}) {
+  const prev = roverState.get(id) || {};
+  const next = { ...prev, ...updates };
+  roverState.set(id, next);
+  return next;
+}
+
+function getSnapshotPath(id) {
+  return path.join(SNAPSHOT_DIR, `${id}.jpg`);
+}
+
+async function fetchSnapshot(id) {
+  const state = roverState.get(id);
+  if (state?.fetching) return;
+  markState(id, { fetching: true });
+  try {
+    const filePath = getSnapshotPath(id);
+    const stats = await fs.stat(filePath);
+    if (state?.mtimeMs && stats.mtimeMs <= state.mtimeMs) {
+      return;
+    }
+    const buffer = await fs.readFile(filePath);
+    const ts = stats.mtimeMs || Date.now();
+    markState(id, { frame: buffer, ts, error: null, failures: 0, mtimeMs: stats.mtimeMs });
+    events.emit('frame', { id, buffer, ts });
+  } catch (err) {
+    const failures = (state?.failures || 0) + 1;
+    const message = err.code === 'ENOENT' ? 'Snapshot missing' : err.message;
+    markState(id, { error: message, failures });
+    events.emit('status', { id, error: message });
+    if (failures % 20 === 1) {
+      logger.warn('Snapshot read failed', { id, err: message });
+    }
+  } finally {
+    markState(id, { fetching: false });
+  }
+}
+
+function cleanupInactive(activeIds) {
+  roverState.forEach((_, id) => {
+    if (!activeIds.has(id)) {
+      roverState.delete(id);
+    }
+  });
+}
+
+function stopAll() {
+  if (pollTimer) {
+    clearInterval(pollTimer);
+    pollTimer = null;
+  }
+  roverState.clear();
+}
+
+function startAll() {
+  stopAll();
+  pollTimer = setInterval(() => {
+    const roster = roverManager.getRoster();
+    const activeIds = new Set(roster.map((entry) => String(entry.id)));
+    cleanupInactive(activeIds);
+    roster.forEach((entry) => fetchSnapshot(String(entry.id)));
+  }, POLL_INTERVAL_MS);
+  logger.info('Started rover snapshot polling');
+}
+
+function getState(id) {
+  const state = roverState.get(id);
+  if (!state) return null;
+  return {
+    frame: state.frame || null,
+    ts: state.ts || null,
+    error: state.error || null,
+  };
+}
+
+startAll();
+
+module.exports = {
+  roverSnapshotEvents: events,
+  getRoverSnapshotState: getState,
+};
@@ -0,0 +1,168 @@
+const io = require('../globals/io');
+const logger = require('../globals/logger').child('roverSnapshotSocket');
+const { getMode, MODES } = require('./modeManager');
+const { isAdmin, isLockdownAdmin, getRole } = require('./roleService');
+const roverManager = require('./roverManager');
+const { roverSnapshotEvents, getRoverSnapshotState } = require('./roverSnapshotService');
+
+const SUBSCRIBE_LIMIT = 50;
+const SUBSCRIBE_WINDOW_MS = 10000;
+const STREAM_INTERVAL_MS = 800;
+
+function passesMode(socket) {
+  const mode = getMode();
+  if (mode === MODES.LOCKDOWN) {
+    return isLockdownAdmin(socket);
+  }
+  if (mode === MODES.ADMIN) {
+    const role = getRole(socket);
+    return role === 'spectator' || isAdmin(socket);
+  }
+  return true;
+}
+
+function canViewSnapshots(socket) {
+  return passesMode(socket);
+}
+
+const roverSubscribers = new Map(); // id -> Set(socketId)
+const socketSubscriptions = new Map(); // socketId -> Set(id)
+const subscribeBuckets = new Map(); // socketId -> { start, count }
+const lastSentBySocket = new Map(); // socketId -> Map(roverId -> ts)
+
+function addSubscription(socket, roverId) {
+  if (!roverSubscribers.has(roverId)) {
+    roverSubscribers.set(roverId, new Set());
+  }
+  roverSubscribers.get(roverId).add(socket.id);
+
+  if (!socketSubscriptions.has(socket.id)) {
+    socketSubscriptions.set(socket.id, new Set());
+  }
+  socketSubscriptions.get(socket.id).add(roverId);
+}
+
+function removeSubscription(socketId, roverId) {
+  const bucket = roverSubscribers.get(roverId);
+  if (bucket) {
+    bucket.delete(socketId);
+    if (bucket.size === 0) {
+      roverSubscribers.delete(roverId);
+    }
+  }
+  const socketBucket = socketSubscriptions.get(socketId);
+  if (socketBucket) {
+    socketBucket.delete(roverId);
+    if (socketBucket.size === 0) {
+      socketSubscriptions.delete(socketId);
+    }
+  }
+}
+
+function removeAllSubscriptions(socketId) {
+  const bucket = socketSubscriptions.get(socketId);
+  if (!bucket) return;
+  bucket.forEach((roverId) => removeSubscription(socketId, roverId));
+}
+
+function allowSubscribe(socketId) {
+  const now = Date.now();
+  let bucket = subscribeBuckets.get(socketId);
+  if (!bucket || now - bucket.start >= SUBSCRIBE_WINDOW_MS) {
+    bucket = { start: now, count: 0 };
+  }
+  bucket.count += 1;
+  subscribeBuckets.set(socketId, bucket);
+  return bucket.count <= SUBSCRIBE_LIMIT;
+}
+
+function sendFrame(socket, roverId, payload, buffer) {
+  socket.emit('roverSnapshot:frame', { id: roverId, ...payload }, buffer);
+}
+
+function sendStatus(socket, roverId, status) {
+  socket.emit('roverSnapshot:status', { id: roverId, ...status });
+}
+
+roverSnapshotEvents.on('frame', ({ id, buffer, ts }) => {
+  const bucket = roverSubscribers.get(id);
+  if (!bucket || !buffer) return;
+  bucket.forEach((socketId) => {
+    const socket = io.sockets.sockets.get(socketId);
+    if (!socket) return;
+    let lastMap = lastSentBySocket.get(socketId);
+    if (!lastMap) {
+      lastMap = new Map();
+      lastSentBySocket.set(socketId, lastMap);
+    }
+    const lastSent = lastMap.get(id) || 0;
+    const now = ts || Date.now();
+    if (now - lastSent < STREAM_INTERVAL_MS) {
+      return;
+    }
+    lastMap.set(id, now);
+    sendFrame(socket, id, { ts }, buffer);
+  });
+});
+
+roverSnapshotEvents.on('status', ({ id, error }) => {
+  const bucket = roverSubscribers.get(id);
+  if (!bucket) return;
+  bucket.forEach((socketId) => {
+    const socket = io.sockets.sockets.get(socketId);
+    if (!socket) return;
+    sendStatus(socket, id, { error: error || null });
+  });
+});
+
+io.on('connection', (socket) => {
+  socket.on('roverSnapshot:subscribe', (payload = {}, cb = () => {}) => {
+    const list = Array.isArray(payload?.ids)
+      ? payload.ids.map(String)
+      : payload?.roverId || payload?.id
+      ? [String(payload.roverId || payload.id)]
+      : roverManager.getRoster().map((rover) => rover.id);
+    const uniqueIds = Array.from(new Set(list));
+    try {
+      if (!allowSubscribe(socket.id)) {
+        cb({ error: 'Rate limited' });
+        return;
+      }
+      if (!canViewSnapshots(socket)) {
+        throw new Error('Not authorized for rover snapshots');
+      }
+      const rosterIds = new Set(roverManager.getRoster().map((entry) => String(entry.id)));
+      const validIds = uniqueIds.filter((id) => rosterIds.has(String(id)));
+      validIds.forEach((roverId) => addSubscription(socket, roverId));
+      validIds.forEach((roverId) => {
+        const state = getRoverSnapshotState(roverId);
+        if (state?.frame) {
+          sendFrame(socket, roverId, { ts: state.ts }, state.frame);
+        }
+        sendStatus(socket, roverId, {
+          ts: state?.ts || null,
+          error: state?.error || null,
+        });
+      });
+      cb({ ok: true, subscribed: validIds });
+    } catch (err) {
+      logger.warn('Rover snapshot subscribe failed', { socketId: socket.id, err: err.message });
+      cb({ error: err.message });
+    }
+  });
+
+  socket.on('roverSnapshot:unsubscribe', (payload = {}) => {
+    const list = Array.isArray(payload?.ids)
+      ? payload.ids.map(String)
+      : payload?.roverId || payload?.id
+      ? [String(payload.roverId || payload.id)]
+      : [];
+    list.forEach((roverId) => removeSubscription(socket.id, roverId));
+  });
+
+  socket.on('disconnect', () => {
+    removeAllSubscriptions(socket.id);
+    subscribeBuckets.delete(socket.id);
+    lastSentBySocket.delete(socket.id);
+  });
+});
@@ -1,6 +1,8 @@
+import { useEffect, useMemo, useState } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
 import { useTelemetryFrame } from '../context/TelemetryContext.jsx';
 import { useVideoRequests } from '../hooks/useVideoRequests.js';
+import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
 import { useControlSystem } from '../controls/index.js';
 import VideoTile from './VideoTile.jsx';

@@ -9,19 +11,51 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
  const {
    state: { song },
  } = useControlSystem();
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (session?.mode !== 'turns') {
+      return undefined;
+    }
+    const timer = setInterval(() => setNow(Date.now()), 250);
+    return () => clearInterval(timer);
+  }, [session?.mode]);
  const roverId = session?.assignment?.roverId;
  const rosterEntry =
    roverId && session?.roster ? session.roster.find((item) => String(item.id) === String(roverId)) : null;
  const hasAudio = Boolean(rosterEntry?.media?.audioPublishUrl);
+  const turnInfo = roverId ? session?.turnQueues?.[roverId] : null;
+  const socketId = session?.socketId || null;
+  const activeDriverId = roverId ? session?.activeDrivers?.[roverId] : null;
+  const isActiveDriver = Boolean(socketId && activeDriverId === socketId);
+  const nextDriverId = useMemo(() => {
+    const queue = turnInfo?.queue || [];
+    if (!queue.length || !turnInfo?.current || queue.length <= 1) return null;
+    const idx = queue.findIndex((id) => id === turnInfo.current);
+    if (idx === -1) {
+      return queue[0] || null;
+    }
+    return queue[(idx + 1) % queue.length] || null;
+  }, [turnInfo?.queue, turnInfo?.current]);
+  const isNextDriver = Boolean(socketId && nextDriverId === socketId);
+  const deadline = turnInfo?.deadline || null;
+  const msUntilTurn = deadline ? deadline - now : null;
+  const isPreSwitchWindow =
+    session?.mode === 'turns' && isNextDriver && msUntilTurn != null && msUntilTurn <= 5000 && msUntilTurn > 0;
+  const shouldShowVideo = session?.mode !== 'turns' || isActiveDriver || isPreSwitchWindow;
  const entries = roverId
    ? [
-        { type: 'rover', id: roverId, key: roverId },
+        ...(shouldShowVideo ? [{ type: 'rover', id: roverId, key: roverId }] : []),
        ...(hasAudio ? [{ type: 'rover', id: `${roverId}-audio`, key: `${roverId}-audio` }] : []),
      ]
    : [];
  const sources = useVideoRequests(entries);
-  const info = roverId ? sources[roverId] : null;
+  const info = roverId && shouldShowVideo ? sources[roverId] : null;
  const audioInfo = roverId && hasAudio ? sources[`${roverId}-audio`] : null;
+  const snapshotFeeds = useRoverSnapshots(roverId ? [roverId] : [], {
+    enabled: Boolean(roverId),
+    version: session?.mode,
+  });
+  const snapshotFeed = roverId ? snapshotFeeds[roverId] || null : null;
  const frame = useTelemetryFrame(roverId);
  const batteryRecord =
    roverId && session?.roster
@@ -36,12 +70,15 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
      {roverId ? (
        <VideoTile
          sessionInfo={info}
+          videoMode={shouldShowVideo ? 'whep' : 'snapshot'}
+          snapshotFeed={snapshotFeed}
          audioSessionInfo={audioInfo}
          label={roverLabel}
          telemetryFrame={frame}
          batteryConfig={batteryConfig}
          layoutFormat={layoutFormat}
          songNote={song?.note}
+          qualityNotice={!shouldShowVideo ? 'Preview feed (low FPS) until your turn.' : null}
        />
      ) : (
        <div className="panel-muted content-center text-center text-sm text-slate-400 aspect-video">
@@ -45,6 +45,9 @@ function buildBatteryVisual(charge, config) {
 export default function VideoTile({
  sessionInfo,
  audioSessionInfo,
+  videoMode = 'whep',
+  snapshotFeed = null,
+  qualityNotice = null,
  label,
  forceMute = false,
  telemetryFrame,
@@ -70,6 +73,7 @@ export default function VideoTile({
  const [restartToken, setRestartToken] = useState(0);
  const [audioRestartToken, setAudioRestartToken] = useState(0);
  const [muted, setMuted] = useState(true);
+  const usingSnapshot = videoMode === 'snapshot';
  const sensors = telemetryFrame?.sensors;
  const batteryCharge = sensors?.batteryChargeMah ?? null;
  const desktopLayout = layoutFormat === 'desktop';
@@ -162,7 +166,14 @@ export default function VideoTile({
  }, [status, attemptUnmute]);

  useEffect(() => {
-    if (!sessionInfo?.url || !videoRef.current) {
+    if (usingSnapshot) {
+      setStatus('snapshot');
+      setDetail(null);
+    }
+  }, [usingSnapshot]);
+
+  useEffect(() => {
+    if (usingSnapshot || !sessionInfo?.url || !videoRef.current) {
      return undefined;
    }
    let active = true;
@@ -199,7 +210,7 @@ export default function VideoTile({
      clearTimeout(resetMuteId);
      player?.stop();
    };
-  }, [sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback]);
+  }, [usingSnapshot, sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback]);

  useEffect(() => {
    if (status === 'stopped' && sessionInfo?.url) {
@@ -329,7 +340,14 @@ export default function VideoTile({
    };
  }, [audioSessionInfo?.url]);

-  const renderedStatus = !sessionInfo?.url
+  const snapshotStatus = snapshotFeed?.error
+    ? `Error: ${snapshotFeed.error}`
+    : snapshotFeed?.objectUrl
+    ? 'snapshot'
+    : snapshotFeed?.status || 'waiting';
+  const renderedStatus = usingSnapshot
+    ? snapshotStatus
+    : !sessionInfo?.url
    ? 'waiting'
    : status === 'error'
    ? `Error: ${detail || 'unknown'}`
@@ -352,14 +370,29 @@ export default function VideoTile({
      <div
        className={`relative w-full overflow-hidden bg-black ${fitParent ? 'h-full flex-1' : 'aspect-video'}`}
      >
-        <video
-          ref={videoRef}
-          muted={forceMute || muted}
-          playsInline
-          autoPlay
-          controls={false}
-          className="h-full w-full object-contain"
-        />
+        {usingSnapshot ? (
+          snapshotFeed?.objectUrl ? (
+            <img
+              src={snapshotFeed.objectUrl}
+              alt={label}
+              className="h-full w-full object-contain"
+              draggable={false}
+            />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center text-sm text-slate-300">
+              Waiting for frame…
+            </div>
+          )
+        ) : (
+          <video
+            ref={videoRef}
+            muted={forceMute || muted}
+            playsInline
+            autoPlay
+            controls={false}
+            className="h-full w-full object-contain"
+          />
+        )}
        <audio ref={audioRef} autoPlay hidden />
        <HudOverlay
          frame={telemetryFrame}
@@ -382,6 +415,11 @@ export default function VideoTile({
        {showVerticalBattery && batteryVisual.available ? (
          <BatteryBarVertical visual={batteryVisual} />
        ) : null}
+        {qualityNotice ? (
+          <div className="pointer-events-none absolute left-1 top-1 rounded bg-black/70 px-1 py-0.5 text-xs font-semibold text-amber-200">
+            {qualityNotice}
+          </div>
+        ) : null}
      </div>
      {!showVerticalBattery && (
        <div className="space-y-0.25">
@@ -0,0 +1,102 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useSocket } from '../context/SocketContext.jsx';
+
+export function useRoverSnapshots(sourceList = [], options = {}) {
+  const socket = useSocket();
+  const { enabled = true, version = null } = options;
+  const [feeds, setFeeds] = useState({});
+  const objectUrls = useRef(new Map());
+  const ids = useMemo(
+    () => sourceList.map((e) => (typeof e === 'string' ? e : e.id)).filter(Boolean),
+    [sourceList],
+  );
+  const idsKey = useMemo(() => {
+    const base = ids.join('|');
+    return version ? `${base}|v:${version}` : base;
+  }, [ids, version]);
+  const idsRef = useRef([]);
+  const [connectionNonce, setConnectionNonce] = useState(0);
+
+  useEffect(() => {
+    if (!socket) return undefined;
+    const handleConnect = () => setConnectionNonce((prev) => prev + 1);
+    socket.on('connect', handleConnect);
+    return () => socket.off('connect', handleConnect);
+  }, [socket]);
+
+  useEffect(() => {
+    idsRef.current = ids;
+  }, [idsKey, ids]);
+
+  useEffect(() => {
+    objectUrls.current.forEach((url) => URL.revokeObjectURL(url));
+    objectUrls.current.clear();
+    setFeeds({});
+  }, [idsKey]);
+
+  useEffect(() => {
+    if (!enabled) {
+      objectUrls.current.forEach((url) => URL.revokeObjectURL(url));
+      objectUrls.current.clear();
+      setFeeds({});
+      return undefined;
+    }
+    if (!idsRef.current.length || !socket) {
+      return undefined;
+    }
+    let cancelled = false;
+    const currentIds = idsRef.current;
+
+    const handleFrame = (meta = {}, buffer) => {
+      if (cancelled || !meta.id || !buffer) return;
+      const blob = new Blob([buffer], { type: 'image/jpeg' });
+      const url = URL.createObjectURL(blob);
+      const prevUrl = objectUrls.current.get(meta.id);
+      if (prevUrl) {
+        URL.revokeObjectURL(prevUrl);
+      }
+      objectUrls.current.set(meta.id, url);
+      setFeeds((prev) => ({
+        ...prev,
+        [meta.id]: {
+          status: 'playing',
+          ts: meta.ts || Date.now(),
+          error: null,
+          objectUrl: url,
+        },
+      }));
+    };
+
+    const handleStatus = (meta = {}) => {
+      if (cancelled || !meta.id) return;
+      setFeeds((prev) => ({
+        ...prev,
+        [meta.id]: {
+          ...(prev[meta.id] || {}),
+          status: meta.error ? 'error' : prev[meta.id]?.status || 'connecting',
+          error: meta.error || null,
+          ts: meta.ts || prev[meta.id]?.ts || null,
+          objectUrl: prev[meta.id]?.objectUrl || null,
+        },
+      }));
+    };
+
+    socket.on('roverSnapshot:frame', handleFrame);
+    socket.on('roverSnapshot:status', handleStatus);
+
+    socket.emit('roverSnapshot:subscribe', { ids: currentIds }, (resp = {}) => {
+      if (resp.error) return;
+    });
+
+    return () => {
+      cancelled = true;
+      socket.emit('roverSnapshot:unsubscribe', { ids: currentIds });
+      socket.off('roverSnapshot:frame', handleFrame);
+      socket.off('roverSnapshot:status', handleStatus);
+      objectUrls.current.forEach((url) => URL.revokeObjectURL(url));
+      objectUrls.current.clear();
+    };
+  }, [socket, idsKey, enabled, connectionNonce]);
+
+  return feeds;
+}
@@ -3,6 +3,7 @@ import { SettingsProvider } from '../settings/index.js';
 import { useSession } from '../context/SessionContext.jsx';
 import { useTelemetryFrames } from '../context/TelemetryContext.jsx';
 import { useVideoRequests } from '../hooks/useVideoRequests.js';
+import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
 import { useSpectatorMode } from '../hooks/useSpectatorMode.js';
 import { useRoomCameraSnapshots } from '../hooks/useRoomCameraSnapshots.js';
 import VideoTile from '../components/VideoTile.jsx';
@@ -33,30 +34,26 @@ function MiniSummaryContent() {
  });
  const [index, setIndex] = useState(0);

-  const entries = useMemo(
+  const snapshotFeeds = useRoverSnapshots(
+    roster.map((rover) => rover.id),
+    { enabled: !inLockdown, version: session?.mode },
+  );
+  const audioEntries = useMemo(
    () =>
      roster.flatMap((rover) => {
-        if (!rover?.id) return [];
+        if (!rover?.id || !rover.media?.audioPublishUrl) return [];
        const id = String(rover.id);
-        const base = [{ type: 'rover', id, key: id }];
-        if (rover.media?.audioPublishUrl) {
-          base.push({ type: 'rover', id: `${id}-audio`, key: `${id}-audio` });
-        }
-        return base;
+        return [{ type: 'rover', id: `${id}-audio`, key: `${id}-audio` }];
      }),
    [roster],
  );
-
-  const videoSourcesEnabled = useVideoRequests(entries, {
-    enabled: !inLockdown,
-    version: session?.mode,
-  });
+  const audioSources = useVideoRequests(audioEntries, { enabled: !inLockdown, version: session?.mode });

  const roverPool = useMemo(() => {
    if (!roster.length) return [];
-    const withVideo = roster.filter((rover) => videoSourcesEnabled[rover.id]?.url);
-    return withVideo.length ? withVideo : roster;
-  }, [roster, videoSourcesEnabled]);
+    const withSnapshot = roster.filter((rover) => snapshotFeeds[rover.id]?.objectUrl);
+    return withSnapshot.length ? withSnapshot : roster;
+  }, [roster, snapshotFeeds]);

  const rotationPool = useMemo(() => {
    const items = [];
@@ -91,8 +88,8 @@ function MiniSummaryContent() {
  const activeRover = activeEntry?.type === 'rover' ? activeEntry.rover : null;
  const activeCamera = activeEntry?.type === 'room' ? activeEntry.camera : null;

-  const activeVideo = activeRover ? videoSourcesEnabled[activeRover.id] || null : null;
-  const activeAudio = activeRover ? videoSourcesEnabled[`${activeRover.id}-audio`] || null : null;
+  const activeSnapshot = activeRover ? snapshotFeeds[activeRover.id] || null : 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;
@@ -119,7 +116,9 @@ function MiniSummaryContent() {
        ) : activeRover ? (
          <FitViewportFrame>
            <VideoTile
-              sessionInfo={activeVideo}
+              sessionInfo={null}
+              videoMode="snapshot"
+              snapshotFeed={activeSnapshot}
              audioSessionInfo={activeAudio}
              label={activeRover.name || activeRover.id}
              telemetryFrame={activeFrame}
@@ -3,6 +3,7 @@ import { useSession } from '../context/SessionContext.jsx';
 import { useSpectatorMode } from '../hooks/useSpectatorMode.js';
 import { useTelemetryFrames } from '../context/TelemetryContext.jsx';
 import { useVideoRequests } from '../hooks/useVideoRequests.js';
+import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
 import VideoTile from '../components/VideoTile.jsx';
 import RoomCameraPanel from '../components/RoomCameraPanel.jsx';
 import UserListPanel from '../components/UserListPanel.jsx';
@@ -22,13 +23,15 @@ function formatDriverLabel({ roverId, session }) {
  return driverText;
 }

-function RoverSpectatorCard({ rover, frame, videoInfo, audioInfo, session }) {
+function RoverSpectatorCard({ rover, frame, snapshotFeed, audioInfo, session }) {
  const driverLabel = formatDriverLabel({ roverId: rover.id, session });
  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={videoInfo}
+          sessionInfo={null}
+          videoMode="snapshot"
+          snapshotFeed={snapshotFeed}
          audioSessionInfo={audioInfo}
          label={rover.name}
          telemetryFrame={frame}
@@ -43,7 +46,7 @@ function RoverSpectatorCard({ rover, frame, videoInfo, audioInfo, session }) {
  );
 }

-function RoverRow({ roster, frames, videoSources, session }) {
+function RoverRow({ roster, frames, snapshotFeeds, audioSources, session }) {
  if (roster.length === 0) {
    return <p className="col-span-full text-slate-400">No rovers registered.</p>;
  }
@@ -54,8 +57,8 @@ function RoverRow({ roster, frames, videoSources, session }) {
          key={rover.id}
          rover={rover}
          frame={frames[rover.id]}
-          videoInfo={videoSources[rover.id]}
-          audioInfo={videoSources[`${rover.id}-audio`]}
+          snapshotFeed={snapshotFeeds[rover.id]}
+          audioInfo={audioSources[`${rover.id}-audio`]}
          session={session}
          showHudMap
          hudMapPosition="bottom-left"
@@ -94,14 +97,16 @@ export default function SpectatorApp() {
  useSpectatorMode();
  const frames = useTelemetryFrames();
  const roster = session?.roster ?? [];
-  const entries = roster.flatMap((rover) => {
-    const base = { type: 'rover', id: rover.id, key: rover.id };
-    if (rover.media?.audioPublishUrl) {
-      return [base, { type: 'rover', id: `${rover.id}-audio`, key: `${rover.id}-audio` }];
-    }
-    return [base];
-  });
-  const videoSources = useVideoRequests(entries, { enabled: !inLockdown, version: session?.mode });
+  const snapshotFeeds = useRoverSnapshots(
+    roster.map((rover) => rover.id),
+    { enabled: !inLockdown, version: session?.mode },
+  );
+  const audioEntries = roster.flatMap((rover) =>
+    rover.media?.audioPublishUrl
+      ? [{ type: 'rover', id: `${rover.id}-audio`, key: `${rover.id}-audio` }]
+      : [],
+  );
+  const audioSources = useVideoRequests(audioEntries, { enabled: !inLockdown, version: session?.mode });

  if (inLockdown) {
    return (
@@ -121,7 +126,13 @@ export default function SpectatorApp() {
      <div className="min-h-screen bg-black text-slate-100 md:h-screen md:overflow-hidden">
        <main className="grid min-h-screen grid-cols-1 gap-0.5 p-0.5 md:h-full md:min-h-0 md:grid-cols-[minmax(0,1fr)_18rem] lg:grid-cols-[minmax(0,1fr)_20rem]">
          <section className="flex min-h-0 min-w-0 flex-col gap-0.5 md:overflow-y-auto">
-            <RoverRow roster={roster} frames={frames} videoSources={videoSources} session={session} />
+            <RoverRow
+              roster={roster}
+              frames={frames}
+              snapshotFeeds={snapshotFeeds}
+              audioSources={audioSources}
+              session={session}
+            />
            <SecondaryRow />
          </section>
          <section className="flex min-h-0 min-w-0 flex-col gap-0.5 md:h-full">