Miscellaneous Fixes (#21072)

* Implement renaming in model editing dialog

* add transcription faq

* remove incorrect constraint for viewer as username

should be able to change anyone's role other than admin

* Don't save redundant state changes

* prevent crash when a camera doesn't support onvif imaging service required for focus support

* Fine tune behavior

* Stop redundant go2rtc stream metadata requests and defer audio information to allow bandwidth for image requests

* Improve cleanup logic for capture process

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

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

@@ -1,8 +1,8 @@
-import { baseUrl } from "@/api/baseUrl";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { useCallback, useEffect, useState, useMemo } from "react";
 import useSWR from "swr";
-import { LivePlayerMode, LiveStreamMetadata } from "@/types/live";
+import { LivePlayerMode } from "@/types/live";
+import useDeferredStreamMetadata from "./use-deferred-stream-metadata";
 
 export default function useCameraLiveMode(
   cameras: CameraConfig[],
@@ -11,9 +11,9 @@ export default function useCameraLiveMode(
 ) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  // Get comma-separated list of restreamed stream names for SWR key
-  const restreamedStreamsKey = useMemo(() => {
-    if (!cameras || !config) return null;
+  // Compute which streams need metadata (restreamed streams only)
+  const restreamedStreamNames = useMemo(() => {
+    if (!cameras || !config) return [];
 
     const streamNames = new Set<string>();
     cameras.forEach((camera) => {
@@ -32,56 +32,13 @@ export default function useCameraLiveMode(
       }
     });
 
-    return streamNames.size > 0
-      ? Array.from(streamNames).sort().join(",")
-      : null;
+    return Array.from(streamNames);
   }, [cameras, config, activeStreams]);
 
-  const streamsFetcher = useCallback(async (key: string) => {
-    const streamNames = key.split(",");
-
-    const metadataPromises = streamNames.map(async (streamName) => {
-      try {
-        const response = await fetch(
-          `${baseUrl}api/go2rtc/streams/${streamName}`,
-          {
-            priority: "low",
-          },
-        );
-
-        if (response.ok) {
-          const data = await response.json();
-          return { streamName, data };
-        }
-        return { streamName, data: null };
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error(`Failed to fetch metadata for ${streamName}:`, error);
-        return { streamName, data: null };
-      }
-    });
-
-    const results = await Promise.allSettled(metadataPromises);
-
-    const metadata: { [key: string]: LiveStreamMetadata } = {};
-    results.forEach((result) => {
-      if (result.status === "fulfilled" && result.value.data) {
-        metadata[result.value.streamName] = result.value.data;
-      }
-    });
-
-    return metadata;
-  }, []);
-
-  const { data: allStreamMetadata = {} } = useSWR<{
-    [key: string]: LiveStreamMetadata;
-  }>(restreamedStreamsKey, streamsFetcher, {
-    revalidateOnFocus: false,
-    revalidateOnReconnect: false,
-    revalidateIfStale: false,
-    dedupingInterval: 60000,
-  });
+  // Fetch stream metadata with deferred loading (doesn't block initial render)
+  const streamMetadata = useDeferredStreamMetadata(restreamedStreamNames);
 
+  // Compute live mode states
   const [preferredLiveModes, setPreferredLiveModes] = useState<{
     [key: string]: LivePlayerMode;
   }>({});
@@ -122,10 +79,10 @@ export default function useCameraLiveMode(
         newPreferredLiveModes[camera.name] = isRestreamed ? "mse" : "jsmpeg";
       }
 
-      // check each stream for audio support
+      // Check each stream for audio support
       if (isRestreamed) {
         Object.values(camera.live.streams).forEach((streamName) => {
-          const metadata = allStreamMetadata?.[streamName];
+          const metadata = streamMetadata[streamName];
           newSupportsAudioOutputStates[streamName] = {
             supportsAudio: metadata
               ? metadata.producers.find(
@@ -150,7 +107,7 @@ export default function useCameraLiveMode(
     setPreferredLiveModes(newPreferredLiveModes);
     setIsRestreamedStates(newIsRestreamedStates);
     setSupportsAudioOutputStates(newSupportsAudioOutputStates);
-  }, [cameras, config, windowVisible, allStreamMetadata]);
+  }, [cameras, config, windowVisible, streamMetadata]);
 
   const resetPreferredLiveMode = useCallback(
     (cameraName: string) => {
@@ -180,5 +137,6 @@ export default function useCameraLiveMode(
     resetPreferredLiveMode,
     isRestreamedStates,
     supportsAudioOutputStates,
+    streamMetadata,
   };
 }

web/src/hooks/use-deferred-stream-metadata.ts

@@ -0,0 +1,90 @@
+import { baseUrl } from "@/api/baseUrl";
+import { useCallback, useEffect, useState, useMemo } from "react";
+import useSWR from "swr";
+import { LiveStreamMetadata } from "@/types/live";
+
+const FETCH_TIMEOUT_MS = 10000;
+const DEFER_DELAY_MS = 2000;
+
+/**
+ * Hook that fetches go2rtc stream metadata with deferred loading.
+ *
+ * Metadata fetching is delayed to prevent blocking initial page load
+ * and camera image requests.
+ *
+ * @param streamNames - Array of stream names to fetch metadata for
+ * @returns Object containing stream metadata keyed by stream name
+ */
+export default function useDeferredStreamMetadata(streamNames: string[]) {
+  const [fetchEnabled, setFetchEnabled] = useState(false);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setFetchEnabled(true);
+    }, DEFER_DELAY_MS);
+
+    return () => clearTimeout(timeoutId);
+  }, []);
+
+  const swrKey = useMemo(() => {
+    if (!fetchEnabled || streamNames.length === 0) return null;
+    // Use spread to avoid mutating the original array
+    return `deferred-streams:${[...streamNames].sort().join(",")}`;
+  }, [fetchEnabled, streamNames]);
+
+  const fetcher = useCallback(async (key: string) => {
+    // Extract stream names from key (remove prefix)
+    const names = key.replace("deferred-streams:", "").split(",");
+
+    const promises = names.map(async (streamName) => {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+
+      try {
+        const response = await fetch(
+          `${baseUrl}api/go2rtc/streams/${streamName}`,
+          {
+            priority: "low",
+            signal: controller.signal,
+          },
+        );
+        clearTimeout(timeoutId);
+
+        if (response.ok) {
+          const data = await response.json();
+          return { streamName, data };
+        }
+        return { streamName, data: null };
+      } catch (error) {
+        clearTimeout(timeoutId);
+        if ((error as Error).name !== "AbortError") {
+          // eslint-disable-next-line no-console
+          console.error(`Failed to fetch metadata for ${streamName}:`, error);
+        }
+        return { streamName, data: null };
+      }
+    });
+
+    const results = await Promise.allSettled(promises);
+
+    const metadata: { [key: string]: LiveStreamMetadata } = {};
+    results.forEach((result) => {
+      if (result.status === "fulfilled" && result.value.data) {
+        metadata[result.value.streamName] = result.value.data;
+      }
+    });
+
+    return metadata;
+  }, []);
+
+  const { data: metadata = {} } = useSWR<{
+    [key: string]: LiveStreamMetadata;
+  }>(swrKey, fetcher, {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    revalidateIfStale: false,
+    dedupingInterval: 60000,
+  });
+
+  return metadata;
+}