legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-15 17:12:59 -04:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

guh

Browse Source
This commit is contained in:
legop3
2025-11-15 05:27:47 -05:00
parent eb2e2b15d8
commit c9d5b4e0f3
6 changed files with 149 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-Cn-MOZwV.js → server/public/assets/index-D9Hjnx7-.js
+4 -4
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-Cbe_I3mP.css → server/public/assets/index-dfoT05bK.css
+1 -1
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+2 -2
View File
@@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webui</title> <title>webui</title>
<script type="module" crossorigin src="/assets/index-Cn-MOZwV.js"></script> <script type="module" crossorigin src="/assets/index-D9Hjnx7-.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Cbe_I3mP.css"> <link rel="stylesheet" crossorigin href="/assets/index-dfoT05bK.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
webui/src/components/VideoTile.jsx
+88 -26
View File
@@ -1,53 +1,115 @@
import { useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { WhepPlayer } from '../lib/whepPlayer.js'; import { WhepPlayer } from '../lib/whepPlayer.js';
export default function VideoTile({ sessionInfo, label, muted = true }) { const RESTART_DELAY_MS = 2000;
const UNMUTE_RETRY_MS = 3000;
export default function VideoTile({ sessionInfo, label, forceMute = false }) {
const videoRef = useRef(null); const videoRef = useRef(null);
const restartTimer = useRef(null);
const unmuteTimer = useRef(null);
const [status, setStatus] = useState('idle'); const [status, setStatus] = useState('idle');
const [error, setError] = useState(null); 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 attemptUnmute = useCallback(
(delay = 0) => {
if (forceMute) return;
clearTimeout(unmuteTimer.current);
unmuteTimer.current = setTimeout(async () => {
const video = videoRef.current;
if (!video) return;
try {
video.muted = false;
await video.play();
setMuted(false);
} catch (err) {
video.muted = true;
setMuted(true);
attemptUnmute(UNMUTE_RETRY_MS);
}
}, delay);
},
[forceMute],
);
useEffect(
() => () => {
clearTimeout(restartTimer.current);
clearTimeout(unmuteTimer.current);
},
[],
);
useEffect(() => { useEffect(() => {
let player; if (status === 'playing') {
let cancelled = false; attemptUnmute(0);
}
}, [status, attemptUnmute]);
async function start() { useEffect(() => {
if (!sessionInfo?.url || !videoRef.current) { if (!sessionInfo?.url || !videoRef.current) {
setStatus('waiting'); setStatus('waiting');
return; setDetail(null);
return undefined;
} }
setStatus('connecting'); let active = true;
setError(null); let player;
setMuted(true);
const handleStatus = (nextStatus, info) => {
if (!active) return;
setStatus(nextStatus);
setDetail(info || null);
if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
scheduleRestart();
}
};
player = new WhepPlayer({ player = new WhepPlayer({
url: sessionInfo.url, url: sessionInfo.url,
token: sessionInfo.token, token: sessionInfo.token,
video: videoRef.current, video: videoRef.current,
onStatus: handleStatus,
});
player.start().catch((err) => {
if (!active) return;
setStatus('error');
setDetail(err.message);
scheduleRestart();
}); });
try {
await player.start();
if (!cancelled) {
setStatus('playing');
}
} catch (err) {
if (!cancelled) {
setStatus('error');
setError(err.message);
}
}
}
start();
return () => { return () => {
cancelled = true; active = false;
player?.stop(); player?.stop();
}; };
}, [sessionInfo?.url, sessionInfo?.token]); }, [sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart]);
useEffect(() => {
if (status === 'stopped' && sessionInfo?.url) {
scheduleRestart();
}
}, [status, sessionInfo?.url, scheduleRestart]);
const renderedStatus =
status === 'error'
? `Error: ${detail || 'unknown'}`
: detail
? `${status} (${detail})`
: status;
return ( return (
<div className="space-y-2"> <div className="space-y-2">
<div className="aspect-video w-full overflow-hidden rounded-2xl border border-slate-800 bg-black"> <div className="aspect-video w-full overflow-hidden rounded-2xl border border-slate-800 bg-black">
<video <video
ref={videoRef} ref={videoRef}
muted={muted} muted={forceMute || muted}
playsInline playsInline
autoPlay autoPlay
controls={false} controls={false}
@@ -56,7 +118,7 @@ export default function VideoTile({ sessionInfo, label, muted = true }) {
</div> </div>
<div className="text-xs text-slate-400"> <div className="text-xs text-slate-400">
<span className="font-semibold text-slate-200">{label}</span>{' '} <span className="font-semibold text-slate-200">{label}</span>{' '}
{status === 'error' ? <span className="text-red-400">Error: {error}</span> : <span>{status}</span>} <span>{renderedStatus}</span>
</div> </div>
</div> </div>
); );
webui/src/lib/whepPlayer.js
+30 -2
View File
@@ -1,17 +1,25 @@
function buildAuthHeader(token) { function buildAuthHeader(token) {
if (!token) return {}; if (!token) return {};
const credential = `${token}:${token}`; const credential = `${token}:${token}`;
const encoded = typeof btoa === 'function' ? btoa(credential) : Buffer.from(credential).toString('base64'); const encoded =
typeof btoa === 'function' ? btoa(credential) : Buffer.from(credential).toString('base64');
return { Authorization: `Basic ${encoded}` }; return { Authorization: `Basic ${encoded}` };
} }
export class WhepPlayer { export class WhepPlayer {
constructor({ url, token, video }) { constructor({ url, token, video, onStatus }) {
this.url = url; this.url = url;
this.token = token; this.token = token;
this.video = video; this.video = video;
this.pc = null; this.pc = null;
this.abortController = null; this.abortController = null;
this.onStatus = onStatus;
}
notify(status, detail) {
if (typeof this.onStatus === 'function') {
this.onStatus(status, detail);
}
} }
async start() { async start() {
@@ -19,6 +27,7 @@ export class WhepPlayer {
throw new Error('Video target missing'); throw new Error('Video target missing');
} }
this.stop(); this.stop();
this.notify('connecting');
this.abortController = new AbortController(); this.abortController = new AbortController();
const pc = new RTCPeerConnection(); const pc = new RTCPeerConnection();
this.pc = pc; this.pc = pc;
@@ -30,6 +39,18 @@ export class WhepPlayer {
pc.addTransceiver('video', { direction: 'recvonly' }); pc.addTransceiver('video', { direction: 'recvonly' });
pc.addTransceiver('audio', { direction: 'recvonly' }); pc.addTransceiver('audio', { direction: 'recvonly' });
pc.onconnectionstatechange = () => {
const state = pc.connectionState;
this.notify(state);
};
pc.oniceconnectionstatechange = () => {
const state = pc.iceConnectionState;
if (state === 'failed' || state === 'disconnected') {
this.notify(state);
}
};
try {
const offer = await pc.createOffer(); const offer = await pc.createOffer();
await pc.setLocalDescription(offer); await pc.setLocalDescription(offer);
@@ -47,6 +68,12 @@ export class WhepPlayer {
} }
const answerSdp = await response.text(); const answerSdp = await response.text();
await pc.setRemoteDescription({ type: 'answer', sdp: answerSdp }); await pc.setRemoteDescription({ type: 'answer', sdp: answerSdp });
this.notify('playing');
} catch (err) {
this.notify('error', err.message);
this.stop();
throw err;
}
} }
stop() { stop() {
@@ -63,5 +90,6 @@ export class WhepPlayer {
if (this.video) { if (this.video) {
this.video.srcObject = null; this.video.srcObject = null;
} }
this.notify('stopped');
} }
} }
webui/src/spectate/SpectatorApp.jsx
+1 -1
View File
@@ -66,7 +66,7 @@ function RoverSpectatorCard({ rover, frame, videoInfo }) {
{frame?.receivedAt ? `Updated ${new Date(frame.receivedAt).toLocaleTimeString()}` : 'Waiting for telemetry…'} {frame?.receivedAt ? `Updated ${new Date(frame.receivedAt).toLocaleTimeString()}` : 'Waiting for telemetry…'}
</p> </p>
</header> </header>
<VideoTile sessionInfo={videoInfo} label={rover.name} /> <VideoTile sessionInfo={videoInfo} label={rover.name} forceMute />
<section className="rounded-2xl border border-slate-800/80 bg-slate-950/50 p-4"> <section className="rounded-2xl border border-slate-800/80 bg-slate-950/50 p-4">
<p className="text-xs uppercase tracking-[0.3em] text-slate-500">Telemetry</p> <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Telemetry</p>
{sensorList.length === 0 ? ( {sensorList.length === 0 ? (