From 3984e358863d6e405187cdda45f64c819f1c9f05 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Tue, 8 Nov 2022 06:10:29 -0700
Subject: [PATCH] Update MSE player

---
 web/src/components/MsePlayer.jsx | 81 +++++++++++++-------------------
 1 file changed, 32 insertions(+), 49 deletions(-)

diff --git a/web/src/components/MsePlayer.jsx b/web/src/components/MsePlayer.jsx
index cc5ba61f5..2e228bd90 100644
--- a/web/src/components/MsePlayer.jsx
+++ b/web/src/components/MsePlayer.jsx
@@ -10,79 +10,62 @@ export default function MsePlayer({ camera, width, height }) {
 
     // support api_path
     const ws = new WebSocket(url);
-    ws.binaryType = 'arraybuffer';
-
-    let mediaSource;
+    ws.binaryType = "arraybuffer";
+    let mediaSource, sourceBuffer, queueBuffer = [];
 
     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();
       video.src = URL.createObjectURL(mediaSource);
       mediaSource.onsourceopen = () => {
         mediaSource.onsourceopen = null;
         URL.revokeObjectURL(video.src);
-        ws.send(JSON.stringify({ type: 'mse' }));
+        ws.send(JSON.stringify({"type": "mse"}));
       };
     };
 
-    let sourceBuffer,
-      queueBuffer = [];
-
-    ws.onmessage = (ev) => {
+    ws.onmessage = ev => {
       if (typeof ev.data === 'string') {
         const data = JSON.parse(ev.data);
 
-        if (data.type === 'mse') {
+
+        if (data.type === "mse") {
           sourceBuffer = mediaSource.addSourceBuffer(data.value);
-          // important: segments supports TrackFragDecodeTime
-          // sequence supports only TrackFragRunEntry Duration
-          sourceBuffer.mode = 'segments';
+          sourceBuffer.mode = "segments"; // segments or sequence
           sourceBuffer.onupdateend = () => {
             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);
       } else {
-        sourceBuffer.appendBuffer(ev.data);
+        try {
+          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);
+      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);
+        }
       }
-      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;
-    };
+    video.onpause = () => {
+      ws.close();
+    }
   }, [url]);
 
   return (