administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-12 14:15:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Manually calculate buffer timeout

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-31 07:42:16 -06:00
parent 714be8f414
commit c032885e74
2 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/components/player/MsePlayer.tsx
View File

@ -47,7 +47,7 @@ function MSEPlayer({
const [wsState, setWsState] = useState<number>(WebSocket.CLOSED); const [wsState, setWsState] = useState<number>(WebSocket.CLOSED);
const [connectTS, setConnectTS] = useState<number>(0); const [connectTS, setConnectTS] = useState<number>(0);
const [receivedData, setReceivedData] = useState(false); const [bufferTimeout, setBufferTimeout] = useState<NodeJS.Timeout>();
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const wsRef = useRef<WebSocket | null>(null); const wsRef = useRef<WebSocket | null>(null);
@ -103,7 +103,6 @@ function MSEPlayer({
const onConnect = useCallback(() => { const onConnect = useCallback(() => {
if (!videoRef.current?.isConnected || !wsURL || wsRef.current) return false; if (!videoRef.current?.isConnected || !wsURL || wsRef.current) return false;
setReceivedData(false);
setWsState(WebSocket.CONNECTING); setWsState(WebSocket.CONNECTING);
setConnectTS(Date.now()); setConnectTS(Date.now());
@ -310,18 +309,33 @@ function MSEPlayer({
onLoadedData={() => { onLoadedData={() => {
handleLoadedMetadata?.(); handleLoadedMetadata?.();
onPlaying?.(); onPlaying?.();
setReceivedData(true);
}} }}
muted={!audioEnabled} muted={!audioEnabled}
onStalled={() => { onProgress={
if (receivedData) { onError != undefined
onError?.("stalled"); ? () => {
} else { if (videoRef.current?.paused) {
onError?.("startup"); return;
} }
}}
onError={() => { if (bufferTimeout) {
if (!receivedData) { clearTimeout(bufferTimeout);
setBufferTimeout(undefined);
}
setBufferTimeout(
setTimeout(() => {
onError("stalled");
}, 3000),
);
}
: undefined
}
onError={(e) => {
if (
// @ts-expect-error code does exist
e.target.error.code == MediaError.MEDIA_ERR_NETWORK
) {
onError?.("startup"); onError?.("startup");
} }

34
web/src/components/player/WebRTCPlayer.tsx
View File

@ -35,7 +35,7 @@ export default function WebRtcPlayer({
const pcRef = useRef<RTCPeerConnection | undefined>(); const pcRef = useRef<RTCPeerConnection | undefined>();
const videoRef = useRef<HTMLVideoElement | null>(null); const videoRef = useRef<HTMLVideoElement | null>(null);
const [receivedData, setReceivedData] = useState(false); const [bufferTimeout, setBufferTimeout] = useState<NodeJS.Timeout>();
const PeerConnection = useCallback( const PeerConnection = useCallback(
async (media: string) => { async (media: string) => {
@ -168,8 +168,6 @@ export default function WebRtcPlayer({
pcRef.current.close(); pcRef.current.close();
pcRef.current = undefined; pcRef.current = undefined;
} }
setReceivedData(false);
}; };
}, [ }, [
camera, camera,
@ -203,17 +201,27 @@ export default function WebRtcPlayer({
autoPlay autoPlay
playsInline playsInline
muted={!audioEnabled} muted={!audioEnabled}
onLoadedData={() => { onLoadedData={onPlaying}
setReceivedData(true); onProgress={
onPlaying?.(); onError != undefined
}} ? () => {
onStalled={() => { if (videoRef.current?.paused) {
if (receivedData) { return;
onError?.("stalled"); }
} else {
onError?.("startup"); if (bufferTimeout) {
clearTimeout(bufferTimeout);
setBufferTimeout(undefined);
}
setBufferTimeout(
setTimeout(() => {
onError("stalled");
}, 3000),
);
}
: undefined
} }
}}
onClick={ onClick={
iOSCompatFullScreen iOSCompatFullScreen
? () => setiOSCompatControls(!iOSCompatControls) ? () => setiOSCompatControls(!iOSCompatControls)