Initial commit

2022-08-18 09:19:00 +03:00
commit 3e77835583
65 changed files with 6372 additions and 0 deletions
@@ -0,0 +1,119 @@
+<!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>