Add Auto live view option with transcoding options (#24519)

* implement auto mode for single camera live view

* add transcoded live streams and stream ordering for auto mode

Cameras can now add lower quality live streams that go2rtc transcodes to H.264 on demand. `live.transcode` takes a source stream and a list of heights and bitrates, and each quality becomes a `{camera}_transcode_{height}p` stream. The config validator adds them to `live.streams` without moving any the user already placed, and drops them when transcoding is disabled or a height changes. `create_config.py` writes them into go2rtc's generated config at startup, and saving the config or deleting a camera syncs them through go2rtc's API, so no restart is needed. They use `#hardware`, so go2rtc picks a hardware encoder and falls back to the CPU when there isn't one.

The Live playback settings stream list can be reordered by drag, since its order is the auto ladder. Auto order sorts it by bitrate, measuring native streams through a new admin-only `/go2rtc/streams/{name}/bitrate` endpoint and using the configured bitrate for transcoded ones. A pure reorder wasn't saved before because RJSF, the settings form, and `update_yaml` all ignore map key order. Sections can now mark a map with `orderedMaps`, which sends the whole map with `replace_paths` so `config_set` rewrites it in order.

Transcoded streams aren't in `go2rtc.streams`, which only lists yaml streams, so the frontend treated them as not restreamed and fell back to jsmpeg. Every restream check now goes through `isRestreamedStream`.

Auto treated any stall with no bytes in the last 2 seconds as a dead camera and handed it to the error fallback, which went straight to jsmpeg. Heavy congestion can stop delivery completely, so congested viewers skipped every lower stream. Auto now declines only when stats show the camera offline, and a stall on a live camera steps down. The stream picker also has a Try highest quality button that sends auto back to the top stream.

* fixes

web/src/hooks/use-auto-live-stream.ts

@@ -0,0 +1,126 @@
+import { LiveStreamGovernor } from "@/components/player/LiveStreamGovernor";
+import { isCameraOffline } from "@/hooks/use-camera-activity";
+import { useAutoFrigateStats } from "@/hooks/use-stats";
+import {
+  LiveAutoReason,
+  LiveHealthSample,
+  LivePlayerError,
+} from "@/types/live";
+import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
+
+// one governor per camera ladder for the tab session, so reopening a
+// camera resumes where auto settled
+const governors = new Map<string, LiveStreamGovernor>();
+
+function governorFor(cameraName: string, streams: string[]) {
+  const key = `${cameraName}|${streams.join(",")}`;
+  let governor = governors.get(key);
+  if (!governor) {
+    // the extra rung is the jsmpeg floor
+    governor = new LiveStreamGovernor(streams.length + 1);
+    governors.set(key, governor);
+  }
+  return governor;
+}
+
+type UseAutoLiveStreamProps = {
+  cameraName: string;
+  // go2rtc stream names in config order
+  streams: string[];
+  // auto is the stream setting
+  selected: boolean;
+  // mic, debug, force low-bandwidth, the error fallback latch, or unloaded
+  // preferences own the player
+  paused: boolean;
+};
+
+export type AutoLiveStream = {
+  streamName: string | undefined;
+  atFloor: boolean;
+  reason: LiveAutoReason | undefined;
+  onHealthSample: (sample: LiveHealthSample) => void;
+  handleError: (error: LivePlayerError) => boolean;
+  reset: () => void;
+};
+
+export function useAutoLiveStream({
+  cameraName,
+  streams,
+  selected,
+  paused,
+}: UseAutoLiveStreamProps): AutoLiveStream {
+  const governor = useMemo(
+    () => governorFor(cameraName, streams),
+    [cameraName, streams],
+  );
+  const { rung, reason } = useSyncExternalStore(
+    governor.subscribe,
+    governor.getSnapshot,
+  );
+  const active = selected && !paused;
+
+  const stats = useAutoFrigateStats();
+  const offline = isCameraOffline(stats, cameraName);
+
+  // evidence from before a pin, a pause, or a remount does not count
+  useEffect(() => {
+    if (active) {
+      governor.resetHistory();
+    }
+  }, [active, governor]);
+
+  useEffect(() => {
+    if (!selected) {
+      return;
+    }
+
+    const saveData =
+      (navigator as Navigator & { connection?: { saveData?: boolean } })
+        .connection?.saveData === true;
+    governor.setHoldLow(saveData);
+  }, [selected, governor]);
+
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+
+    // a hidden tab delivers no samples, so its time is not clean time
+    const interval = setInterval(() => {
+      if (document.visibilityState === "visible") {
+        governor.tick();
+      } else {
+        governor.resetHistory();
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [active, governor]);
+
+  const onHealthSample = useCallback(
+    (sample: LiveHealthSample) => {
+      if (active) {
+        governor.sample(sample);
+      }
+    },
+    [active, governor],
+  );
+
+  const handleError = useCallback(
+    (error: LivePlayerError) => active && governor.playerError(error, !offline),
+    [active, governor, offline],
+  );
+
+  const reset = useCallback(() => governor.reset(), [governor]);
+
+  const floor = streams.length;
+
+  return {
+    streamName: selected ? streams[Math.min(rung, floor - 1)] : undefined,
+    atFloor: selected && rung === floor,
+    reason: selected ? reason : undefined,
+    onHealthSample,
+    handleError,
+    reset,
+  };
+}

web/src/hooks/use-camera-activity.ts

@@ -13,6 +13,7 @@ import { useTimelineUtils } from "./use-timeline-utils";
 import useDeepMemo from "./use-deep-memo";
 import { isEqual } from "lodash";
 import { useAutoFrigateStats } from "./use-stats";
+import { FrigateStats } from "@/types/stats";
 import useSWR from "swr";
 import { getAttributeLabels } from "@/utils/iconUtil";
 
@@ -30,6 +31,19 @@ type useCameraActivityReturn = {
   offline: boolean;
 };
 
+export function isCameraOffline(
+  stats: FrigateStats | undefined,
+  cameraName: string | undefined,
+): boolean {
+  if (!stats?.cameras || !cameraName) {
+    return false;
+  }
+
+  return (
+    stats.cameras[cameraName]?.camera_fps == 0 && stats.service.uptime > 60
+  );
+}
+
 export function useCameraActivity(
   camera: CameraConfig | undefined,
   revalidateOnFocus: boolean = true,
@@ -167,25 +181,10 @@ export function useCameraActivity(
 
   const stats = useAutoFrigateStats();
 
-  const offline = useMemo(() => {
-    if (!stats) {
-      return false;
-    }
-
-    const cameras = stats["cameras"];
-
-    if (!cameras) {
-      return false;
-    }
-
-    if (!camera?.name) {
-      return false;
-    }
-
-    return (
-      cameras[camera.name]?.camera_fps == 0 && stats["service"].uptime > 60
-    );
-  }, [camera, stats]);
+  const offline = useMemo(
+    () => isCameraOffline(stats, camera?.name),
+    [camera, stats],
+  );
 
   const isCameraEnabled = cameraEnabled ? cameraEnabled === "ON" : true;
 

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

@@ -4,6 +4,7 @@ import useSWR from "swr";
 import { LivePlayerMode } from "@/types/live";
 import useDeferredStreamMetadata from "./use-deferred-stream-metadata";
 import { detectCameraAudioFeatures } from "@/utils/cameraUtil";
+import { isRestreamedStream } from "@/utils/liveTranscode";
 import {
   evaluateStreamWebRTCAvailability,
   useWebRTCGloballyAvailable,
@@ -51,18 +52,14 @@ export default function useCameraLiveMode(
     cameras.forEach((camera) => {
       if (activeStreams && activeStreams[camera.name]) {
         const selectedStreamName = activeStreams[camera.name];
-        const isRestreamed = Object.keys(config.go2rtc.streams || {}).includes(
-          selectedStreamName,
-        );
+        const isRestreamed = isRestreamedStream(config, selectedStreamName);
 
         if (isRestreamed) {
           streamNames.add(selectedStreamName);
         }
       } else {
         Object.values(camera.live.streams).forEach((streamName) => {
-          const isRestreamed = Object.keys(
-            config.go2rtc.streams || {},
-          ).includes(streamName);
+          const isRestreamed = isRestreamedStream(config, streamName);
 
           if (isRestreamed) {
             streamNames.add(streamName);
@@ -125,9 +122,7 @@ export default function useCameraLiveMode(
     cameras.forEach((camera) => {
       const selectedStreamName =
         activeStreams?.[camera.name] ?? Object.values(camera.live.streams)[0];
-      const isRestreamed =
-        config &&
-        Object.keys(config.go2rtc.streams || {}).includes(selectedStreamName);
+      const isRestreamed = isRestreamedStream(config, selectedStreamName);
 
       newIsRestreamedStates[camera.name] = isRestreamed ?? false;
 
@@ -181,9 +176,7 @@ export default function useCameraLiveMode(
         (cameraConfig
           ? Object.values(cameraConfig.live.streams)[0]
           : cameraName);
-      const isRestreamed =
-        config &&
-        Object.keys(config.go2rtc.streams || {}).includes(selectedStreamName);
+      const isRestreamed = isRestreamedStream(config, selectedStreamName);
 
       setPreferredLiveModes((prevModes) => ({
         ...prevModes,