fix reconnectings

This commit is contained in:
legop3
2025-11-20 15:59:08 -05:00
parent e05f258fb3
commit d816345560
3 changed files with 22 additions and 15 deletions
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webui</title>
<script type="module" crossorigin src="/assets/index-B_IFrOiI.js"></script>
<script type="module" crossorigin src="/assets/index-BGeippT_.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-ZQklSSJR.css">
</head>
<body>
+17 -10
View File
@@ -1,8 +1,7 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { WhepPlayer } from '../lib/whepPlayer.js';
const RESTART_DELAY_MS = 2500;
const RETRYABLE_STATUSES = new Set(['error', 'failed', 'disconnected', 'closed', 'stopped']);
const RESTART_DELAY_MS = 2000;
export default function RoomCameraFeed({ sessionInfo, label }) {
const videoRef = useRef(null);
@@ -13,7 +12,7 @@ export default function RoomCameraFeed({ sessionInfo, label }) {
const scheduleRestart = useCallback(() => {
clearTimeout(restartTimer.current);
restartTimer.current = setTimeout(() => setRestartToken((token) => token + 1), RESTART_DELAY_MS);
restartTimer.current = setTimeout(() => setRestartToken(Date.now()), RESTART_DELAY_MS);
}, []);
const ensurePlayback = useCallback(async () => {
@@ -23,21 +22,23 @@ export default function RoomCameraFeed({ sessionInfo, label }) {
video.muted = true;
await video.play();
} catch {
// Autoplay might fail; we'll retry after reconnect.
// Autoplay might be blocked; retry later.
}
}, []);
useEffect(() => {
return () => {
useEffect(
() => () => {
clearTimeout(restartTimer.current);
};
}, []);
},
[],
);
useEffect(() => {
if (!sessionInfo?.url || !videoRef.current) {
return undefined;
}
let active = true;
let player;
const handleStatus = (nextStatus, info) => {
if (!active) return;
setStatus(nextStatus);
@@ -45,12 +46,12 @@ export default function RoomCameraFeed({ sessionInfo, label }) {
if (nextStatus === 'playing') {
ensurePlayback();
}
if (RETRYABLE_STATUSES.has(nextStatus)) {
if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
scheduleRestart();
}
};
const player = new WhepPlayer({
player = new WhepPlayer({
url: sessionInfo.url,
token: sessionInfo.token,
video: videoRef.current,
@@ -70,6 +71,12 @@ export default function RoomCameraFeed({ sessionInfo, label }) {
};
}, [sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback]);
useEffect(() => {
if (status === 'stopped' && sessionInfo?.url) {
scheduleRestart();
}
}, [status, sessionInfo?.url, scheduleRestart]);
const renderedStatus = !sessionInfo?.url
? 'Waiting for stream session'
: status === 'error'