diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx index b2a5998c9..165829719 100644 --- a/web/src/views/live/DraggableGridLayout.tsx +++ b/web/src/views/live/DraggableGridLayout.tsx @@ -104,7 +104,7 @@ export default function DraggableGridLayout({ ); setPreferredLiveModes(newPreferredLiveModes); - }, [cameras, config]); + }, [cameras, config, windowVisible]); const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []); diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx index cafd6647a..bcee49811 100644 --- a/web/src/views/live/LiveDashboardView.tsx +++ b/web/src/views/live/LiveDashboardView.tsx @@ -133,33 +133,6 @@ export default function LiveDashboardView({ [key: string]: LivePlayerMode; }>({}); - useEffect(() => { - if (!cameras) return; - - const mseSupported = - "MediaSource" in window || "ManagedMediaSource" in window; - - const newPreferredLiveModes = cameras.reduce( - (acc, camera) => { - const isRestreamed = - config && - Object.keys(config.go2rtc.streams || {}).includes( - camera.live.stream_name, - ); - - if (!mseSupported) { - acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg"; - } else { - acc[camera.name] = isRestreamed ? "mse" : "jsmpeg"; - } - return acc; - }, - {} as { [key: string]: LivePlayerMode }, - ); - - setPreferredLiveModes(newPreferredLiveModes); - }, [cameras, config]); - const [{ height: containerHeight }] = useResizeObserver(containerRef); const hasScrollbar = useMemo(() => { @@ -213,6 +186,33 @@ export default function LiveDashboardView({ }; }, []); + useEffect(() => { + if (!cameras) return; + + const mseSupported = + "MediaSource" in window || "ManagedMediaSource" in window; + + const newPreferredLiveModes = cameras.reduce( + (acc, camera) => { + const isRestreamed = + config && + Object.keys(config.go2rtc.streams || {}).includes( + camera.live.stream_name, + ); + + if (!mseSupported) { + acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg"; + } else { + acc[camera.name] = isRestreamed ? "mse" : "jsmpeg"; + } + return acc; + }, + {} as { [key: string]: LivePlayerMode }, + ); + + setPreferredLiveModes(newPreferredLiveModes); + }, [cameras, config, windowVisible]); + const cameraRef = useCallback( (node: HTMLElement | null) => { if (!visibleCameraObserver.current) {