local spectators get real video maybe if it works

This commit is contained in:
legop3
2026-01-30 21:53:02 -05:00
parent a5f33c0a92
commit bdb4f41e93
9 changed files with 242 additions and 138 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+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-CT2FRsnB.js"></script> <script type="module" crossorigin src="/assets/index-Bmhgw8c6.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C9Dx14Sy.css"> <link rel="stylesheet" crossorigin href="/assets/index-C9Dx14Sy.css">
</head> </head>
<body> <body>
+54
View File
@@ -1,3 +1,5 @@
const net = require('net');
function extractForwardedIp(value) { function extractForwardedIp(value) {
if (typeof value === 'string' && value.trim()) { if (typeof value === 'string' && value.trim()) {
return value.split(',')[0].trim(); return value.split(',')[0].trim();
@@ -8,6 +10,56 @@ function extractForwardedIp(value) {
return null; return null;
} }
function normalizeIp(value) {
if (!value) return null;
let ip = String(value).trim();
if (!ip) return null;
if (ip.startsWith('::ffff:')) {
ip = ip.slice(7);
}
if (ip.includes('%')) {
ip = ip.split('%')[0];
}
return ip.trim() || null;
}
function isPrivateIpv4(ip) {
const parts = ip.split('.').map((part) => Number(part));
if (parts.length !== 4 || parts.some((part) => Number.isNaN(part))) {
return false;
}
const [a, b] = parts;
if (a === 10) return true;
if (a === 127) return true;
if (a === 192 && b === 168) return true;
return a === 172 && b >= 16 && b <= 31;
}
function isPrivateIpv6(ip) {
const lower = ip.toLowerCase();
if (lower === '::1') return true;
if (lower.startsWith('fc') || lower.startsWith('fd')) return true; // fc00::/7
return (
lower.startsWith('fe8') ||
lower.startsWith('fe9') ||
lower.startsWith('fea') ||
lower.startsWith('feb')
); // fe80::/10
}
function isLocalNetwork(ip) {
const normalized = normalizeIp(ip);
if (!normalized) return false;
const version = net.isIP(normalized);
if (version === 4) {
return isPrivateIpv4(normalized);
}
if (version === 6) {
return isPrivateIpv6(normalized);
}
return false;
}
function getSocketIp(socket) { function getSocketIp(socket) {
if (!socket) return null; if (!socket) return null;
const headers = socket.handshake?.headers || {}; const headers = socket.handshake?.headers || {};
@@ -42,4 +94,6 @@ function getRequestIp(req, override) {
module.exports = { module.exports = {
getSocketIp, getSocketIp,
getRequestIp, getRequestIp,
isLocalNetwork,
normalizeIp,
}; };
+2
View File
@@ -16,6 +16,7 @@ const { loadConfig } = require('../helpers/configLoader');
const { getCommunityGoal } = require('./communityGoalService'); const { getCommunityGoal } = require('./communityGoalService');
const { getAdminReason } = require('./adminReasonService'); const { getAdminReason } = require('./adminReasonService');
const { subscribe } = require('./eventBus'); const { subscribe } = require('./eventBus');
const { getSocketIp, isLocalNetwork } = require('../helpers/ipResolver');
const config = loadConfig(); const config = loadConfig();
const discordInvite = config.discord?.invite || null; const discordInvite = config.discord?.invite || null;
@@ -52,6 +53,7 @@ function buildSession(socket) {
socketId: socket?.id || null, socketId: socket?.id || null,
role: getRole(socket), role: getRole(socket),
mode: getMode(), mode: getMode(),
isLocalNetwork: isLocalNetwork(getSocketIp(socket)),
roster: roverManager.getRoster(), roster: roverManager.getRoster(),
assignment: assignmentService.describeAssignment(socket?.id || ''), assignment: assignmentService.describeAssignment(socket?.id || ''),
activeDrivers: getActiveDrivers(), activeDrivers: getActiveDrivers(),
+8 -1
View File
@@ -6,7 +6,7 @@ const { getMode, MODES } = require('./modeManager');
const { isAdmin, isLockdownAdmin, getRole } = require('./roleService'); const { isAdmin, isLockdownAdmin, getRole } = require('./roleService');
const roverManager = require('./roverManager'); const roverManager = require('./roverManager');
const { loadConfig } = require('../helpers/configLoader'); const { loadConfig } = require('../helpers/configLoader');
const { getRequestIp } = require('../helpers/ipResolver'); const { getRequestIp, getSocketIp, isLocalNetwork } = require('../helpers/ipResolver');
const { logAdminEvent } = require('./adminLogService'); const { logAdminEvent } = require('./adminLogService');
const config = loadConfig(); const config = loadConfig();
@@ -114,6 +114,13 @@ app.post('/mediamtx/auth', (req, res) => {
return res.status(401).end(); return res.status(401).end();
} }
const role = getRole(socket); const role = getRole(socket);
const isAudio = streamInfo.id?.endsWith('-audio');
if (role === 'spectator' && !isAdmin(socket) && !isAudio) {
const socketIp = getSocketIp(socket);
if (!isLocalNetwork(socketIp)) {
return res.status(401).end();
}
}
if (streamInfo.type === 'rover' && role !== 'spectator' && !isAdmin(socket)) { if (streamInfo.type === 'rover' && role !== 'spectator' && !isAdmin(socket)) {
const roverId = streamInfo.baseId || streamInfo.id; const roverId = streamInfo.baseId || streamInfo.id;
if (!roverManager.isDriver(roverId, socket)) { if (!roverManager.isDriver(roverId, socket)) {
@@ -5,6 +5,7 @@ const { isAdmin, isLockdownAdmin, getRole } = require('./roleService');
const videoSessions = require('./videoSessions'); const videoSessions = require('./videoSessions');
const roverManager = require('./roverManager'); const roverManager = require('./roverManager');
const { loadConfig } = require('../helpers/configLoader'); const { loadConfig } = require('../helpers/configLoader');
const { getSocketIp, isLocalNetwork } = require('../helpers/ipResolver');
const config = loadConfig(); const config = loadConfig();
const mediaConfig = config.media || {}; const mediaConfig = config.media || {};
@@ -86,12 +87,20 @@ io.on('connection', (socket) => {
} }
if (target.type === 'rover') { if (target.type === 'rover') {
const baseId = target.id.endsWith('-audio') ? target.id.slice(0, -6) : target.id; const baseId = target.id.endsWith('-audio') ? target.id.slice(0, -6) : target.id;
const isAudio = target.id.endsWith('-audio');
if (!roverManager.rovers.has(baseId)) { if (!roverManager.rovers.has(baseId)) {
throw new Error('Rover offline'); throw new Error('Rover offline');
} }
if (!canViewRover(socket, baseId)) { if (!canViewRover(socket, baseId)) {
throw new Error('Not authorized for video'); throw new Error('Not authorized for video');
} }
const role = getRole(socket);
if (role === 'spectator' && !isAdmin(socket) && !isAudio) {
const ip = getSocketIp(socket);
if (!isLocalNetwork(ip)) {
throw new Error('Not authorized for video');
}
}
} else if (target.type === 'room') { } else if (target.type === 'room') {
throw new Error('Room cameras now use the snapshot feed'); throw new Error('Room cameras now use the snapshot feed');
} else { } else {
+34 -11
View File
@@ -50,6 +50,8 @@ function InfoColumn({
rover, rover,
frame, frame,
driverLabel, driverLabel,
sessionInfo,
videoMode = 'snapshot',
snapshotFeed, snapshotFeed,
withDivider = false, withDivider = false,
showPreview = true, showPreview = true,
@@ -125,8 +127,8 @@ function InfoColumn({
<div className="mt-auto w-full"> <div className="mt-auto w-full">
<div className="w-full aspect-[4/3]"> <div className="w-full aspect-[4/3]">
<VideoTile <VideoTile
sessionInfo={null} sessionInfo={sessionInfo}
videoMode="snapshot" videoMode={videoMode}
snapshotFeed={snapshotFeed} snapshotFeed={snapshotFeed}
audioSessionInfo={null} audioSessionInfo={null}
label={rover.name || rover.id} label={rover.name || rover.id}
@@ -213,6 +215,7 @@ function MiniSummaryContent() {
const spectatorReady = useSpectatorMode(); const spectatorReady = useSpectatorMode();
useDefaultNickname(); useDefaultNickname();
const inLockdown = session?.mode === 'lockdown'; const inLockdown = session?.mode === 'lockdown';
const canSpectateVideo = Boolean(session?.isLocalNetwork);
const frames = useTelemetryFrames(); const frames = useTelemetryFrames();
const roster = session?.roster ?? []; const roster = session?.roster ?? [];
const [index, setIndex] = useState(0); const [index, setIndex] = useState(0);
@@ -225,8 +228,16 @@ function MiniSummaryContent() {
const snapshotFeeds = useRoverSnapshots( const snapshotFeeds = useRoverSnapshots(
snapshotRoster.map((rover) => rover.id), snapshotRoster.map((rover) => rover.id),
{ enabled: !inLockdown, version: session?.mode }, { enabled: !inLockdown && !canSpectateVideo, version: session?.mode },
); );
const videoEntries = useMemo(
() =>
canSpectateVideo
? snapshotRoster.map((rover) => ({ type: 'rover', id: rover.id, key: rover.id }))
: [],
[canSpectateVideo, snapshotRoster],
);
const videoSources = useVideoRequests(videoEntries, { enabled: !inLockdown && canSpectateVideo, version: session?.mode });
const audioEntries = useMemo( const audioEntries = useMemo(
() => () =>
driverRoster.flatMap((rover) => { driverRoster.flatMap((rover) => {
@@ -240,9 +251,16 @@ function MiniSummaryContent() {
const roverPool = useMemo(() => { const roverPool = useMemo(() => {
if (!driverRoster.length) return []; if (!driverRoster.length) return [];
const withSnapshot = driverRoster.filter((rover) => snapshotFeeds[rover.id]?.objectUrl); if (!canSpectateVideo) {
return withSnapshot.length ? withSnapshot : driverRoster; const withSnapshot = driverRoster.filter((rover) => snapshotFeeds[rover.id]?.objectUrl);
}, [driverRoster, snapshotFeeds]); return withSnapshot.length ? withSnapshot : driverRoster;
}
const withVideo = driverRoster.filter((rover) => {
const sessionInfo = videoSources[rover.id];
return sessionInfo?.url && !sessionInfo?.error;
});
return withVideo.length ? withVideo : driverRoster;
}, [driverRoster, snapshotFeeds, videoSources, canSpectateVideo]);
const rotationPool = useMemo(() => { const rotationPool = useMemo(() => {
return roverPool.map((rover) => ({ type: 'rover', rover })); return roverPool.map((rover) => ({ type: 'rover', rover }));
@@ -271,7 +289,8 @@ function MiniSummaryContent() {
const activeEntry = rotationPool.length ? rotationPool[index % rotationPool.length] : null; const activeEntry = rotationPool.length ? rotationPool[index % rotationPool.length] : null;
const activeRover = activeEntry?.type === 'rover' ? activeEntry.rover : null; const activeRover = activeEntry?.type === 'rover' ? activeEntry.rover : null;
const activeSnapshot = activeRover ? snapshotFeeds[activeRover.id] || null : null; const activeSnapshot = !canSpectateVideo && activeRover ? snapshotFeeds[activeRover.id] || null : null;
const activeVideo = canSpectateVideo && activeRover ? videoSources[activeRover.id] || null : null;
const activeAudio = activeRover ? audioSources[`${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;
@@ -298,7 +317,9 @@ function MiniSummaryContent() {
rover={rover} rover={rover}
frame={frames[rover.id] || null} frame={frames[rover.id] || null}
driverLabel={null} driverLabel={null}
snapshotFeed={snapshotFeeds[rover.id] || null} sessionInfo={canSpectateVideo ? videoSources[rover.id] || null : null}
videoMode={canSpectateVideo ? 'whep' : 'snapshot'}
snapshotFeed={canSpectateVideo ? null : snapshotFeeds[rover.id] || null}
showPreview={true} showPreview={true}
withDivider={false} withDivider={false}
/> />
@@ -326,8 +347,8 @@ function MiniSummaryContent() {
) : activeRover ? ( ) : activeRover ? (
<FitViewportFrame> <FitViewportFrame>
<VideoTile <VideoTile
sessionInfo={null} sessionInfo={activeVideo}
videoMode="snapshot" videoMode={canSpectateVideo ? 'whep' : 'snapshot'}
snapshotFeed={activeSnapshot} snapshotFeed={activeSnapshot}
audioSessionInfo={activeAudio} audioSessionInfo={activeAudio}
label={activeRover.name || activeRover.id} label={activeRover.name || activeRover.id}
@@ -350,7 +371,9 @@ function MiniSummaryContent() {
rover={activeRover} rover={activeRover}
frame={activeFrame} frame={activeFrame}
driverLabel={driverLabel} driverLabel={driverLabel}
snapshotFeed={snapshotFeeds[activeRover.id] || null} sessionInfo={canSpectateVideo ? activeVideo : null}
videoMode={canSpectateVideo ? 'whep' : 'snapshot'}
snapshotFeed={canSpectateVideo ? null : snapshotFeeds[activeRover.id] || null}
showPreview={false} showPreview={false}
variant="active" variant="active"
/> />
+15 -6
View File
@@ -53,14 +53,14 @@ function formatDriverLabel({ roverId, session }) {
return driverText; return driverText;
} }
function RoverSpectatorCard({ rover, frame, snapshotFeed, audioInfo, session }) { function RoverSpectatorCard({ rover, frame, sessionInfo, videoMode, 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 sm:min-h-[18rem]"> <article className="min-h-[16rem] rounded bg-zinc-900 p-0 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={null} sessionInfo={sessionInfo}
videoMode="snapshot" videoMode={videoMode}
snapshotFeed={snapshotFeed} snapshotFeed={snapshotFeed}
audioSessionInfo={audioInfo} audioSessionInfo={audioInfo}
label={rover.name} label={rover.name}
@@ -76,7 +76,7 @@ function RoverSpectatorCard({ rover, frame, snapshotFeed, audioInfo, session })
); );
} }
function RoverRow({ roster, frames, snapshotFeeds, audioSources, session }) { function RoverRow({ roster, frames, videoSources, snapshotFeeds, audioSources, session, canSpectateVideo }) {
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>;
} }
@@ -87,7 +87,9 @@ function RoverRow({ roster, frames, snapshotFeeds, audioSources, session }) {
key={rover.id} key={rover.id}
rover={rover} rover={rover}
frame={frames[rover.id]} frame={frames[rover.id]}
snapshotFeed={snapshotFeeds[rover.id]} sessionInfo={canSpectateVideo ? videoSources[rover.id] || null : null}
videoMode={canSpectateVideo ? 'whep' : 'snapshot'}
snapshotFeed={canSpectateVideo ? null : snapshotFeeds[rover.id]}
audioInfo={audioSources[`${rover.id}-audio`]} audioInfo={audioSources[`${rover.id}-audio`]}
session={session} session={session}
showHudMap showHudMap
@@ -124,6 +126,7 @@ function LogsRow({ className = '' }) {
function SpectatorContent() { function SpectatorContent() {
const { session } = useSession(); const { session } = useSession();
const inLockdown = session?.mode === 'lockdown'; const inLockdown = session?.mode === 'lockdown';
const canSpectateVideo = Boolean(session?.isLocalNetwork);
useDefaultNickname(); useDefaultNickname();
useSpectatorMode(); useSpectatorMode();
const isPortraitLayout = usePortraitLayout(); const isPortraitLayout = usePortraitLayout();
@@ -131,8 +134,12 @@ function SpectatorContent() {
const roster = session?.roster ?? []; const roster = session?.roster ?? [];
const snapshotFeeds = useRoverSnapshots( const snapshotFeeds = useRoverSnapshots(
roster.map((rover) => rover.id), roster.map((rover) => rover.id),
{ enabled: !inLockdown, version: session?.mode }, { enabled: !inLockdown && !canSpectateVideo, version: session?.mode },
); );
const videoEntries = canSpectateVideo
? roster.map((rover) => ({ type: 'rover', id: rover.id, key: rover.id }))
: [];
const videoSources = useVideoRequests(videoEntries, { enabled: !inLockdown && canSpectateVideo, version: session?.mode });
const audioEntries = roster.flatMap((rover) => const audioEntries = roster.flatMap((rover) =>
rover.media?.audioPublishUrl rover.media?.audioPublishUrl
? [{ type: 'rover', id: `${rover.id}-audio`, key: `${rover.id}-audio` }] ? [{ type: 'rover', id: `${rover.id}-audio`, key: `${rover.id}-audio` }]
@@ -200,9 +207,11 @@ function SpectatorContent() {
<RoverRow <RoverRow
roster={roster} roster={roster}
frames={frames} frames={frames}
videoSources={videoSources}
snapshotFeeds={snapshotFeeds} snapshotFeeds={snapshotFeeds}
audioSources={audioSources} audioSources={audioSources}
session={session} session={session}
canSpectateVideo={canSpectateVideo}
/> />
<SecondaryRow /> <SecondaryRow />
</section> </section>