Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Small jsmpeg and mse player fixes (#12032)

Browse Source
This commit is contained in:
Josh Hawkins 2024-06-17 14:54:14 -06:00 committed by GitHub
parent 4635e64b2e
commit 6c107883b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/player/JSMpegPlayer.tsx
View File

@ -23,6 +23,7 @@ export default function JSMpegPlayer({
}: JSMpegPlayerProps) { }: JSMpegPlayerProps) {
const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`; const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
const playerRef = useRef<HTMLDivElement | null>(null); const playerRef = useRef<HTMLDivElement | null>(null);
const videoRef = useRef(null);
const internalContainerRef = useRef<HTMLDivElement | null>(null); const internalContainerRef = useRef<HTMLDivElement | null>(null);
const selectedContainerRef = useMemo( const selectedContainerRef = useMemo(
@ -86,7 +87,7 @@ export default function JSMpegPlayer({
return; return;
} }
const video = new JSMpeg.VideoElement( videoRef.current = new JSMpeg.VideoElement(
playerRef.current, playerRef.current,
url, url,
{ canvas: `#${CSS.escape(uniqueId)}` }, { canvas: `#${CSS.escape(uniqueId)}` },
@ -99,17 +100,9 @@ export default function JSMpegPlayer({
}, },
}, },
); );
// we know that these deps are correct
return () => { // eslint-disable-next-line react-hooks/exhaustive-deps
if (playerRef.current) { }, [url, uniqueId]);
try {
video.destroy();
// eslint-disable-next-line no-empty
} catch (e) {}
playerRef.current = null;
}
};
}, [url, uniqueId, onPlaying]);
return ( return (
<div className={className}> <div className={className}>

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

@ -260,10 +260,14 @@ function MSEPlayer({
return () => { return () => {
onDisconnect(); onDisconnect();
if (bufferTimeout) {
clearTimeout(bufferTimeout);
setBufferTimeout(undefined);
}
}; };
// we know that these deps are correct // we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [playbackEnabled, onDisconnect, onConnect]); }, [playbackEnabled]);
// check visibility // check visibility