Camera Wizard tweaks (#20773)

* add switch to use go2rtc ffmpeg mode

* i18n

* move testing state outside of button

web/src/components/settings/CameraWizardDialog.tsx

@@ -174,9 +174,7 @@ export default function CameraWizardDialog({
             ...(friendlyName && { friendly_name: friendlyName }),
             ffmpeg: {
               inputs: wizardData.streams.map((stream, index) => {
-                const isRestreamed =
-                  wizardData.restreamIds?.includes(stream.id) ?? false;
-                if (isRestreamed) {
+                if (stream.restream) {
                   const go2rtcStreamName =
                     wizardData.streams!.length === 1
                       ? finalCameraName
@@ -234,7 +232,11 @@ export default function CameraWizardDialog({
                   wizardData.streams!.length === 1
                     ? finalCameraName
                     : `${finalCameraName}_${index + 1}`;
-                go2rtcStreams[streamName] = [stream.url];
+
+                const streamUrl = stream.useFfmpeg
+                  ? `ffmpeg:${stream.url}`
+                  : stream.url;
+                go2rtcStreams[streamName] = [streamUrl];
               });
 
               if (Object.keys(go2rtcStreams).length > 0) {

web/src/components/settings/wizard/Step1NameCamera.tsx

@@ -608,6 +608,12 @@ export default function Step1NameCamera({
         </div>
       )}
 
+      {isTesting && (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <ActivityIndicator className="size-4" />
+          {testStatus}
+        </div>
+      )}
       <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
         <Button
           type="button"
@@ -635,10 +641,7 @@ export default function Step1NameCamera({
             variant="select"
             className="flex items-center justify-center gap-2 sm:flex-1"
           >
-            {isTesting && <ActivityIndicator className="size-4" />}
-            {isTesting && testStatus
-              ? testStatus
-              : t("cameraWizard.step1.testConnection")}
+            {t("cameraWizard.step1.testConnection")}
           </Button>
         )}
       </div>

web/src/components/settings/wizard/Step2StreamConfig.tsx

@@ -201,16 +201,12 @@ export default function Step2StreamConfig({
 
   const setRestream = useCallback(
     (streamId: string) => {
-      const currentIds = wizardData.restreamIds || [];
-      const isSelected = currentIds.includes(streamId);
-      const newIds = isSelected
-        ? currentIds.filter((id) => id !== streamId)
-        : [...currentIds, streamId];
-      onUpdate({
-        restreamIds: newIds,
-      });
+      const stream = streams.find((s) => s.id === streamId);
+      if (!stream) return;
+
+      updateStream(streamId, { restream: !stream.restream });
     },
-    [wizardData.restreamIds, onUpdate],
+    [streams, updateStream],
   );
 
   const hasDetectRole = streams.some((s) => s.roles.includes("detect"));
@@ -435,9 +431,7 @@ export default function Step2StreamConfig({
                       {t("cameraWizard.step2.go2rtc")}
                     </span>
                     <Switch
-                      checked={(wizardData.restreamIds || []).includes(
-                        stream.id,
-                      )}
+                      checked={stream.restream || false}
                       onCheckedChange={() => setRestream(stream.id)}
                     />
                   </div>

web/src/components/settings/wizard/Step3Validation.tsx

@@ -1,7 +1,13 @@
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { useTranslation } from "react-i18next";
-import { LuRotateCcw } from "react-icons/lu";
+import { LuRotateCcw, LuInfo } from "react-icons/lu";
 import { useState, useCallback, useMemo, useEffect } from "react";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import axios from "axios";
@@ -216,7 +222,6 @@ export default function Step3Validation({
       brandTemplate: wizardData.brandTemplate,
       customUrl: wizardData.customUrl,
       streams: wizardData.streams,
-      restreamIds: wizardData.restreamIds,
     };
 
     onSave(configData);
@@ -322,6 +327,51 @@ export default function Step3Validation({
                     </div>
                   )}
 
+                  {result?.success && (
+                    <div className="mb-3 flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm">
+                          {t("cameraWizard.step3.ffmpegModule")}
+                        </span>
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-4 w-4 p-0"
+                            >
+                              <LuInfo className="size-3" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="pointer-events-auto w-80 text-xs">
+                            <div className="space-y-2">
+                              <div className="font-medium">
+                                {t("cameraWizard.step3.ffmpegModule")}
+                              </div>
+                              <div className="text-muted-foreground">
+                                {t(
+                                  "cameraWizard.step3.ffmpegModuleDescription",
+                                )}
+                              </div>
+                            </div>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+                      <Switch
+                        checked={stream.useFfmpeg || false}
+                        onCheckedChange={(checked) => {
+                          onUpdate({
+                            streams: streams.map((s) =>
+                              s.id === stream.id
+                                ? { ...s, useFfmpeg: checked }
+                                : s,
+                            ),
+                          });
+                        }}
+                      />
+                    </div>
+                  )}
+
                   <div className="mb-2 flex flex-col justify-between gap-1 md:flex-row md:items-center">
                     <span className="break-all text-sm text-muted-foreground">
                       {stream.url}
@@ -491,8 +541,7 @@ function StreamIssues({
 
     // Restreaming check
     if (stream.roles.includes("record")) {
-      const restreamIds = wizardData.restreamIds || [];
-      if (restreamIds.includes(stream.id)) {
+      if (stream.restream) {
         result.push({
           type: "warning",
           message: t("cameraWizard.step3.issues.restreamingWarning"),
@@ -660,9 +709,10 @@ function StreamPreview({ stream, onBandwidthUpdate }: StreamPreviewProps) {
 
   useEffect(() => {
     // Register stream with go2rtc
+    const streamUrl = stream.useFfmpeg ? `ffmpeg:${stream.url}` : stream.url;
     axios
       .put(`go2rtc/streams/${streamId}`, null, {
-        params: { src: stream.url },
+        params: { src: streamUrl },
       })
       .then(() => {
         // Add small delay to allow go2rtc api to run and initialize the stream
@@ -680,7 +730,7 @@ function StreamPreview({ stream, onBandwidthUpdate }: StreamPreviewProps) {
         // do nothing on cleanup errors - go2rtc won't consume the streams
       });
     };
-  }, [stream.url, streamId]);
+  }, [stream.url, stream.useFfmpeg, streamId]);
 
   const resolution = stream.testResult?.resolution;
   let aspectRatio = "16/9";

web/src/types/cameraWizard.ts

@@ -85,6 +85,8 @@ export type StreamConfig = {
   quality?: string;
   testResult?: TestResult;
   userTested?: boolean;
+  useFfmpeg?: boolean;
+  restream?: boolean;
 };
 
 export type TestResult = {
@@ -105,7 +107,6 @@ export type WizardFormData = {
   brandTemplate?: CameraBrand;
   customUrl?: string;
   streams?: StreamConfig[];
-  restreamIds?: string[];
 };
 
 // API Response Types
@@ -146,6 +147,7 @@ export type CameraConfigData = {
         inputs: {
           path: string;
           roles: string[];
+          input_args?: string;
         }[];
       };
       live?: {