From 5c64d1f84769334a92fb176fad4eea97734859af Mon Sep 17 00:00:00 2001
From: Alexey Khit <alexey.khit@gmail.com>
Date: Mon, 7 Nov 2022 23:36:13 +0300
Subject: [PATCH] Update MSE procession on JS side

---
 www/mse.html | 118 +++++++++++++++++++++------------------------------
 1 file changed, 48 insertions(+), 70 deletions(-)

diff --git a/www/mse.html b/www/mse.html
index b65215c0..2c3eb029 100644
--- a/www/mse.html
+++ b/www/mse.html
@@ -25,97 +25,75 @@
 <!-- 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";
+    const video = document.querySelector('#video');
 
-    let mediaSource;
+    function init() {
+        let mediaSource, sourceBuffer, queueBuffer = [];
 
-    ws.onopen = () => {
-        console.log("Start WS");
+        const ws = new WebSocket(`ws${baseUrl.substr(4)}/api/ws${location.search}`);
+        ws.binaryType = "arraybuffer";
 
-        // 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"}));
+        ws.onopen = () => {
+            mediaSource = new MediaSource();
+            video.src = URL.createObjectURL(mediaSource);
+            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);
 
-    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(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());
+                if (data.type === "mse") {
+                    sourceBuffer = mediaSource.addSourceBuffer(data.value);
+                    sourceBuffer.mode = "segments"; // segments or sequence
+                    sourceBuffer.onupdateend = () => {
+                        if (!sourceBuffer.updating && queueBuffer.length > 0) {
+                            try {
+                                sourceBuffer.appendBuffer(queueBuffer.shift());
+                            } catch (e) {
+                                // console.warn(e);
+                            }
+                        }
                     }
                 }
-            }
-        } else {
-            if (sourceBuffer.updating) {
-                queueBuffer.push(ev.data)
+            } else if (sourceBuffer.updating || queueBuffer.length > 0) {
+                queueBuffer.push(ev.data);
             } else {
                 try {
                     sourceBuffer.appendBuffer(ev.data);
                 } catch (e) {
-                    console.warn(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);
                 }
             }
         }
+
+        video.onpause = () => {
+            ws.close();
+            setTimeout(init, 0);
+        }
     }
 
-    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;
-    }
+    init();
 </script>
 </body>
 </html>