From c85df9c691c235000a4607ed9bbc9bcf5d7c34bd Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 17 Dec 2022 16:56:26 -0700
Subject: [PATCH] Fix MSE Issues (#4725)

* Don't close mse when pausing video

* Add message about MSE on iOS
---
 web/src/components/MsePlayer.jsx |  7 ++++---
 web/src/routes/Camera.jsx        | 25 ++++++++++++++++++-------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/web/src/components/MsePlayer.jsx b/web/src/components/MsePlayer.jsx
index a1b2ed9ea..27e8d7047 100644
--- a/web/src/components/MsePlayer.jsx
+++ b/web/src/components/MsePlayer.jsx
@@ -64,10 +64,11 @@ export default function MsePlayer({ camera, width, height }) {
       }
     };
 
-    video.onpause = () => {
+    return () => {
+      const video = document.getElementById('video');
+      video.srcObject = null;
       ws.close();
-      video.src = null;
-    }
+    };
   }, [url]);
 
   return (
diff --git a/web/src/routes/Camera.jsx b/web/src/routes/Camera.jsx
index abcda7d94..2b9a5e396 100644
--- a/web/src/routes/Camera.jsx
+++ b/web/src/routes/Camera.jsx
@@ -15,6 +15,7 @@ import { useApiHost } from '../api';
 import useSWR from 'swr';
 import WebRtcPlayer from '../components/WebRtcPlayer';
 import MsePlayer from '../components/MsePlayer';
+import videojs from 'video.js';
 
 const emptyObject = Object.freeze({});
 
@@ -98,13 +99,23 @@ export default function Camera({ camera }) {
   let player;
   if (viewMode === 'live') {
     if (viewSource == 'mse') {
-      player = (
-        <Fragment>
-          <div className="max-w-5xl">
-            <MsePlayer camera={camera} />
-          </div>
-        </Fragment>
-      );
+      if (videojs.browser.IS_IOS) {
+        player = (
+          <Fragment>
+            <div className="w-5xl text-center text-sm">
+              MSE is not supported on iOS devices. You'll need to use jsmpeg or webRTC. See the docs for more info.
+            </div>
+          </Fragment>
+        );
+      } else {
+        player = (
+          <Fragment>
+            <div className="max-w-5xl">
+              <MsePlayer camera={camera} />
+            </div>
+          </Fragment>
+        );
+      }
     } else if (viewSource == 'webrtc') {
       player = (
         <Fragment>