Merge pull request #3 from legop3/jpeg-roomcam

Jpeg roomcam

README.md

@@ -81,6 +81,8 @@ Publishing rovers lives on a trusted network, so the shipped config (tracked at
 
 Once finished, update `server/config.yaml` with your admin passwords and `media.whepBaseUrl` (set it to the URL you expose publicly, e.g. `https://rover.otter.land/video`). If your proxy can’t rewrite paths, create the `/video` location there and add a custom nginx snippet to rewrite `/video/<rover>/whep` to `/<>/whep` before forwarding to mediaMTX. Restart `multirover.service` whenever you edit the config. To pull updates later, just `git pull`, re-run `npm install --production` inside `server/`, and restart the service—no need to rerun the installer.
 
+Room cameras now use JPEG snapshots (4 fps) instead of WHEP. Each entry in `roomCameras` must include a `url` pointing at the snapshot endpoint; the server polls and relays frames over socket.io with the same access rules as before.
+
 ### Video handshake + diagnostics
 
 - Every `video:request` returns `{ url, token }`. The browser posts the SDP offer to `url` and includes `Authorization: Basic base64(token:token)`. mediaMTX forwards the username (`token`) to `/mediamtx/auth`, which checks the socket’s permissions (driver assignment, admin/spectator role, lockdown state) and either returns 200 or 401—no query parameters are involved anymore.

pi/bin/room-cam-concrete.service

@@ -1,27 +0,0 @@
-[Unit]
-Description=Room concrete camera SRT publisher (Pi)
-After=network-online.target
-Wants=network-online.target
-
-[Service]
-Type=simple
-# PS3 Eye mic (card 2) exposes 4ch/16k; use plughw to avoid format errors.
-ExecStartPre=/usr/bin/sh -c "/usr/bin/amixer -q -c 2 sset 'Mic Capture Switch' cap || /usr/bin/true"
-ExecStartPre=/usr/bin/sh -c "/usr/bin/amixer -q -c 2 sset 'Mic Capture Volume' 100% || /usr/bin/amixer -q -c 2 sset 'Mic' 100% cap || /usr/bin/true"
-ExecStart=/usr/bin/ffmpeg \
-  -fflags nobuffer -flags low_delay -rtbufsize 0 -thread_queue_size 256 \
-  -f v4l2 -input_format yuyv422 -video_size 640x480 -framerate 30 -i /dev/video0 \
-  -fflags nobuffer -thread_queue_size 256 -f alsa -ac 4 -ar 16000 -i plughw:2,0 \
-  -map 0:v:0 -map 1:a:0 \
-  -c:v h264_v4l2m2m -b:v 600k -maxrate 700k -bufsize 1400k -g 30 -bf 0 -pix_fmt yuv420p \
-  -af "pan=mono|c0=FL+FR,volume=0.5" \
-  -c:a libopus -b:a 64k -ar 16000 -ac 1 \
-  -flush_packets 1 -f mpegts \
-  srt://192.168.0.86:9000?streamid=#!::r=room/concrete,m=publish&latency=10&mode=caller&transtype=live&pkt_size=1316
-Restart=always
-RestartSec=2
-User=root
-Group=root
-
-[Install]
-WantedBy=multi-user.target

roomcam-service/README.md

@@ -0,0 +1,28 @@
+# Room camera snapshot service
+
+Lightweight systemd service that serves a JPEG snapshot from any MJPEG-capable webcam (most USB webcams) at 4 fps. The server pulls `http://<host>:8080/snapshot.jpg` for room cams.
+
+## Files
+- `room-cam-snapshot.sh` – ffmpeg + simple HTTP server wrapper
+- `room-cam.service` – systemd unit template
+
+## Usage
+1) Copy the service into place (adjust path/env as needed):
+   ```bash
+   sudo cp roomcam-service/room-cam.service /etc/systemd/system/room-cam.service
+   sudo systemctl daemon-reload
+   sudo systemctl enable --now room-cam.service
+   ```
+2) Override defaults via `Environment=` in the unit or drop-ins:
+   - `DEVICE=/dev/video0`
+   - `RESOLUTION=640x480`
+   - `QUALITY=5` (ffmpeg MJPEG quality; lower is higher quality)
+   - `PORT=8080`
+   - `WORKDIR=/run/roomcam`
+   - `INPUT_FORMAT=mjpeg` (use `bayer_grbg8` for OV534/raw Bayer cams; aliases `GRBG`/`grbg` are accepted)
+3) Point the server `roomCameras[].url` to `http://<host>:8080/snapshot.jpg`.
+
+Notes:
+- The camera runs at its native MJPEG frame rate; the server polls snapshots at ~4 fps, so no extra filtering is applied here.
+
+To run outside systemd, just execute `./room-cam-snapshot.sh` with any overrides.

roomcam-service/room-cam-snapshot.sh

@@ -0,0 +1,42 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# Configurable via environment
+DEVICE="${DEVICE:-/dev/video0}"
+RESOLUTION="${RESOLUTION:-640x480}"
+QUALITY="${QUALITY:-5}" # ffmpeg MJPEG quality (lower is better)
+PORT="${PORT:-8088}"
+WORKDIR="${WORKDIR:-/run/roomcam}"
+# Optional: set INPUT_FORMAT=bayer_grbg8 to transcode raw Bayer cams (e.g., OV534) to JPEG.
+INPUT_FORMAT="${INPUT_FORMAT:-mjpeg}"
+
+mkdir -p "${WORKDIR}"
+SNAPSHOT_PATH="${WORKDIR}/snapshot.jpg"
+rm -f "${SNAPSHOT_PATH}"
+
+cleanup() {
+  [[ -n "${FFMPEG_PID:-}" ]] && kill "${FFMPEG_PID}" 2>/dev/null || true
+  [[ -n "${HTTP_PID:-}" ]] && kill "${HTTP_PID}" 2>/dev/null || true
+}
+trap cleanup EXIT
+trap 'exit 0' SIGTERM INT
+
+FFMPEG_INPUT_ARGS=(-f v4l2 -input_format "${INPUT_FORMAT}" -video_size "${RESOLUTION}" -i "${DEVICE}")
+FFMPEG_FILTERS=()
+if [[ "${INPUT_FORMAT}" == bayer_* ]]; then
+  # Convert raw Bayer to a JPEG-friendly pixel format.
+  FFMPEG_FILTERS=(-pix_fmt yuv420p)
+fi
+
+/usr/bin/ffmpeg -y \
+  -loglevel warning -nostats \
+  "${FFMPEG_INPUT_ARGS[@]}" \
+  "${FFMPEG_FILTERS[@]}" \
+  -q:v "${QUALITY}" \
+  -f image2 -update 1 "${SNAPSHOT_PATH}" &
+FFMPEG_PID=$!
+
+/usr/bin/python3 -u -m http.server "${PORT}" --directory "${WORKDIR}" --bind 0.0.0.0 &
+HTTP_PID=$!
+
+wait -n "${FFMPEG_PID}" "${HTTP_PID}"

roomcam-service/room-cam.service

@@ -0,0 +1,22 @@
+[Unit]
+Description=Room camera snapshot server (MJPEG webcam)
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=simple
+Environment=DEVICE=/dev/video0
+Environment=RESOLUTION=640x480
+Environment=QUALITY=5
+Environment=PORT=8088
+Environment=WORKDIR=/run/roomcam
+Environment=INPUT_FORMAT=mjpeg
+WorkingDirectory=/home/daniel/gits/MultiRoombaRover/roomcam-service
+ExecStart=/usr/bin/env bash /home/daniel/gits/MultiRoombaRover/roomcam-service/room-cam-snapshot.sh
+Restart=always
+RestartSec=2
+User=root
+Group=root
+
+[Install]
+WantedBy=multi-user.target

server/config.example.yaml

@@ -26,9 +26,11 @@ roomCameras:
   - id: "lobby"
     name: "Lobby Camera"
     description: "Wide shot of the staging area."
+    url: "http://192.168.0.50/snapshot.jpg"
   - id: "workshop"
     name: "Workshop Bench"
     description: "Shows the workbench and charging docks."
+    url: "http://192.168.0.51/snapshot.jpg"
 
 discord:
   token: "DISCORD_BOT_TOKEN"

server/index.js

@@ -20,6 +20,7 @@ require('./src/services/chatService');
 require('./src/services/videoSessions');
 require('./src/services/videoAuthService');
 require('./src/services/videoSocketService');
+require('./src/services/roomCameraSocketService');
 require('./src/services/logStreamService');
 require('./src/services/homeAssistantService');
 require('./src/services/sessionService');

server/public/index.html

@@ -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-Cy2FzgJN.js"></script>
+    <script type="module" crossorigin src="/assets/index-CnvHZcbU.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-B1UrCI1T.css">
   </head>
   <body>

server/src/services/roomCameraService.js

@@ -14,10 +14,15 @@ function normalizeCamera(camera) {
     logger.warn('Room camera missing id', camera);
     return null;
   }
+  if (!camera.url) {
+    logger.warn('Room camera missing url', { id, camera });
+    return null;
+  }
   return {
     id: String(id),
     name: camera.name || camera.id || String(id),
     description: camera.description || null,
+    url: camera.url,
   };
 }
 

server/src/services/roomCameraSnapshotService.js

@@ -0,0 +1,92 @@
+const EventEmitter = require('events');
+const logger = require('../globals/logger').child('roomCameraSnapshot');
+const { getRoomCameras, roomCameraEvents } = require('./roomCameraService');
+
+const POLL_INTERVAL_MS = 500; // 2 fps target
+const FETCH_TIMEOUT_MS = 2000;
+const STALE_AFTER_MS = 4000;
+
+const cameraState = new Map(); // id -> {frame, ts, stale, error, failures, fetching}
+const events = new EventEmitter(); // frame, status
+let pollTimer = null;
+
+function markState(id, updates = {}) {
+  const prev = cameraState.get(id) || {};
+  const next = { ...prev, ...updates };
+  if (next.ts != null) {
+    next.stale = Date.now() - next.ts > STALE_AFTER_MS || !!next.stale;
+  } else {
+    next.stale = true;
+  }
+  cameraState.set(id, next);
+  return next;
+}
+
+async function fetchSnapshot(camera) {
+  const { id, url } = camera;
+  const state = cameraState.get(id);
+  if (!url || state?.fetching) return;
+  markState(id, { fetching: true });
+  const abortController = new AbortController();
+  const timeout = setTimeout(() => abortController.abort(), FETCH_TIMEOUT_MS);
+  try {
+    const res = await fetch(url, { signal: abortController.signal });
+    if (!res.ok) {
+      throw new Error(`HTTP ${res.status}`);
+    }
+    const arrayBuffer = await res.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const ts = Date.now();
+    const next = markState(id, { frame: buffer, ts, error: null, failures: 0 });
+    events.emit('frame', { id, buffer, ts, stale: !!next.stale });
+  } catch (err) {
+    const failures = (state?.failures || 0) + 1;
+    markState(id, { error: err.message, failures });
+    events.emit('status', { id, error: err.message });
+    logger.warn('Snapshot fetch failed', { id, err: err.message });
+  } finally {
+    clearTimeout(timeout);
+    markState(id, { fetching: false });
+  }
+}
+
+function stopAll() {
+  if (pollTimer) {
+    clearInterval(pollTimer);
+    pollTimer = null;
+  }
+  cameraState.clear();
+}
+
+function startAll() {
+  stopAll();
+  pollTimer = setInterval(() => {
+    getRoomCameras().forEach((camera) => fetchSnapshot(camera));
+  }, POLL_INTERVAL_MS);
+  getRoomCameras().forEach((camera) => fetchSnapshot(camera));
+  logger.info('Started snapshot polling', { count: getRoomCameras().length });
+}
+
+function getState(id) {
+  const state = cameraState.get(id);
+  if (!state) return null;
+  const stale = state.ts == null || Date.now() - state.ts > STALE_AFTER_MS;
+  return {
+    frame: state.frame || null,
+    ts: state.ts || null,
+    stale,
+    error: state.error || null,
+  };
+}
+
+roomCameraEvents.on('update', () => {
+  logger.info('Room cameras changed; restarting snapshot pollers');
+  startAll();
+});
+
+startAll();
+
+module.exports = {
+  roomCameraStreamEvents: events,
+  getRoomCameraState: getState,
+};

server/src/services/roomCameraSocketService.js

@@ -0,0 +1,154 @@
+const io = require('../globals/io');
+const logger = require('../globals/logger').child('roomCameraSocket');
+const { getMode, MODES } = require('./modeManager');
+const { isAdmin, isLockdownAdmin, getRole } = require('./roleService');
+const { getRoomCamera, getRoomCameras } = require('./roomCameraService');
+const { roomCameraStreamEvents, getRoomCameraState } = require('./roomCameraSnapshotService');
+
+const SUBSCRIBE_LIMIT = 50;
+const SUBSCRIBE_WINDOW_MS = 10000;
+
+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 canViewRoomCamera(socket) {
+  return passesMode(socket);
+}
+
+const cameraSubscribers = new Map(); // id -> Set(socketId)
+const socketSubscriptions = new Map(); // socketId -> Set(id)
+const subscribeBuckets = new Map(); // socketId -> { start, count }
+
+function addSubscription(socket, cameraId) {
+  if (!cameraSubscribers.has(cameraId)) {
+    cameraSubscribers.set(cameraId, new Set());
+  }
+  cameraSubscribers.get(cameraId).add(socket.id);
+
+  if (!socketSubscriptions.has(socket.id)) {
+    socketSubscriptions.set(socket.id, new Set());
+  }
+  socketSubscriptions.get(socket.id).add(cameraId);
+}
+
+function removeSubscription(socketId, cameraId) {
+  const bucket = cameraSubscribers.get(cameraId);
+  if (bucket) {
+    bucket.delete(socketId);
+    if (bucket.size === 0) {
+      cameraSubscribers.delete(cameraId);
+    }
+  }
+  const socketBucket = socketSubscriptions.get(socketId);
+  if (socketBucket) {
+    socketBucket.delete(cameraId);
+    if (socketBucket.size === 0) {
+      socketSubscriptions.delete(socketId);
+    }
+  }
+}
+
+function removeAllSubscriptions(socketId) {
+  const bucket = socketSubscriptions.get(socketId);
+  if (!bucket) return;
+  bucket.forEach((cameraId) => removeSubscription(socketId, cameraId));
+}
+
+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, cameraId, payload, buffer) {
+  socket.emit('roomCamera:frame', { id: cameraId, ...payload }, buffer);
+}
+
+function sendStatus(socket, cameraId, status) {
+  socket.emit('roomCamera:status', { id: cameraId, ...status });
+}
+
+roomCameraStreamEvents.on('frame', ({ id, buffer, ts, stale }) => {
+  const bucket = cameraSubscribers.get(id);
+  if (!bucket || !buffer) return;
+  bucket.forEach((socketId) => {
+    const socket = io.sockets.sockets.get(socketId);
+    if (!socket) return;
+    sendFrame(socket, id, { ts, stale: !!stale }, buffer);
+  });
+});
+
+roomCameraStreamEvents.on('status', ({ id, error }) => {
+  const bucket = cameraSubscribers.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('roomCamera:subscribe', (payload = {}, cb = () => {}) => {
+    const list = Array.isArray(payload?.ids)
+      ? payload.ids.map(String)
+      : payload?.roomCameraId || payload?.id
+      ? [String(payload.roomCameraId || payload.id)]
+      : getRoomCameras().map((cam) => cam.id);
+    const uniqueIds = Array.from(new Set(list));
+    try {
+      if (!allowSubscribe(socket.id)) {
+        cb({ error: 'Rate limited' });
+        return;
+      }
+      if (!canViewRoomCamera(socket)) {
+        throw new Error('Not authorized for room camera');
+      }
+      const validIds = uniqueIds.filter((id) => !!getRoomCamera(id));
+      validIds.forEach((cameraId) => addSubscription(socket, cameraId));
+      validIds.forEach((cameraId) => {
+        const state = getRoomCameraState(cameraId);
+        if (state?.frame) {
+          sendFrame(socket, cameraId, { ts: state.ts, stale: !!state.stale }, state.frame);
+        }
+        sendStatus(socket, cameraId, {
+          ts: state?.ts || null,
+          stale: state?.stale ?? true,
+          error: state?.error || null,
+        });
+      });
+      cb({ ok: true, subscribed: validIds });
+    } catch (err) {
+      logger.warn('Room camera subscribe failed', { socketId: socket.id, err: err.message });
+      cb({ error: err.message });
+    }
+  });
+
+  socket.on('roomCamera:unsubscribe', (payload = {}) => {
+    const list = Array.isArray(payload?.ids)
+      ? payload.ids.map(String)
+      : payload?.roomCameraId || payload?.id
+      ? [String(payload.roomCameraId || payload.id)]
+      : [];
+    list.forEach((cameraId) => removeSubscription(socket.id, cameraId));
+  });
+
+  socket.on('disconnect', () => {
+    removeAllSubscriptions(socket.id);
+    subscribeBuckets.delete(socket.id);
+  });
+});

server/src/services/videoSocketService.js

@@ -4,7 +4,6 @@ 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();
@@ -94,12 +93,7 @@ io.on('connection', (socket) => {
           throw new Error('Not authorized for video');
         }
       } else if (target.type === 'room') {
-        if (!getRoomCamera(target.id)) {
-          throw new Error('Unknown room camera');
-        }
-        if (!canViewRoomCamera(socket)) {
-          throw new Error('Not authorized for room camera');
-        }
+        throw new Error('Room cameras now use the snapshot feed');
       } else {
         throw new Error('Unsupported video source');
       }

server/systemd/room-camera.service

@@ -1,27 +0,0 @@
-[Unit]
-Description=Room camera SRT publisher (ensures mic capture unmuted)
-After=network-online.target
-Wants=network-online.target
-
-[Service]
-Type=simple
-# Some USB mics only expose a single "Mic" control; don't fail if a control is missing.
-ExecStartPre=/usr/bin/sh -c "/usr/bin/amixer -q -c 0 sset 'Mic Capture Switch' cap || /usr/bin/true"
-ExecStartPre=/usr/bin/sh -c "/usr/bin/amixer -q -c 0 sset 'Mic Capture Volume' 100% || /usr/bin/amixer -q -c 0 sset 'Mic' 100% cap || /usr/bin/true"
-ExecStart=/usr/bin/ffmpeg \
-  -fflags nobuffer -rtbufsize 0 -probesize 32 -analyzeduration 0 -use_wallclock_as_timestamps 1 \
-  -thread_queue_size 256 -f v4l2 -input_format h264 -i /dev/video2 \
-  -fflags nobuffer -thread_queue_size 256 -f alsa -ar 16000 -ac 2 -i hw:0,0 \
-  -map 0:v:0 -map 1:a:0 \
-  -c:v libx264 -preset ultrafast -tune zerolatency -flags +low_delay \
-  -b:v 600k -maxrate 700k -bufsize 700k -g 30 -bf 0 -x264-params keyint=30:min-keyint=30:scenecut=0 \
-  -c:a libopus -b:a 64k -ar 16000 -ac 1 \
-  -flush_packets 1 -f mpegts \
-  srt://192.168.0.86:9000?streamid=#!::r=room/carpet,m=publish&latency=10&mode=caller&transtype=live&pkt_size=1316
-Restart=always
-RestartSec=2
-User=root
-Group=root
-
-[Install]
-WantedBy=multi-user.target

webui/src/components/RoomCameraFeed.jsx

@@ -1,145 +1,25 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { WhepPlayer } from '../lib/whepPlayer.js';
+import { useMemo } from 'react';
 
-const RESTART_DELAY_MS = 2000;
-const UNMUTE_RETRY_MS = 3000;
-
-export default function RoomCameraFeed({ sessionInfo, label }) {
-  const videoRef = useRef(null);
-  const restartTimer = useRef(null);
-  const unmuteTimer = useRef(null);
-  const [status, setStatus] = useState('idle');
-  const [detail, setDetail] = useState(null);
-  const [restartToken, setRestartToken] = useState(0);
-  const [muted, setMuted] = useState(true);
-
-  const scheduleRestart = useCallback(() => {
-    clearTimeout(restartTimer.current);
-    restartTimer.current = setTimeout(() => setRestartToken(Date.now()), RESTART_DELAY_MS);
-  }, []);
-
-  const ensurePlayback = useCallback(async () => {
-    const video = videoRef.current;
-    if (!video) return;
-    try {
-      video.muted = true;
-      await video.play();
-    } catch {
-      // Autoplay might be blocked; retry later.
-    }
-  }, []);
-
-  const attemptUnmute = useCallback(
-    (delay = 0) => {
-      clearTimeout(unmuteTimer.current);
-
-      const scheduleRetry = () => {
-        clearTimeout(unmuteTimer.current);
-        unmuteTimer.current = setTimeout(() => {
-          tryPlay();
-        }, UNMUTE_RETRY_MS);
-      };
-
-      const tryPlay = async () => {
-        const video = videoRef.current;
-        if (!video) return;
-        try {
-          await ensurePlayback();
-          video.muted = false;
-          await video.play();
-          setMuted(false);
-        } catch {
-          video.muted = true;
-          setMuted(true);
-          scheduleRetry();
-        }
-      };
-
-      unmuteTimer.current = setTimeout(tryPlay, delay);
-    },
-    [ensurePlayback],
-  );
-
-  useEffect(
-    () => () => {
-      clearTimeout(restartTimer.current);
-      clearTimeout(unmuteTimer.current);
-    },
-    [],
-  );
-
-  useEffect(() => {
-    if (!sessionInfo?.url || !videoRef.current) {
-      return undefined;
-    }
-    let active = true;
-    let player;
-    const resetMuteId = setTimeout(() => setMuted(true), 0);
-    const handleStatus = (nextStatus, info) => {
-      if (!active) return;
-      setStatus(nextStatus);
-      setDetail(info || null);
-      if (nextStatus === 'playing') {
-        ensurePlayback();
-        attemptUnmute(0);
-      }
-      if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
-        scheduleRestart();
-      }
-    };
-
-    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);
-      scheduleRestart();
-    });
-
-    return () => {
-      active = false;
-      clearTimeout(resetMuteId);
-      player?.stop();
-    };
-  }, [sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback, attemptUnmute]);
-
-  useEffect(() => {
-    if (status === 'stopped' && sessionInfo?.url) {
-      scheduleRestart();
-    }
-  }, [status, sessionInfo?.url, scheduleRestart]);
-
-  const renderedStatus = sessionInfo?.error
-    ? `Error: ${sessionInfo.error}`
-    : !sessionInfo?.url
-    ? 'Waiting for stream session'
-    : status === 'error'
-    ? `Error: ${detail || 'unknown'}`
-    : detail
-    ? `${status} (${detail})`
-    : status;
+export default function RoomCameraFeed({ feed, label }) {
+  const statusText = useMemo(() => {
+    if (!feed) return 'Connecting…';
+    if (feed.error) return `Error: ${feed.error}`;
+    if (feed.status === 'playing' && feed.stale) return 'Stale frame';
+    return feed.status || 'Connecting…';
+  }, [feed]);
 
   return (
-    <div className="relative aspect-video w-full overflow-hidden rounded bg-black">
-      <video
-        ref={videoRef}
-        muted={muted}
-        playsInline
-        autoPlay
-        controls={false}
-        className="h-full w-full object-cover"
-      />
+    <div className="relative w-full overflow-hidden rounded bg-black" style={{ aspectRatio: '4 / 3' }}>
+      {feed?.objectUrl ? (
+        <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="pointer-events-none absolute left-0 top-0 bg-black/70 px-0.5 py-0.5 text-xs font-semibold text-white">
         {label}
       </div>
       <div className="pointer-events-none absolute bottom-0 left-0 m-0.5 rounded bg-black/70 px-0.5 py-0.25 text-[0.7rem] text-slate-100">
-        {renderedStatus}
+        {statusText}
       </div>
     </div>
   );

webui/src/components/RoomCameraPanel.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
-import { useVideoRequests } from '../hooks/useVideoRequests.js';
 import { useSettingsNamespace } from '../settings/index.js';
+import { useRoomCameraSnapshots } from '../hooks/useRoomCameraSnapshots.js';
 import RoomCameraFeed from './RoomCameraFeed.jsx';
 
 function EmptyState() {
@@ -31,8 +31,7 @@ export default function RoomCameraPanel({
 }) {
   const { session } = useSession();
   const cameras = session?.roomCameras || [];
-  const sourceDescriptors = cameras.map((camera) => ({ type: 'room', id: camera.id, key: `room:${camera.id}` }));
-  const videoSources = useVideoRequests(sourceDescriptors);
+  const feedMap = useRoomCameraSnapshots(cameras.map((camera) => ({ id: camera.id })));
   const { value: orientationSettings, save: saveOrientationSettings } = useSettingsNamespace('roomCameraPanels', {});
   const [orientation, setOrientation] = useState(() =>
     normalizeOrientation(
@@ -94,15 +93,14 @@ export default function RoomCameraPanel({
       )}
       <div className={containerClass}>
         {cameras.map((camera) => {
-          const key = `room:${camera.id}`;
-          const sessionInfo = videoSources[key];
+          const feed = feedMap[camera.id] || 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 sessionInfo={sessionInfo} label={camera.name || camera.id} />
+              <RoomCameraFeed feed={feed} label={camera.name || camera.id} />
             </article>
           );
         })}

webui/src/hooks/useRoomCameraSnapshots.js

@@ -0,0 +1,113 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useSocket } from '../context/SocketContext.jsx';
+
+export function useRoomCameraSnapshots(sourceList = []) {
+  const socket = useSocket();
+  const [feeds, setFeeds] = useState({});
+  const objectUrls = useRef(new Map());
+  const ids = useMemo(() => sourceList.map((e) => (typeof e === 'string' ? e : e.id)), [sourceList]);
+  const idsKey = useMemo(() => ids.join('|'), [ids]);
+  const idsRef = useRef([]);
+  const retryTimer = useRef(null);
+
+  useEffect(() => {
+    idsRef.current = ids;
+  }, [idsKey, ids]);
+
+  useEffect(() => {
+    objectUrls.current.forEach((url) => URL.revokeObjectURL(url));
+    objectUrls.current.clear();
+    setFeeds({});
+    if (retryTimer.current) {
+      clearTimeout(retryTimer.current);
+      retryTimer.current = null;
+    }
+  }, [idsKey]);
+
+  useEffect(() => {
+    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',
+          stale: !!meta.stale,
+          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,
+          stale: meta.stale ?? prev[meta.id]?.stale ?? true,
+          ts: meta.ts || prev[meta.id]?.ts || null,
+          objectUrl: prev[meta.id]?.objectUrl || null,
+        },
+      }));
+      if (meta.error && !cancelled) {
+        scheduleRetry();
+      }
+    };
+
+    const scheduleRetry = (delay = 5000) => {
+      if (retryTimer.current) {
+        clearTimeout(retryTimer.current);
+      }
+      retryTimer.current = setTimeout(() => {
+        retryTimer.current = null;
+        if (!cancelled) {
+          socket.emit('roomCamera:subscribe', { ids: currentIds }, (resp = {}) => {
+            if (resp.error && !retryTimer.current) {
+              scheduleRetry();
+            }
+          });
+        }
+      }, delay);
+    };
+
+    socket.on('roomCamera:frame', handleFrame);
+    socket.on('roomCamera:status', handleStatus);
+
+    socket.emit('roomCamera:subscribe', { ids: currentIds }, (resp = {}) => {
+      if (resp.error) {
+        scheduleRetry();
+      }
+    });
+
+    return () => {
+      cancelled = true;
+      socket.emit('roomCamera:unsubscribe', { ids: currentIds });
+      socket.off('roomCamera:frame', handleFrame);
+      socket.off('roomCamera:status', handleStatus);
+      objectUrls.current.forEach((url) => URL.revokeObjectURL(url));
+      objectUrls.current.clear();
+      if (retryTimer.current) {
+        clearTimeout(retryTimer.current);
+        retryTimer.current = null;
+      }
+    };
+  }, [socket, idsKey]);
+
+  return feeds;
+}