legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

low quality preview for non-drivers

Browse Source
This commit is contained in:
legop3
2026-01-13 01:45:15 -05:00
parent 56b89b5dff
commit c265121335
14 changed files with 551 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/index.js
+1
View File
@@ -21,6 +21,7 @@ require('./src/services/videoSessions');
require('./src/services/videoAuthService'); require('./src/services/videoAuthService');
require('./src/services/videoSocketService'); require('./src/services/videoSocketService');
require('./src/services/roomCameraSocketService'); require('./src/services/roomCameraSocketService');
require('./src/services/roverSnapshotSocketService');
require('./src/services/embedHttpService'); require('./src/services/embedHttpService');
require('./src/services/logStreamService'); require('./src/services/logStreamService');
require('./src/services/homeAssistantService'); require('./src/services/homeAssistantService');
server/install_server.sh
+9
View File
@@ -6,6 +6,7 @@ MEDIAMTX_BASE_URL="https://github.com/bluenviron/mediamtx/releases/download/v${M
MEDIAMTX_BIN="/usr/local/bin/mediamtx" MEDIAMTX_BIN="/usr/local/bin/mediamtx"
MEDIAMTX_CONF_DIR="/etc/mediamtx" MEDIAMTX_CONF_DIR="/etc/mediamtx"
MEDIAMTX_CONFIG="$MEDIAMTX_CONF_DIR/mediamtx.yml" MEDIAMTX_CONFIG="$MEDIAMTX_CONF_DIR/mediamtx.yml"
MEDIAMTX_SNAPSHOT_SCRIPT="$MEDIAMTX_CONF_DIR/rover-snapshot.sh"
MEDIAMTX_SERVICE="/etc/systemd/system/mediamtx.service" MEDIAMTX_SERVICE="/etc/systemd/system/mediamtx.service"
MULTIROVER_SERVICE="/etc/systemd/system/multirover.service" MULTIROVER_SERVICE="/etc/systemd/system/multirover.service"
@@ -24,6 +25,7 @@ SCRIPT_DIR=$(cd "$(dirname "$0")" && pwd)
SERVER_DIR="$SCRIPT_DIR" SERVER_DIR="$SCRIPT_DIR"
CONFIG_PATH="$SERVER_DIR/config.yaml" CONFIG_PATH="$SERVER_DIR/config.yaml"
MEDIAMTX_TEMPLATE="$SERVER_DIR/mediamtx/mediamtx.yml" MEDIAMTX_TEMPLATE="$SERVER_DIR/mediamtx/mediamtx.yml"
MEDIAMTX_SNAPSHOT_TEMPLATE="$SERVER_DIR/mediamtx/rover-snapshot.sh"
echo "[1/6] Installing dependencies..." echo "[1/6] Installing dependencies..."
dnf install -y nodejs npm curl tar >/dev/null dnf install -y nodejs npm curl tar >/dev/null
@@ -71,6 +73,13 @@ fi
echo " Installing mediaMTX config -> $MEDIAMTX_CONFIG" echo " Installing mediaMTX config -> $MEDIAMTX_CONFIG"
rm -f "$MEDIAMTX_CONFIG" rm -f "$MEDIAMTX_CONFIG"
install -m 0644 "$MEDIAMTX_TEMPLATE" "$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" chown -R "$TARGET_USER":"$TARGET_USER" "$MEDIAMTX_CONF_DIR"
echo "[4/6] Writing systemd units..." echo "[4/6] Writing systemd units..."
server/mediamtx/mediamtx.yml
+1
View File
@@ -42,3 +42,4 @@ paths:
all: all:
source: publisher source: publisher
sourceOnDemand: no sourceOnDemand: no
runOnReady: /etc/mediamtx/rover-snapshot.sh
server/mediamtx/rover-snapshot.sh
+32
View File
@@ -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}"
server/public/assets/index-ClyuL_YR.js
+12
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-DNGguoJu.js
-12
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+1 -1
View File
@@ -11,7 +11,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title> <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"> <link rel="stylesheet" crossorigin href="/assets/index-COnIgwcF.css">
</head> </head>
<body> <body>
server/src/services/roverSnapshotService.js
+94
View File
@@ -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,
};
server/src/services/roverSnapshotSocketService.js
+168
View File
@@ -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);
});
});
webui/src/components/DriverVideoPanel.jsx
+39 -2
View File
@@ -1,6 +1,8 @@
import { useEffect, useMemo, useState } from 'react';
import { useSession } from '../context/SessionContext.jsx'; import { useSession } from '../context/SessionContext.jsx';
import { useTelemetryFrame } from '../context/TelemetryContext.jsx'; import { useTelemetryFrame } from '../context/TelemetryContext.jsx';
import { useVideoRequests } from '../hooks/useVideoRequests.js'; import { useVideoRequests } from '../hooks/useVideoRequests.js';
import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
import { useControlSystem } from '../controls/index.js'; import { useControlSystem } from '../controls/index.js';
import VideoTile from './VideoTile.jsx'; import VideoTile from './VideoTile.jsx';
@@ -9,19 +11,51 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
const { const {
state: { song }, state: { song },
} = useControlSystem(); } = 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 roverId = session?.assignment?.roverId;
const rosterEntry = const rosterEntry =
roverId && session?.roster ? session.roster.find((item) => String(item.id) === String(roverId)) : null; roverId && session?.roster ? session.roster.find((item) => String(item.id) === String(roverId)) : null;
const hasAudio = Boolean(rosterEntry?.media?.audioPublishUrl); 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 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` }] : []), ...(hasAudio ? [{ type: 'rover', id: `${roverId}-audio`, key: `${roverId}-audio` }] : []),
] ]
: []; : [];
const sources = useVideoRequests(entries); 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 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 frame = useTelemetryFrame(roverId);
const batteryRecord = const batteryRecord =
roverId && session?.roster roverId && session?.roster
@@ -36,12 +70,15 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
{roverId ? ( {roverId ? (
<VideoTile <VideoTile
sessionInfo={info} sessionInfo={info}
videoMode={shouldShowVideo ? 'whep' : 'snapshot'}
snapshotFeed={snapshotFeed}
audioSessionInfo={audioInfo} audioSessionInfo={audioInfo}
label={roverLabel} label={roverLabel}
telemetryFrame={frame} telemetryFrame={frame}
batteryConfig={batteryConfig} batteryConfig={batteryConfig}
layoutFormat={layoutFormat} layoutFormat={layoutFormat}
songNote={song?.note} 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"> <div className="panel-muted content-center text-center text-sm text-slate-400 aspect-video">
webui/src/components/VideoTile.jsx
+49 -11
View File
@@ -45,6 +45,9 @@ function buildBatteryVisual(charge, config) {
export default function VideoTile({ export default function VideoTile({
sessionInfo, sessionInfo,
audioSessionInfo, audioSessionInfo,
videoMode = 'whep',
snapshotFeed = null,
qualityNotice = null,
label, label,
forceMute = false, forceMute = false,
telemetryFrame, telemetryFrame,
@@ -70,6 +73,7 @@ export default function VideoTile({
const [restartToken, setRestartToken] = useState(0); const [restartToken, setRestartToken] = useState(0);
const [audioRestartToken, setAudioRestartToken] = useState(0); const [audioRestartToken, setAudioRestartToken] = useState(0);
const [muted, setMuted] = useState(true); const [muted, setMuted] = useState(true);
const usingSnapshot = videoMode === 'snapshot';
const sensors = telemetryFrame?.sensors; const sensors = telemetryFrame?.sensors;
const batteryCharge = sensors?.batteryChargeMah ?? null; const batteryCharge = sensors?.batteryChargeMah ?? null;
const desktopLayout = layoutFormat === 'desktop'; const desktopLayout = layoutFormat === 'desktop';
@@ -162,7 +166,14 @@ export default function VideoTile({
}, [status, attemptUnmute]); }, [status, attemptUnmute]);
useEffect(() => { useEffect(() => {
if (!sessionInfo?.url || !videoRef.current) { if (usingSnapshot) {
setStatus('snapshot');
setDetail(null);
}
}, [usingSnapshot]);
useEffect(() => {
if (usingSnapshot || !sessionInfo?.url || !videoRef.current) {
return undefined; return undefined;
} }
let active = true; let active = true;
@@ -199,7 +210,7 @@ export default function VideoTile({
clearTimeout(resetMuteId); clearTimeout(resetMuteId);
player?.stop(); player?.stop();
}; };
}, [sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback]); }, [usingSnapshot, sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback]);
useEffect(() => { useEffect(() => {
if (status === 'stopped' && sessionInfo?.url) { if (status === 'stopped' && sessionInfo?.url) {
@@ -329,7 +340,14 @@ export default function VideoTile({
}; };
}, [audioSessionInfo?.url]); }, [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' ? 'waiting'
: status === 'error' : status === 'error'
? `Error: ${detail || 'unknown'}` ? `Error: ${detail || 'unknown'}`
@@ -352,14 +370,29 @@ export default function VideoTile({
<div <div
className={`relative w-full overflow-hidden bg-black ${fitParent ? 'h-full flex-1' : 'aspect-video'}`} className={`relative w-full overflow-hidden bg-black ${fitParent ? 'h-full flex-1' : 'aspect-video'}`}
> >
<video {usingSnapshot ? (
ref={videoRef} snapshotFeed?.objectUrl ? (
muted={forceMute || muted} <img
playsInline src={snapshotFeed.objectUrl}
autoPlay alt={label}
controls={false} className="h-full w-full object-contain"
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 /> <audio ref={audioRef} autoPlay hidden />
<HudOverlay <HudOverlay
frame={telemetryFrame} frame={telemetryFrame}
@@ -382,6 +415,11 @@ export default function VideoTile({
{showVerticalBattery && batteryVisual.available ? ( {showVerticalBattery && batteryVisual.available ? (
<BatteryBarVertical visual={batteryVisual} /> <BatteryBarVertical visual={batteryVisual} />
) : null} ) : 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> </div>
{!showVerticalBattery && ( {!showVerticalBattery && (
<div className="space-y-0.25"> <div className="space-y-0.25">
webui/src/hooks/useRoverSnapshots.js
+102
View File
@@ -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;
}
webui/src/mini/MiniSummaryApp.jsx
+17 -18
View File
@@ -3,6 +3,7 @@ import { SettingsProvider } from '../settings/index.js';
import { useSession } from '../context/SessionContext.jsx'; import { useSession } from '../context/SessionContext.jsx';
import { useTelemetryFrames } from '../context/TelemetryContext.jsx'; import { useTelemetryFrames } from '../context/TelemetryContext.jsx';
import { useVideoRequests } from '../hooks/useVideoRequests.js'; import { useVideoRequests } from '../hooks/useVideoRequests.js';
import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
import { useSpectatorMode } from '../hooks/useSpectatorMode.js'; import { useSpectatorMode } from '../hooks/useSpectatorMode.js';
import { useRoomCameraSnapshots } from '../hooks/useRoomCameraSnapshots.js'; import { useRoomCameraSnapshots } from '../hooks/useRoomCameraSnapshots.js';
import VideoTile from '../components/VideoTile.jsx'; import VideoTile from '../components/VideoTile.jsx';
@@ -33,30 +34,26 @@ function MiniSummaryContent() {
}); });
const [index, setIndex] = useState(0); 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) => { roster.flatMap((rover) => {
if (!rover?.id) return []; if (!rover?.id || !rover.media?.audioPublishUrl) return [];
const id = String(rover.id); const id = String(rover.id);
const base = [{ type: 'rover', id, key: id }]; return [{ type: 'rover', id: `${id}-audio`, key: `${id}-audio` }];
if (rover.media?.audioPublishUrl) {
base.push({ type: 'rover', id: `${id}-audio`, key: `${id}-audio` });
}
return base;
}), }),
[roster], [roster],
); );
const audioSources = useVideoRequests(audioEntries, { enabled: !inLockdown, version: session?.mode });
const videoSourcesEnabled = useVideoRequests(entries, {
enabled: !inLockdown,
version: session?.mode,
});
const roverPool = useMemo(() => { const roverPool = useMemo(() => {
if (!roster.length) return []; if (!roster.length) return [];
const withVideo = roster.filter((rover) => videoSourcesEnabled[rover.id]?.url); const withSnapshot = roster.filter((rover) => snapshotFeeds[rover.id]?.objectUrl);
return withVideo.length ? withVideo : roster; return withSnapshot.length ? withSnapshot : roster;
}, [roster, videoSourcesEnabled]); }, [roster, snapshotFeeds]);
const rotationPool = useMemo(() => { const rotationPool = useMemo(() => {
const items = []; const items = [];
@@ -91,8 +88,8 @@ function MiniSummaryContent() {
const activeRover = activeEntry?.type === 'rover' ? activeEntry.rover : null; const activeRover = activeEntry?.type === 'rover' ? activeEntry.rover : null;
const activeCamera = activeEntry?.type === 'room' ? activeEntry.camera : null; const activeCamera = activeEntry?.type === 'room' ? activeEntry.camera : null;
const activeVideo = activeRover ? videoSourcesEnabled[activeRover.id] || null : null; const activeSnapshot = activeRover ? snapshotFeeds[activeRover.id] || null : null;
const activeAudio = activeRover ? videoSourcesEnabled[`${activeRover.id}-audio`] || null : null; const activeAudio = activeRover ? audioSources[`${activeRover.id}-audio`] || null : null;
const activeFrame = activeRover ? frames[activeRover.id] || null : null; const activeFrame = activeRover ? frames[activeRover.id] || null : null;
const driverLabel = activeRover ? formatDriverLabel({ roverId: activeRover.id, session }) : null; const driverLabel = activeRover ? formatDriverLabel({ roverId: activeRover.id, session }) : null;
const activeFeed = activeCamera ? feeds[activeCamera.id] || null : null; const activeFeed = activeCamera ? feeds[activeCamera.id] || null : null;
@@ -119,7 +116,9 @@ function MiniSummaryContent() {
) : activeRover ? ( ) : activeRover ? (
<FitViewportFrame> <FitViewportFrame>
<VideoTile <VideoTile
sessionInfo={activeVideo} sessionInfo={null}
videoMode="snapshot"
snapshotFeed={activeSnapshot}
audioSessionInfo={activeAudio} audioSessionInfo={activeAudio}
label={activeRover.name || activeRover.id} label={activeRover.name || activeRover.id}
telemetryFrame={activeFrame} telemetryFrame={activeFrame}
webui/src/spectate/SpectatorApp.jsx
+25 -14
View File
@@ -3,6 +3,7 @@ import { useSession } from '../context/SessionContext.jsx';
import { useSpectatorMode } from '../hooks/useSpectatorMode.js'; import { useSpectatorMode } from '../hooks/useSpectatorMode.js';
import { useTelemetryFrames } from '../context/TelemetryContext.jsx'; import { useTelemetryFrames } from '../context/TelemetryContext.jsx';
import { useVideoRequests } from '../hooks/useVideoRequests.js'; import { useVideoRequests } from '../hooks/useVideoRequests.js';
import { useRoverSnapshots } from '../hooks/useRoverSnapshots.js';
import VideoTile from '../components/VideoTile.jsx'; import VideoTile from '../components/VideoTile.jsx';
import RoomCameraPanel from '../components/RoomCameraPanel.jsx'; import RoomCameraPanel from '../components/RoomCameraPanel.jsx';
import UserListPanel from '../components/UserListPanel.jsx'; import UserListPanel from '../components/UserListPanel.jsx';
@@ -22,13 +23,15 @@ function formatDriverLabel({ roverId, session }) {
return driverText; return driverText;
} }
function RoverSpectatorCard({ rover, frame, videoInfo, audioInfo, session }) { function RoverSpectatorCard({ rover, frame, snapshotFeed, audioInfo, session }) {
const driverLabel = formatDriverLabel({ roverId: rover.id, session }); const driverLabel = formatDriverLabel({ roverId: rover.id, session });
return ( return (
<article className="min-h-[16rem] rounded bg-zinc-900 p-0.5 sm:min-h-[18rem]"> <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"> <div className="min-h-0 overflow-hidden rounded bg-black/20">
<VideoTile <VideoTile
sessionInfo={videoInfo} sessionInfo={null}
videoMode="snapshot"
snapshotFeed={snapshotFeed}
audioSessionInfo={audioInfo} audioSessionInfo={audioInfo}
label={rover.name} label={rover.name}
telemetryFrame={frame} 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) { if (roster.length === 0) {
return <p className="col-span-full text-slate-400">No rovers registered.</p>; 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} key={rover.id}
rover={rover} rover={rover}
frame={frames[rover.id]} frame={frames[rover.id]}
videoInfo={videoSources[rover.id]} snapshotFeed={snapshotFeeds[rover.id]}
audioInfo={videoSources[`${rover.id}-audio`]} audioInfo={audioSources[`${rover.id}-audio`]}
session={session} session={session}
showHudMap showHudMap
hudMapPosition="bottom-left" hudMapPosition="bottom-left"
@@ -94,14 +97,16 @@ export default function SpectatorApp() {
useSpectatorMode(); useSpectatorMode();
const frames = useTelemetryFrames(); const frames = useTelemetryFrames();
const roster = session?.roster ?? []; const roster = session?.roster ?? [];
const entries = roster.flatMap((rover) => { const snapshotFeeds = useRoverSnapshots(
const base = { type: 'rover', id: rover.id, key: rover.id }; roster.map((rover) => rover.id),
if (rover.media?.audioPublishUrl) { { enabled: !inLockdown, version: session?.mode },
return [base, { type: 'rover', id: `${rover.id}-audio`, key: `${rover.id}-audio` }]; );
} const audioEntries = roster.flatMap((rover) =>
return [base]; rover.media?.audioPublishUrl
}); ? [{ type: 'rover', id: `${rover.id}-audio`, key: `${rover.id}-audio` }]
const videoSources = useVideoRequests(entries, { enabled: !inLockdown, version: session?.mode }); : [],
);
const audioSources = useVideoRequests(audioEntries, { enabled: !inLockdown, version: session?.mode });
if (inLockdown) { if (inLockdown) {
return ( 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"> <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]"> <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"> <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 /> <SecondaryRow />
</section> </section>
<section className="flex min-h-0 min-w-0 flex-col gap-0.5 md:h-full"> <section className="flex min-h-0 min-w-0 flex-col gap-0.5 md:h-full">