use managed media source api on safari

package.json

@@ -78,7 +78,6 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^8.0.7",
     "react-pdf": "^9.1.0",
-    "react-player": "^2.16.0",
     "react-redux": "^8.1.1",
     "react-webcam": "^7.2.0",
     "redux": "^4.2.1",
@@ -161,4 +160,4 @@
     "node": ">=20.12.0"
   },
   "packageManager": "[email protected]"
-}
+}

src/Common/hooks/useMSEplayer.ts

@@ -107,7 +107,7 @@ export const useMSEMediaPlayer = ({
       if (mseQueue.length > 0) {
         const packet = mseQueue.shift();
         // Check if SourceBuffer has been removed before appending buffer
-        if (mseSourceBuffer.removed) {
+        if ("removed" in mseSourceBuffer && mseSourceBuffer.removed) {
           console.error("Attempted to append to a removed SourceBuffer.");
           return;
         }
@@ -128,7 +128,7 @@ export const useMSEMediaPlayer = ({
   const readPacket = (packet: any) => {
     if (!mseStreamingStarted) {
       // Check if SourceBuffer has been removed before appending buffer
-      if (mseSourceBuffer.removed) {
+      if ("removed" in mseSourceBuffer && mseSourceBuffer.removed) {
         console.error("Attempted to append to a removed SourceBuffer.");
         return;
       }
@@ -146,8 +146,16 @@ export const useMSEMediaPlayer = ({
     // location.protocol == 'https:' ? protocol = 'wss' : protocol = 'ws';
     try {
       wsRef.current?.close();
-      const mse = new MediaSource();
-      if (videoEl) {
+      if (!videoEl) return;
+
+      let mse: MediaSource;
+      if ("ManagedMediaSource" in window) {
+        mse = new (window.ManagedMediaSource as typeof MediaSource)();
+        console.log(mse);
+        videoEl.disableRemotePlayback = true;
+        videoEl.srcObject = mse;
+      } else {
+        mse = new MediaSource();
         videoEl.src = window.URL.createObjectURL(mse);
       }
 

src/Components/CameraFeed/CameraFeed.tsx

@@ -3,7 +3,6 @@ import { AssetData } from "../Assets/AssetTypes";
 import useOperateCamera, { PTZPayload } from "./useOperateCamera";
 import usePlayer from "./usePlayer";
 import { getStreamUrl } from "./utils";
-import ReactPlayer from "react-player";
 import { classNames, isIOS } from "../../Utils/utils";
 import FeedAlert, { FeedAlertState } from "./FeedAlert";
 import FeedNetworkSignal from "./FeedNetworkSignal";
@@ -31,7 +30,7 @@ interface Props {
 }
 
 export default function CameraFeed(props: Props) {
-  const playerRef = useRef<HTMLVideoElement | ReactPlayer | null>(null);
+  const playerRef = useRef<HTMLVideoElement | null>(null);
   const playerWrapperRef = useRef<HTMLDivElement>(null);
   const streamUrl = getStreamUrl(props.asset);
   const inlineControls = useBreakpoints({ default: false, sm: true });
@@ -225,42 +224,18 @@ export default function CameraFeed(props: Props) {
           )}
 
           {/* Video Player */}
-          {isIOS ? (
-            <div className="absolute inset-0">
-              <ReactPlayer
-                url={streamUrl}
-                ref={playerRef.current as LegacyRef<ReactPlayer>}
-                controls={false}
-                pip={false}
-                playsinline
-                playing
-                muted
-                width="100%"
-                height="100%"
-                onPlay={player.onPlayCB}
-                onEnded={() => player.setStatus("stop")}
-                onError={(e, _, hlsInstance) => {
-                  if (e === "hlsError") {
-                    const recovered = hlsInstance.recoverMediaError();
-                    console.info(recovered);
-                  }
-                }}
-              />
-            </div>
-          ) : (
-            <video
-              onContextMenu={(e) => e.preventDefault()}
-              className="absolute inset-x-0 mx-auto aspect-video max-h-full w-full"
-              id="mse-video"
-              autoPlay
-              muted
-              disablePictureInPicture
-              playsInline
-              onPlay={player.onPlayCB}
-              onEnded={() => player.setStatus("stop")}
+          <video
+            onContextMenu={(e) => e.preventDefault()}
+            className="absolute inset-x-0 mx-auto aspect-video max-h-full w-full"
+            id="mse-video"
+            autoPlay
+            muted
+            disablePictureInPicture
+            playsInline
+            onPlay={player.onPlayCB}
+            onEnded={() => player.setStatus("stop")}
               ref={playerRef as LegacyRef<HTMLVideoElement>}
-            />
-          )}
+          />
 
           {inlineControls && player.status === "playing" && controls}
         </div>

src/Components/CameraFeed/CameraFeedOld.tsx

@@ -22,7 +22,6 @@ import Page from "../Common/components/Page.js";
 import ConfirmDialog from "../Common/ConfirmDialog.js";
 import { FieldLabel } from "../Form/FormFields/FormField.js";
 import useFullscreen from "../../Common/hooks/useFullscreen.js";
-import ReactPlayer from "react-player";
 import { isIOS } from "../../Utils/utils.js";
 import TextFormField from "../Form/FormFields/TextFormField.js";
 
@@ -111,9 +110,7 @@ const CameraFeedOld = (props: any) => {
 
   const videoEl = liveFeedPlayerRef.current as HTMLVideoElement;
 
-  const streamUrl = isIOS
-    ? `https://${middlewareHostname}/stream/${cameraAsset?.accessKey}/channel/0/hls/live/index.m3u8?uuid=${cameraAsset?.accessKey}&channel=0`
-    : `wss://${middlewareHostname}/stream/${cameraAsset?.accessKey}/channel/0/mse?uuid=${cameraAsset?.accessKey}&channel=0`;
+  const streamUrl = `wss://${middlewareHostname}/stream/${cameraAsset?.accessKey}/channel/0/mse?uuid=${cameraAsset?.accessKey}&channel=0`;
 
   const { startStream } = useMSEMediaPlayer({
     config: {
@@ -416,56 +413,24 @@ const CameraFeedOld = (props: any) => {
       <div className="mt-4 flex flex-col">
         <div className="relative mt-4 flex flex-col gap-4 lg:flex-row">
           <div className="flex-1">
-            {/* ADD VIDEO PLAYER HERE */}
             <div className="relative mb-4 aspect-video w-full rounded bg-primary-100 lg:mb-0">
-              {isIOS ? (
-                <div className="absolute inset-0">
-                  <ReactPlayer
-                    url={streamUrl}
-                    ref={liveFeedPlayerRef.current}
-                    controls={false}
-                    playsinline
-                    playing
-                    muted
-                    width="100%"
-                    height="100%"
-                    onPlay={() => {
-                      setVideoStartTime(() => new Date());
-                      setStreamStatus(StreamStatus.Playing);
-                    }}
-                    onWaiting={() => {
-                      const delay = calculateVideoLiveDelay();
-                      if (delay > 5) {
-                        setStreamStatus(StreamStatus.Loading);
-                      }
-                    }}
-                    onError={(e, _, hlsInstance) => {
-                      if (e === "hlsError") {
-                        const recovered = hlsInstance.recoverMediaError();
-                        console.info(recovered);
-                      }
-                    }}
-                  />
-                </div>
-              ) : (
-                <video
-                  id="mse-video"
-                  autoPlay
-                  muted
-                  playsInline
-                  className="z-10 h-full w-full"
-                  ref={liveFeedPlayerRef}
-                  onPlay={() => {
-                    setVideoStartTime(() => new Date());
-                  }}
-                  onWaiting={() => {
-                    const delay = calculateVideoLiveDelay();
-                    if (delay > 5) {
-                      setStreamStatus(StreamStatus.Loading);
-                    }
-                  }}
-                ></video>
-              )}
+              <video
+                id="mse-video"
+                autoPlay
+                muted
+                playsInline
+                className="z-10 h-full w-full"
+                ref={liveFeedPlayerRef}
+                onPlay={() => {
+                  setVideoStartTime(() => new Date());
+                }}
+                onWaiting={() => {
+                  const delay = calculateVideoLiveDelay();
+                  if (delay > 5) {
+                    setStreamStatus(StreamStatus.Loading);
+                  }
+                }}
+              ></video>
 
               {streamStatus === StreamStatus.Playing &&
                 calculateVideoLiveDelay() > 3 && (

src/Components/CameraFeed/usePlayer.tsx

@@ -1,31 +1,25 @@
 import { MutableRefObject, useCallback, useState } from "react";
-import ReactPlayer from "react-player";
-import { isIOS } from "../../Utils/utils";
-import { useHLSPLayer } from "../../Common/hooks/useHLSPlayer";
 import { IOptions, useMSEMediaPlayer } from "../../Common/hooks/useMSEplayer";
 
 export type StreamStatus = "playing" | "stop" | "loading" | "offline";
 
 export default function usePlayer(
   streamUrl: string,
-  ref: MutableRefObject<HTMLVideoElement | ReactPlayer | null>,
+  ref: MutableRefObject<HTMLVideoElement | null>,
 ) {
   const [playedOn, setPlayedOn] = useState<Date>();
   const [status, setStatus] = useState<StreamStatus>("stop");
 
   // Voluntarily disabling react-hooks/rules-of-hooks for this line as order of
   // hooks is maintained (since platform won't change in runtime)
-  const _start = isIOS
-    ? // eslint-disable-next-line react-hooks/rules-of-hooks
-      useHLSPLayer(ref.current as ReactPlayer).startStream
-    : // eslint-disable-next-line react-hooks/rules-of-hooks
-      useMSEMediaPlayer({
-        // Voluntarily set to "" as it's used by `stopStream` only (which is not
-        // used by this hook)
-        config: { middlewareHostname: "" },
-        url: streamUrl,
-        videoEl: ref.current as HTMLVideoElement,
-      }).startStream;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const _start = useMSEMediaPlayer({
+    // Voluntarily set to "" as it's used by `stopStream` only (which is not
+    // used by this hook)
+    config: { middlewareHostname: "" },
+    url: streamUrl,
+    videoEl: ref.current as HTMLVideoElement,
+  }).startStream;
 
   const initializeStream = useCallback(
     ({ onSuccess, onError }: IOptions) => {
@@ -39,7 +33,7 @@ export default function usePlayer(
         },
       });
     },
-    [ref.current, streamUrl],
+    [ref.current, streamUrl,],
   );
 
   const onPlayCB = () => {

src/Components/CameraFeed/utils.ts

@@ -1,7 +1,6 @@
 import { MutableRefObject } from "react";
 import { AssetClass, AssetData } from "../Assets/AssetTypes";
 import { getCameraConfig } from "../../Utils/transformUtils";
-import { isIOS } from "../../Utils/utils";
 
 export const calculateVideoDelay = (
   ref: MutableRefObject<HTMLVideoElement | null>,
@@ -26,7 +25,5 @@ export const getStreamUrl = (asset: AssetData) => {
   const host = asset.resolved_middleware?.hostname;
   const uuid = config.accessKey;
 
-  return isIOS
-    ? `https://${host}/stream/${uuid}/channel/0/hls/live/index.m3u8?uuid=${uuid}&channel=0`
-    : `wss://${host}/stream/${uuid}/channel/0/mse?uuid=${uuid}&channel=0`;
+  return `wss://${host}/stream/${uuid}/channel/0/mse?uuid=${uuid}&channel=0`;
 };