mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Go2rtc update and MSE improvements (#4309)
* Update go2rtc to rc2 * Update MSE player * Update mse player * Update mse player * Close stream when pausing
This commit is contained in:
parent
9e31873520
commit
47c1985c26
@ -118,7 +118,7 @@ RUN apt-get -qq update \
|
|||||||
ENV PATH=$PATH:/usr/lib/btbn-ffmpeg/bin
|
ENV PATH=$PATH:/usr/lib/btbn-ffmpeg/bin
|
||||||
|
|
||||||
# install go2rtc
|
# install go2rtc
|
||||||
RUN wget -O go2rtc "https://github.com/AlexxIT/go2rtc/releases/download/v0.1-rc.1/go2rtc_linux_${TARGETARCH}" \
|
RUN wget -O go2rtc "https://github.com/AlexxIT/go2rtc/releases/download/v0.1-rc.2/go2rtc_linux_${TARGETARCH}" \
|
||||||
&& chmod +x go2rtc \
|
&& chmod +x go2rtc \
|
||||||
&& mkdir -p /usr/local/go2rtc/sbin/ \
|
&& mkdir -p /usr/local/go2rtc/sbin/ \
|
||||||
&& mv go2rtc /usr/local/go2rtc/sbin/go2rtc
|
&& mv go2rtc /usr/local/go2rtc/sbin/go2rtc
|
||||||
|
@ -11,12 +11,11 @@ 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,
|
||||||
let mediaSource;
|
sourceBuffer,
|
||||||
|
queueBuffer = [];
|
||||||
|
|
||||||
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 = () => {
|
||||||
@ -26,63 +25,49 @@ export default function MsePlayer({ camera, width, height }) {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
let sourceBuffer,
|
|
||||||
queueBuffer = [];
|
|
||||||
|
|
||||||
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);
|
||||||
// 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) {
|
||||||
sourceBuffer.appendBuffer(queueBuffer.shift());
|
try {
|
||||||
|
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 {
|
||||||
sourceBuffer.appendBuffer(ev.data);
|
try {
|
||||||
|
sourceBuffer.appendBuffer(ev.data);
|
||||||
|
} catch (e) {
|
||||||
|
// console.warn(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (video.seekable.length > 0) {
|
||||||
|
const delay = video.seekable.end(video.seekable.length - 1) - video.currentTime;
|
||||||
|
if (delay < 1) {
|
||||||
|
video.playbackRate = 1;
|
||||||
|
} else if (delay > 10) {
|
||||||
|
video.playbackRate = 10;
|
||||||
|
} else if (delay > 2) {
|
||||||
|
video.playbackRate = Math.floor(delay);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let offsetTime = 1,
|
video.onpause = () => {
|
||||||
noWaiting = 0;
|
ws.close();
|
||||||
|
video.src = null;
|
||||||
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);
|
|
||||||
let playbackRate = (endTime - video.currentTime) / offsetTime;
|
|
||||||
if (playbackRate < 0.1) {
|
|
||||||
// video.currentTime = endTime - offsetTime;
|
|
||||||
playbackRate = 0.1;
|
|
||||||
} else if (playbackRate > 10) {
|
|
||||||
// video.currentTime = endTime - offsetTime;
|
|
||||||
playbackRate = 10;
|
|
||||||
}
|
|
||||||
// https://github.com/GoogleChrome/developer.chrome.com/issues/135
|
|
||||||
video.playbackRate = playbackRate;
|
|
||||||
}, 1000);
|
|
||||||
|
|
||||||
video.onwaiting = () => {
|
|
||||||
const endTime = video.seekable.end(video.seekable.length - 1);
|
|
||||||
video.currentTime = endTime - offsetTime;
|
|
||||||
noWaiting = -1;
|
|
||||||
};
|
|
||||||
}, [url]);
|
}, [url]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
Loading…
Reference in New Issue
Block a user