apply streaming settings in camera groups

web/src/components/player/BirdseyeLivePlayer.tsx

@@ -58,6 +58,7 @@ export default function BirdseyeLivePlayer({
         height={birdseyeConfig.height}
         containerRef={containerRef}
         playbackEnabled={true}
+        useWebGL={true}
       />
     );
   } else {

web/src/components/player/JSMpegPlayer.tsx

@@ -12,6 +12,7 @@ type JSMpegPlayerProps = {
   height: number;
   containerRef: React.MutableRefObject<HTMLDivElement | null>;
   playbackEnabled: boolean;
+  useWebGL: boolean;
   onPlaying?: () => void;
 };
 
@@ -22,6 +23,7 @@ export default function JSMpegPlayer({
   className,
   containerRef,
   playbackEnabled,
+  useWebGL = false,
   onPlaying,
 }: JSMpegPlayerProps) {
   const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
@@ -123,8 +125,8 @@ export default function JSMpegPlayer({
           {
             protocols: [],
             audio: false,
-            disableGl: camera != "birdseye",
+            disableGl: !useWebGL,
-            disableWebAssembly: camera != "birdseye",
+            disableWebAssembly: !useWebGL,
             videoBufferSize: 1024 * 1024 * 4,
             onVideoDecode: () => {
               if (!hasDataRef.current) {

web/src/components/player/LivePlayer.tsx

@@ -29,6 +29,7 @@ type LivePlayerProps = {
   streamName: string;
   preferredLiveMode: LivePlayerMode;
   showStillWithoutActivity?: boolean;
+  useWebGL: boolean;
   windowVisible?: boolean;
   playAudio?: boolean;
   micEnabled?: boolean; // only webrtc supports mic
@@ -49,6 +50,7 @@ export default function LivePlayer({
   streamName,
   preferredLiveMode,
   showStillWithoutActivity = true,
+  useWebGL = false,
   windowVisible = true,
   playAudio = false,
   micEnabled = false,
@@ -219,6 +221,7 @@ export default function LivePlayer({
           playbackEnabled={
             cameraActive || !showStillWithoutActivity || liveReady
           }
+          useWebGL={useWebGL}
           containerRef={containerRef ?? internalContainerRef}
           onPlaying={playerIsPlaying}
         />

web/src/components/settings/CameraStreamingDialog.tsx

@@ -21,7 +21,8 @@ import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
 import {
   FrigateConfig,
-  GroupStreamingSettingsType,
+  GroupStreamingSettings,
+  StreamType,
 } from "@/types/frigateConfig";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { LuSettings } from "react-icons/lu";
@@ -30,9 +31,9 @@ type CameraStreamingDialogProps = {
   camera: string;
   selectedCameras: string[];
   config?: FrigateConfig;
-  groupStreamingSettings: GroupStreamingSettingsType;
+  groupStreamingSettings: GroupStreamingSettings;
   setGroupStreamingSettings: React.Dispatch<
-    React.SetStateAction<GroupStreamingSettingsType>
+    React.SetStateAction<GroupStreamingSettings>
   >;
 };
 
@@ -47,7 +48,7 @@ export function CameraStreamingDialog({
   const [isLoading, setIsLoading] = useState(false);
 
   const [streamName, setStreamName] = useState("");
-  const [streamType, setStreamType] = useState("smart");
+  const [streamType, setStreamType] = useState<StreamType>("smart");
   const [compatibilityMode, setCompatibilityMode] = useState(false);
 
   useEffect(() => {
@@ -154,7 +155,10 @@ export function CameraStreamingDialog({
             <Label htmlFor="streaming-method" className="text-right">
               Streaming Method
             </Label>
-            <Select value={streamType} onValueChange={setStreamType}>
+            <Select
+              value={streamType}
+              onValueChange={(value) => setStreamType(value as StreamType)}
+            >
               <SelectTrigger className="">
                 <SelectValue placeholder="Choose a streaming option" />
               </SelectTrigger>

web/src/types/frigateConfig.ts

@@ -229,9 +229,11 @@ export type CameraGroupConfig = {
   order: number;
 };
 
+export type StreamType = "no-streaming" | "smart" | "continuous";
+
 export type CameraStreamingSettings = {
   streamName: string;
-  streamType: string;
+  streamType: StreamType;
   compatibilityMode: boolean;
 };
 

web/src/views/live/DraggableGridLayout.tsx

@@ -57,6 +57,7 @@ type DraggableGridLayoutProps = {
   setIsEditMode: React.Dispatch<React.SetStateAction<boolean>>;
   fullscreen: boolean;
   toggleFullscreen: () => void;
+  allGroupsStreamingSettings: AllGroupsStreamingSettings;
   setAllGroupsStreamingSettings: React.Dispatch<
     React.SetStateAction<AllGroupsStreamingSettings>
   >;
@@ -74,6 +75,7 @@ export default function DraggableGridLayout({
   setIsEditMode,
   fullscreen,
   toggleFullscreen,
+  allGroupsStreamingSettings,
   setAllGroupsStreamingSettings,
 }: DraggableGridLayoutProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -84,6 +86,16 @@ export default function DraggableGridLayout({
   const { preferredLiveModes, setPreferredLiveModes, resetPreferredLiveMode } =
     useCameraLiveMode(cameras, windowVisible);
 
+  const [globalAutoLive] = usePersistence("autoLiveView", true);
+
+  const currentGroupStreamingSettings = useMemo(() => {
+    if (cameraGroup && cameraGroup != "default" && allGroupsStreamingSettings) {
+      return allGroupsStreamingSettings[cameraGroup];
+    }
+  }, [allGroupsStreamingSettings, cameraGroup]);
+
+  // grid layout
+
   const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);
 
   const [gridLayout, setGridLayout, isGridLayoutLoaded] = usePersistence<
@@ -426,9 +438,25 @@ export default function DraggableGridLayout({
               } else {
                 grow = "aspect-video";
               }
+              const streamName =
+                currentGroupStreamingSettings?.[camera.name]?.streamName ||
+                Object.values(camera.live.streams)[0];
+              const autoLive =
+                currentGroupStreamingSettings?.[camera.name]?.streamType !==
+                "no-streaming";
+              const showStillWithoutActivity =
+                currentGroupStreamingSettings?.[camera.name]?.streamType !==
+                "continuous";
+              const useWebGL =
+                currentGroupStreamingSettings?.[camera.name]
+                  ?.compatibilityMode || false;
               return (
                 <LivePlayerGridItem
                   key={camera.name}
+                  streamName={streamName}
+                  autoLive={autoLive ?? globalAutoLive}
+                  showStillWithoutActivity={showStillWithoutActivity ?? true}
+                  useWebGL={useWebGL}
                   cameraRef={cameraRef}
                   className={cn(
                     "rounded-lg bg-black md:rounded-2xl",
@@ -616,6 +644,10 @@ type LivePlayerGridItemProps = {
   onClick: () => void;
   onError: (e: LivePlayerError) => void;
   onResetLiveMode: () => void;
+  streamName: string;
+  autoLive: boolean;
+  showStillWithoutActivity: boolean;
+  useWebGL: boolean;
 };
 
 const LivePlayerGridItem = React.forwardRef<
@@ -637,6 +669,10 @@ const LivePlayerGridItem = React.forwardRef<
       onClick,
       onError,
       onResetLiveMode,
+      autoLive,
+      showStillWithoutActivity,
+      streamName,
+      useWebGL,
       ...props
     },
     ref,
@@ -656,11 +692,14 @@ const LivePlayerGridItem = React.forwardRef<
           windowVisible={windowVisible}
           cameraConfig={cameraConfig}
           preferredLiveMode={preferredLiveMode}
-          streamName={Object.values(cameraConfig.live.streams)[0]}
+          streamName={streamName}
           onClick={onClick}
           onError={onError}
           onResetLiveMode={onResetLiveMode}
           containerRef={ref as React.RefObject<HTMLDivElement>}
+          autoLive={autoLive}
+          showStillWithoutActivity={showStillWithoutActivity}
+          useWebGL={useWebGL}
         />
         {children}
       </div>

web/src/views/live/LiveDashboardView.tsx

@@ -197,22 +197,12 @@ export default function LiveDashboardView({
   const [persistedStreamingSettings, _, isStreamingSettingsLoaded] =
     usePersistence<AllGroupsStreamingSettings>("streaming-settings");
 
-  const currentGroupStreamingSettings = useMemo(() => {
-    if (cameraGroup && cameraGroup != "default" && allGroupsStreamingSettings) {
-      return allGroupsStreamingSettings[cameraGroup];
-    }
-  }, [allGroupsStreamingSettings, cameraGroup]);
-
   useEffect(() => {
     if (isStreamingSettingsLoaded) {
       setAllGroupsStreamingSettings(persistedStreamingSettings ?? {});
     }
   }, [isStreamingSettingsLoaded, persistedStreamingSettings]);
 
-  useEffect(() => {
-    // console.log("group settings", cameraGroup, currentGroupStreamingSettings);
-  }, [currentGroupStreamingSettings, cameraGroup]);
-
   const cameraRef = useCallback(
     (node: HTMLElement | null) => {
       if (!visibleCameraObserver.current) {
@@ -384,6 +374,7 @@ export default function LiveDashboardView({
                   cameraConfig={camera}
                   preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
                   autoLive={autoLiveView}
+                  useWebGL={false}
                   streamName={Object.values(camera.live.streams)[0]}
                   onClick={() => onSelectCamera(camera.name)}
                   onError={(e) => handleError(camera.name, e)}
@@ -436,6 +427,7 @@ export default function LiveDashboardView({
           setIsEditMode={setIsEditMode}
           fullscreen={fullscreen}
           toggleFullscreen={toggleFullscreen}
+          allGroupsStreamingSettings={allGroupsStreamingSettings}
           setAllGroupsStreamingSettings={setAllGroupsStreamingSettings}
         />
       )}