administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-10 02:29:19 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Improve jsmpeg player websocket handling (#21943)

Browse Source 
* improve jsmpeg player websocket handling

prevent websocket console messages from appearing when player is destroyed

* reformat files after ruff upgrade
This commit is contained in:
Josh Hawkins 2026-02-09 10:54:45 -06:00 committed by Nicolas Mowen
parent fef1fb36cc
commit 12506f8c80
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -118,6 +118,8 @@ export default function JSMpegPlayer({
const videoWrapper = videoRef.current; const videoWrapper = videoRef.current;
const canvas = canvasRef.current; const canvas = canvasRef.current;
let videoElement: JSMpeg.VideoElement | null = null; let videoElement: JSMpeg.VideoElement | null = null;
let socket: WebSocket | null = null;
let socketMessageHandler: ((event: MessageEvent) => void) | null = null;
let frameCount = 0; let frameCount = 0;
@ -152,12 +154,14 @@ export default function JSMpegPlayer({
videoElement.player.source && videoElement.player.source &&
videoElement.player.source.socket videoElement.player.source.socket
) { ) {
const socket = videoElement.player.source.socket; socket = videoElement.player.source.socket as WebSocket;
socket.addEventListener("message", (event: MessageEvent) => { socketMessageHandler = (event: MessageEvent) => {
if (event.data instanceof ArrayBuffer) { if (event.data instanceof ArrayBuffer) {
bytesReceivedRef.current += event.data.byteLength; bytesReceivedRef.current += event.data.byteLength;
} }
}); };
socket.addEventListener("message", socketMessageHandler);
} }
// Update stats every second // Update stats every second
@ -197,11 +201,23 @@ export default function JSMpegPlayer({
} }
if (videoElement) { if (videoElement) {
try { try {
// this causes issues in react strict mode videoElement.player?.destroy();
// https://stackoverflow.com/questions/76822128/issue-with-cycjimmy-jsmpeg-player-in-react-18-cannot-read-properties-of-null-o
videoElement.destroy();
// eslint-disable-next-line no-empty // eslint-disable-next-line no-empty
} catch (e) {} } catch (e) {}
if (videoWrapper) {
videoWrapper.innerHTML = "";
// @ts-expect-error playerInstance is set by jsmpeg
videoWrapper.playerInstance = null;
}
}
if (socket) {
if (socketMessageHandler) {
socket.removeEventListener("message", socketMessageHandler);
}
socket = null;
socketMessageHandler = null;
} }
}; };
} }