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 06:10:29 -07:00
parent 77952dd210
commit 3984e35886
1 changed files with 32 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,79 +10,62 @@ 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;
ws.onopen = () => { ws.onopen = () => {
// https://web.dev/i18n/en/fast-playback-with-preload/#manual_buffering
// https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API
mediaSource = new MediaSource(); mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource); video.src = URL.createObjectURL(mediaSource);
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"}));
}; };
}; };
let sourceBuffer, ws.onmessage = ev => {
queueBuffer = [];
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);
// important: segments supports TrackFragDecodeTime sourceBuffer.mode = "segments"; // segments or sequence
// sequence supports only TrackFragRunEntry Duration
sourceBuffer.mode = 'segments';
sourceBuffer.onupdateend = () => { sourceBuffer.onupdateend = () => {
if (!sourceBuffer.updating && queueBuffer.length > 0) { if (!sourceBuffer.updating && queueBuffer.length > 0) {
try {
sourceBuffer.appendBuffer(queueBuffer.shift()); sourceBuffer.appendBuffer(queueBuffer.shift());
} catch (e) {
// console.warn(e);
} }
};
} }
} else if (sourceBuffer.updating) { }
}
} else if (sourceBuffer.updating || queueBuffer.length > 0) {
queueBuffer.push(ev.data); queueBuffer.push(ev.data);
} else { } else {
try {
sourceBuffer.appendBuffer(ev.data); sourceBuffer.appendBuffer(ev.data);
} catch (e) {
// console.warn(e);
} }
};
let offsetTime = 1,
noWaiting = 0;
setInterval(() => {
if (video.paused || video.seekable.length === 0) return;
if (noWaiting < 0) {
offsetTime = Math.min(offsetTime * 1.1, 5);
} else if (noWaiting >= 30) {
noWaiting = 0;
offsetTime = Math.max(offsetTime * 0.9, 0.5);
} }
noWaiting += 1;
const endTime = video.seekable.end(video.seekable.length - 1); if (video.seekable.length > 0) {
let playbackRate = (endTime - video.currentTime) / offsetTime; const delay = video.seekable.end(video.seekable.length - 1) - video.currentTime;
if (playbackRate < 0.1) { if (delay < 1) {
// video.currentTime = endTime - offsetTime; video.playbackRate = 1;
playbackRate = 0.1; } else if (delay > 10) {
} else if (playbackRate > 10) { video.playbackRate = 10;
// video.currentTime = endTime - offsetTime; } else if (delay > 2) {
playbackRate = 10; video.playbackRate = Math.floor(delay);
}
}
} }
// https://github.com/GoogleChrome/developer.chrome.com/issues/135
video.playbackRate = playbackRate;
}, 1000);
video.onwaiting = () => { video.onpause = () => {
const endTime = video.seekable.end(video.seekable.length - 1); ws.close();
video.currentTime = endTime - offsetTime; }
noWaiting = -1;
};
}, [url]); }, [url]);
return ( return (