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

Update mse player

Browse Source
This commit is contained in:
Nick Mowen 2022-11-08 07:08:10 -07:00
parent d7e0dbe6d7
commit dca6bfb9d6
1 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/components/MsePlayer.jsx
View File

@ -10,8 +10,10 @@ export default function MsePlayer({ camera, width, height }) {
// support api_path // support api_path
const ws = new WebSocket(url); const ws = new WebSocket(url);
ws.binaryType = "arraybuffer"; ws.binaryType = 'arraybuffer';
let mediaSource, sourceBuffer, queueBuffer = []; let mediaSource,
sourceBuffer,
queueBuffer = [];
ws.onopen = () => { ws.onopen = () => {
mediaSource = new MediaSource(); mediaSource = new MediaSource();
@ -19,18 +21,17 @@ export default function MsePlayer({ camera, width, height }) {
mediaSource.onsourceopen = () => { mediaSource.onsourceopen = () => {
mediaSource.onsourceopen = null; mediaSource.onsourceopen = null;
URL.revokeObjectURL(video.src); URL.revokeObjectURL(video.src);
ws.send(JSON.stringify({"type": "mse"})); ws.send(JSON.stringify({ type: 'mse' }));
}; };
}; };
ws.onmessage = ev => { ws.onmessage = (ev) => {
if (typeof ev.data === 'string') { if (typeof ev.data === 'string') {
const data = JSON.parse(ev.data); const data = JSON.parse(ev.data);
if (data.type === 'mse') {
if (data.type === "mse") {
sourceBuffer = mediaSource.addSourceBuffer(data.value); sourceBuffer = mediaSource.addSourceBuffer(data.value);
sourceBuffer.mode = "segments"; // segments or sequence sourceBuffer.mode = 'segments'; // segments or sequence
sourceBuffer.onupdateend = () => { sourceBuffer.onupdateend = () => {
if (!sourceBuffer.updating && queueBuffer.length > 0) { if (!sourceBuffer.updating && queueBuffer.length > 0) {
try { try {
@ -39,7 +40,7 @@ export default function MsePlayer({ camera, width, height }) {
// console.warn(e); // console.warn(e);
} }
} }
} };
} }
} else if (sourceBuffer.updating || queueBuffer.length > 0) { } else if (sourceBuffer.updating || queueBuffer.length > 0) {
queueBuffer.push(ev.data); queueBuffer.push(ev.data);
@ -61,11 +62,7 @@ export default function MsePlayer({ camera, width, height }) {
video.playbackRate = Math.floor(delay); video.playbackRate = Math.floor(delay);
} }
} }
} };
video.onpause = () => {
//ws.close();
}
}, [url]); }, [url]);
return ( return (