Revamp media player

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/Components/Assets/configure/CameraConfigure.tsx

@@ -1,6 +1,6 @@
 import { SyntheticEvent } from "react";
 import { AssetData } from "../AssetTypes";
-import LiveFeed from "../../Facility/Consultations/LiveFeed";
+import CameraFeedOld from "../../CameraFeed/CameraFeedOld";
 import { BedSelect } from "../../Common/BedSelect";
 import { BedModel } from "../../Facility/models";
 import { getCameraConfig } from "../../../Utils/transformUtils";
@@ -76,7 +76,7 @@ export default function CameraConfigure(props: CameraConfigureProps) {
         </form>
       </Card>
       <Card className="mt-4">
-        <LiveFeed
+        <CameraFeedOld
           middlewareHostname={facilityMiddlewareHostname}
           asset={getCameraConfig(asset)}
           showRefreshButton={true}

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")}
-              ref={playerRef as LegacyRef<HTMLVideoElement>}
-            />
-          )}
+          <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/Facility/Consultations/LiveFeed.tsx → src/Components/CameraFeed/CameraFeedOld.tsx

@@ -1,33 +1,79 @@
-import { useEffect, useState, useRef, LegacyRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useDispatch } from "react-redux";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 import {
   listAssetBeds,
   partialUpdateAssetBed,
   deleteAssetBed,
-} from "../../../Redux/actions";
-import { getCameraPTZ } from "../../../Common/constants";
-import {
-  StreamStatus,
-  useMSEMediaPlayer,
-} from "../../../Common/hooks/useMSEplayer";
-import { useFeedPTZ } from "../../../Common/hooks/useFeedPTZ";
-import * as Notification from "../../../Utils/Notifications.js";
-import { FeedCameraPTZHelpButton } from "./Feed";
+} from "../../Redux/actions.js";
+import { CameraPTZ, getCameraPTZ } from "../../Common/constants.js";
+import { StreamStatus, useMSEMediaPlayer } from "./useMSEplayer.js";
+import { useFeedPTZ } from "./useFeedPTZ.js";
+import * as Notification from "../../Utils/Notifications.js";
 import { AxiosError } from "axios";
-import { BedSelect } from "../../Common/BedSelect";
-import { BedModel } from "../models";
-import useWindowDimensions from "../../../Common/hooks/useWindowDimensions";
-import CareIcon from "../../../CAREUI/icons/CareIcon";
-import Page from "../../Common/components/Page";
-import ConfirmDialog from "../../Common/ConfirmDialog";
-import { FieldLabel } from "../../Form/FormFields/FormField";
-import useFullscreen from "../../../Common/hooks/useFullscreen";
-import ReactPlayer from "react-player";
-import { isIOS } from "../../../Utils/utils";
-import TextFormField from "../../Form/FormFields/TextFormField";
-
-const LiveFeed = (props: any) => {
+import { BedSelect } from "../Common/BedSelect.js";
+import { BedModel } from "../Facility/models.js";
+import useWindowDimensions from "../../Common/hooks/useWindowDimensions.js";
+import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon.js";
+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 TextFormField from "../Form/FormFields/TextFormField.js";
+
+export const FeedCameraPTZHelpButton = (props: { cameraPTZ: CameraPTZ[] }) => {
+  const { cameraPTZ } = props;
+  return (
+    <button
+      key="option.action"
+      className="tooltip rounded text-2xl text-secondary-600"
+    >
+      <CareIcon icon="l-question-circle" />
+
+      <ul className="tooltip-text tooltip-left -top-60 right-10 p-2 text-sm">
+        {cameraPTZ.map((option) => {
+          return (
+            <li key={option.action} className="flex items-center gap-3 py-2">
+              <span className="w-16 font-semibold">{option.label}</span>
+              <div className="flex gap-1">
+                {option.shortcutKey.map((hotkey, index) => {
+                  const isArrowKey = hotkey.includes("Arrow");
+                  hotkey = hotkey.replace("Control", "Ctrl");
+
+                  const keyElement = (
+                    <div
+                      key={index}
+                      className="rounded-md border border-secondary-500 p-1.5 font-mono shadow-md"
+                    >
+                      {isArrowKey ? (
+                        <CareIcon icon={option.icon as IconName} />
+                      ) : (
+                        hotkey
+                      )}
+                    </div>
+                  );
+
+                  // Skip wrapping with + for joining with next key
+                  if (index === option.shortcutKey.length - 1)
+                    return keyElement;
+
+                  return (
+                    <div key={index} className="flex items-center gap-1">
+                      {keyElement}
+                      <span className="p-1">+</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </button>
+  );
+};
+
+const CameraFeedOld = (props: any) => {
   const middlewareHostname = props.middlewareHostname;
   const [presetsPage, setPresetsPage] = useState(0);
   const cameraAsset = props.asset;
@@ -60,9 +106,7 @@ const LiveFeed = (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: {
@@ -365,56 +409,24 @@ const LiveFeed = (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 as LegacyRef<ReactPlayer>}
-                    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 && (
@@ -671,4 +683,4 @@ const LiveFeed = (props: any) => {
   );
 };
 
-export default LiveFeed;
+export default CameraFeedOld;

src/Common/hooks/useMSEplayer.ts → src/Components/CameraFeed/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,15 @@ 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)();
+        videoEl.disableRemotePlayback = true;
+        videoEl.srcObject = mse;
+      } else {
+        mse = new MediaSource();
         videoEl.src = window.URL.createObjectURL(mse);
       }
 

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";
+import { IOptions, useMSEMediaPlayer } from "./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) => {