increase logging and reset live mode after camera is no longer active on dashboard only

web/src/components/player/LivePlayer.tsx

@@ -35,6 +35,7 @@ type LivePlayerProps = {
   onClick?: () => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onError?: (error: LivePlayerError) => void;
+  onResetLiveMode?: () => void;
 };
 
 export default function LivePlayer({
@@ -53,6 +54,7 @@ export default function LivePlayer({
   onClick,
   setFullResolution,
   onError,
+  onResetLiveMode,
 }: LivePlayerProps) {
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
   // camera activity
@@ -88,6 +90,7 @@ export default function LivePlayer({
       const timer = setTimeout(() => {
         if (liveReadyRef.current && !cameraActiveRef.current) {
           setLiveReady(false);
+          onResetLiveMode?.();
         }
       }, 500);
 
@@ -207,7 +210,12 @@ export default function LivePlayer({
   }
 
   useEffect(() => {
-    console.log(cameraConfig.name, "switching to", preferredLiveMode);
+    console.log(
+      cameraConfig.name,
+      cameraConfig.live.stream_name,
+      "switching to",
+      preferredLiveMode,
+    );
   }, [preferredLiveMode]);
 
   return (

web/src/components/player/MsePlayer.tsx

@@ -224,8 +224,10 @@ function MSEPlayer({
               onDisconnect();
             }
             if (isIOS || isSafari) {
+              console.log(camera, "Safari MSE sourceopen error");
               onError?.("mse-decode");
             } else {
+              console.log(camera, "MSE sourceopen error");
               onError?.("startup");
             }
           });
@@ -254,8 +256,10 @@ function MSEPlayer({
               onDisconnect();
             }
             if (isIOS || isSafari) {
+              console.log(camera, "Safari MSE sourceopen error");
               onError?.("mse-decode");
             } else {
+              console.log(camera, "MSE sourceopen error");
               onError?.("startup");
             }
           });
@@ -481,6 +485,7 @@ function MSEPlayer({
           (bufferThreshold > 10 || bufferTime > 10)
         ) {
           onDisconnect();
+          console.log(camera, "MSE stream buffer is > 10 seconds");
           onError?.("stalled");
         }
 
@@ -533,6 +538,7 @@ function MSEPlayer({
                 videoRef.current
               ) {
                 onDisconnect();
+                console.log(camera, "MSE buffer timeout > 3 seconds");
                 onError("stalled");
               }
             }, 3000),
@@ -547,6 +553,7 @@ function MSEPlayer({
           if (wsRef.current) {
             onDisconnect();
           }
+          console.log(camera, "MSE network error");
           onError?.("startup");
         }
 
@@ -558,6 +565,7 @@ function MSEPlayer({
           if (wsRef.current) {
             onDisconnect();
           }
+          console.log(camera, "Safari MSE decoding error");
           onError?.("mse-decode");
         }
 
@@ -567,6 +575,7 @@ function MSEPlayer({
           onDisconnect();
           if (errorCount >= 3) {
             // too many mse errors, try jsmpeg
+            console.log(camera, "too many MSE errors");
             onError?.("startup");
           } else {
             reconnect(5000);

web/src/views/live/DraggableGridLayout.tsx

@@ -55,6 +55,7 @@ type DraggableGridLayoutProps = {
   setIsEditMode: React.Dispatch<React.SetStateAction<boolean>>;
   fullscreen: boolean;
   toggleFullscreen: () => void;
+  resetPreferredLiveMode: (camera: string) => void;
 };
 export default function DraggableGridLayout({
   cameras,
@@ -69,6 +70,7 @@ export default function DraggableGridLayout({
   setIsEditMode,
   fullscreen,
   toggleFullscreen,
+  resetPreferredLiveMode,
 }: DraggableGridLayoutProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
@@ -477,6 +479,7 @@ export default function DraggableGridLayout({
                       return newModes;
                     });
                   }}
+                  onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
                 >
                   {isEditMode && showCircles && <CornerCircles />}
                 </LivePlayerGridItem>
@@ -635,6 +638,7 @@ type LivePlayerGridItemProps = {
   preferredLiveMode: LivePlayerMode;
   onClick: () => void;
   onError: (e: LivePlayerError) => void;
+  onResetLiveMode: () => void;
 };
 
 const LivePlayerGridItem = React.forwardRef<
@@ -655,6 +659,7 @@ const LivePlayerGridItem = React.forwardRef<
       preferredLiveMode,
       onClick,
       onError,
+      onResetLiveMode,
       ...props
     },
     ref,
@@ -676,6 +681,7 @@ const LivePlayerGridItem = React.forwardRef<
           preferredLiveMode={preferredLiveMode}
           onClick={onClick}
           onError={onError}
+          onResetLiveMode={onResetLiveMode}
           containerRef={ref as React.RefObject<HTMLDivElement>}
         />
         {children}

web/src/views/live/LiveDashboardView.tsx

@@ -214,6 +214,30 @@ export default function LiveDashboardView({
     setPreferredLiveModes(newPreferredLiveModes);
   }, [cameras, config, windowVisible]);
 
+  const resetPreferredLiveMode = useCallback(
+    (cameraName: string) => {
+      const mseSupported =
+        "MediaSource" in window || "ManagedMediaSource" in window;
+      const isRestreamed =
+        config && Object.keys(config.go2rtc.streams || {}).includes(cameraName);
+
+      setPreferredLiveModes((prevModes) => {
+        const newModes = { ...prevModes };
+
+        if (!mseSupported) {
+          newModes[cameraName] = isRestreamed ? "webrtc" : "jsmpeg";
+        } else {
+          newModes[cameraName] = isRestreamed ? "mse" : "jsmpeg";
+        }
+
+        console.log("resetting", cameraName, "to", newModes[cameraName]);
+
+        return newModes;
+      });
+    },
+    [config],
+  );
+
   const cameraRef = useCallback(
     (node: HTMLElement | null) => {
       if (!visibleCameraObserver.current) {
@@ -394,6 +418,7 @@ export default function LiveDashboardView({
                   autoLive={autoLiveView}
                   onClick={() => onSelectCamera(camera.name)}
                   onError={(e) => handleError(camera.name, e)}
+                  onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
                 />
               );
             })}
@@ -442,6 +467,7 @@ export default function LiveDashboardView({
           setIsEditMode={setIsEditMode}
           fullscreen={fullscreen}
           toggleFullscreen={toggleFullscreen}
+          resetPreferredLiveMode={resetPreferredLiveMode}
         />
       )}
     </div>