Create live mode hook and make sure jsmpeg can be used

web/src/components/player/LivePlayer.tsx

@@ -16,15 +16,15 @@ import { BsSoundwave } from "react-icons/bs";
 import Chip from "../Chip";
 import useCameraActivity from "@/hooks/use-camera-activity";
 import { useRecordingsState } from "@/api/ws";
+import { LivePlayerMode } from "@/types/live";
+import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 
 const emptyObject = Object.freeze({});
 
-type LivePlayerMode = "webrtc" | "mse" | "jsmpeg" | "debug";
-
 type LivePlayerProps = {
   className?: string;
   cameraConfig: CameraConfig;
-  liveMode?: LivePlayerMode;
+  preferredLiveMode?: LivePlayerMode;
   showStillWithoutActivity?: boolean;
 };
 
@@ -33,13 +33,15 @@ type Options = { [key: string]: boolean };
 export default function LivePlayer({
   className,
   cameraConfig,
-  liveMode = "jsmpeg",
+  preferredLiveMode,
   showStillWithoutActivity = true,
 }: LivePlayerProps) {
   // camera activity
   const { activeMotion, activeAudio, activeTracking } =
     useCameraActivity(cameraConfig);
 
+  const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
+
   const [liveReady, setLiveReady] = useState(false);
   useEffect(() => {
     if (!liveReady) {

web/src/hooks/use-camera-live-mode.ts

@@ -0,0 +1,49 @@
+import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
+import { useMemo } from "react";
+import useSWR from "swr";
+import { usePersistence } from "./use-persistence";
+import { LivePlayerMode } from "@/types/live";
+
+export default function useCameraLiveMode(
+  cameraConfig: CameraConfig,
+  preferredMode?: string
+): LivePlayerMode {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const restreamEnabled = useMemo(() => {
+    if (!config) {
+      return false;
+    }
+
+    return (
+      cameraConfig &&
+      Object.keys(config.go2rtc.streams || {}).includes(
+        cameraConfig.live.stream_name
+      )
+    );
+  }, [config, cameraConfig]);
+  const defaultLiveMode = useMemo(() => {
+    if (config && cameraConfig) {
+      if (restreamEnabled) {
+        return cameraConfig.ui.live_mode || config?.ui.live_mode;
+      }
+
+      return "jsmpeg";
+    }
+
+    return undefined;
+  }, [cameraConfig, restreamEnabled]);
+  const [viewSource] = usePersistence(
+    `${cameraConfig.name}-source`,
+    defaultLiveMode
+  );
+
+  if (
+    restreamEnabled &&
+    (preferredMode == "mse" || preferredMode == "webrtc")
+  ) {
+    return preferredMode;
+  } else {
+    return viewSource;
+  }
+}

web/src/pages/Live.tsx

@@ -87,6 +87,7 @@ function Live() {
               key={camera.name}
               className={`mb-2 md:mb-0 rounded-2xl bg-black ${grow}`}
               cameraConfig={camera}
+              preferredLiveMode="mse"
             />
           );
         })}

web/src/types/live.ts

@@ -0,0 +1 @@
+export type LivePlayerMode = "webrtc" | "mse" | "jsmpeg" | "debug";