mirror of
https://github.com/AlexxIT/go2rtc.git
synced 2026-04-22 23:57:20 +08:00
Alexey Khit
120 lines
3.6 KiB
HTML
120 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>go2rtc - MSE</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
#video {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- muted is important for autoplay -->
|
|
<video id="video" autoplay controls playsinline muted></video>
|
|
<script>
|
|
const video = document.querySelector('#video');
|
|
|
|
// support api_path
|
|
const baseUrl = location.origin + location.pathname.substr(
|
|
0, location.pathname.lastIndexOf("/")
|
|
);
|
|
const ws = new WebSocket(`ws${baseUrl.substr(4)}/api/ws${location.search}`);
|
|
ws.binaryType = "arraybuffer";
|
|
|
|
let mediaSource;
|
|
|
|
ws.onopen = () => {
|
|
console.log("Start WS");
|
|
|
|
// 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();
|
|
video.src = URL.createObjectURL(mediaSource);
|
|
mediaSource.onsourceopen = () => {
|
|
console.debug("mediaSource.onsourceopen");
|
|
|
|
mediaSource.onsourceopen = null;
|
|
URL.revokeObjectURL(video.src);
|
|
ws.send(JSON.stringify({"type": "mse"}));
|
|
};
|
|
};
|
|
|
|
let sourceBuffer, queueBuffer = [];
|
|
|
|
ws.onmessage = ev => {
|
|
if (typeof ev.data === 'string') {
|
|
const data = JSON.parse(ev.data);
|
|
console.debug("ws.onmessage", data);
|
|
|
|
if (data.type === "mse") {
|
|
sourceBuffer = mediaSource.addSourceBuffer(
|
|
`video/mp4; codecs="${data.value}"`
|
|
);
|
|
// important: segments supports TrackFragDecodeTime
|
|
// sequence supports only TrackFragRunEntry Duration
|
|
sourceBuffer.mode = "segments";
|
|
sourceBuffer.onupdateend = () => {
|
|
if (!sourceBuffer.updating && queueBuffer.length > 0) {
|
|
sourceBuffer.appendBuffer(queueBuffer.shift());
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
if (sourceBuffer.updating) {
|
|
queueBuffer.push(ev.data)
|
|
} else {
|
|
sourceBuffer.appendBuffer(ev.data);
|
|
}
|
|
}
|
|
}
|
|
|
|
let offsetTime = 1, noWaiting = 0;
|
|
|
|
setInterval(() => {
|
|
if (video.paused || video.seekable.length === 0) return;
|
|
|
|
if (noWaiting < 0) {
|
|
offsetTime = Math.min(offsetTime * 1.1, 5);
|
|
console.debug("offset time up:", offsetTime);
|
|
} else if (noWaiting >= 30) {
|
|
noWaiting = 0;
|
|
offsetTime = Math.max(offsetTime * 0.9, 0.5);
|
|
console.debug("offset time down:", offsetTime);
|
|
}
|
|
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;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|