add go2rtc stream selection to camera ffmpeg config

web/src/components/config-form/theme/fields/CameraInputsField.tsx

@@ -29,11 +29,19 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { StreamSourceSelector } from "./StreamSourceSelector";
+import {
+  buildRestreamPath,
+  parseRestreamStreamName,
+  RESTREAM_PRESET,
+  type StreamSourceMode,
+} from "./streamSource";
 
 type FfmpegInput = {
   path?: string;
   roles?: string[];
   hwaccel_args?: unknown;
+  input_args?: unknown;
 };
 
 const asInputList = (formData: unknown): FfmpegInput[] => {
@@ -137,7 +145,30 @@ export function CameraInputsField(props: FieldProps) {
   );
   const SchemaField = registry.fields.SchemaField;
 
+  const go2rtcStreamNames = useMemo<string[]>(() => {
+    const streams = formContext?.fullConfig?.go2rtc?.streams;
+    if (!streams || typeof streams !== "object") {
+      return [];
+    }
+    return Object.keys(streams).sort();
+  }, [formContext?.fullConfig?.go2rtc?.streams]);
+
   const [openByIndex, setOpenByIndex] = useState<Record<number, boolean>>({});
+  const [sourceModeByIndex, setSourceModeByIndex] = useState<
+    Record<number, StreamSourceMode>
+  >({});
+
+  // Detect whether an existing input path points at a known go2rtc restream so
+  // the source toggle can default to the right mode for existing configs.
+  const detectMode = useCallback(
+    (path: string | undefined): StreamSourceMode => {
+      const streamName = parseRestreamStreamName(path);
+      return streamName && go2rtcStreamNames.includes(streamName)
+        ? "restream"
+        : "manual";
+    },
+    [go2rtcStreamNames],
+  );
 
   useEffect(() => {
     setOpenByIndex((previous) => {
@@ -171,6 +202,55 @@ export function CameraInputsField(props: FieldProps) {
     [fieldPathId.path, inputs, onChange],
   );
 
+  // Update several fields of one input in a single change so that path and
+  // input_args never race on a stale snapshot of inputs.
+  const handleFieldValuesChange = useCallback(
+    (index: number, partial: Record<string, unknown>) => {
+      const nextInputs = cloneDeep(inputs);
+      const item =
+        (nextInputs[index] as Record<string, unknown> | undefined) ??
+        ({} as Record<string, unknown>);
+
+      Object.assign(item, partial);
+      nextInputs[index] = item;
+
+      onChange(normalizeNonDetectHwaccel(nextInputs), fieldPathId.path);
+    },
+    [fieldPathId.path, inputs, onChange],
+  );
+
+  const handleSourceModeChange = useCallback(
+    (index: number, nextMode: StreamSourceMode) => {
+      const input = inputs[index];
+      const currentPath =
+        typeof input?.path === "string" ? input.path : undefined;
+
+      if (nextMode === "manual") {
+        // Only revert the preset we set ourselves; never clobber custom args.
+        if (input?.input_args === RESTREAM_PRESET) {
+          handleFieldValuesChange(index, { input_args: undefined });
+        }
+      } else if (!parseRestreamStreamName(currentPath)) {
+        // Entering restream with a non-restream path: clear it so the dropdown
+        // shows its placeholder until a stream is chosen.
+        handleFieldValuesChange(index, { path: undefined });
+      }
+
+      setSourceModeByIndex((previous) => ({ ...previous, [index]: nextMode }));
+    },
+    [inputs, handleFieldValuesChange],
+  );
+
+  const handleSelectRestreamStream = useCallback(
+    (index: number, streamName: string) => {
+      handleFieldValuesChange(index, {
+        path: buildRestreamPath(streamName),
+        input_args: RESTREAM_PRESET,
+      });
+    },
+    [handleFieldValuesChange],
+  );
+
   const handleAddInput = useCallback(() => {
     const base = itemSchema
       ? (applySchemaDefaults(itemSchema) as FfmpegInput)
@@ -186,8 +266,9 @@ export function CameraInputsField(props: FieldProps) {
         (_, currentIndex) => currentIndex !== index,
       );
       onChange(nextInputs, fieldPathId.path);
-      setOpenByIndex((previous) => {
+
-        const next: Record<number, boolean> = {};
+      const reindex = <T,>(previous: Record<number, T>): Record<number, T> => {
+        const next: Record<number, T> = {};
         Object.entries(previous).forEach(([key, value]) => {
           const current = Number(key);
           if (Number.isNaN(current) || current === index) {
@@ -197,7 +278,10 @@ export function CameraInputsField(props: FieldProps) {
           next[current > index ? current - 1 : current] = value;
         });
         return next;
-      });
+      };
+
+      setOpenByIndex(reindex);
+      setSourceModeByIndex(reindex);
     },
     [fieldPathId.path, inputs, onChange],
   );
@@ -354,16 +438,32 @@ export function CameraInputsField(props: FieldProps) {
               <CollapsibleContent>
                 <CardContent className="space-y-4 p-4 pt-0">
                   <div className="w-full">
-                    {renderField(index, "path", {
+                    <StreamSourceSelector
-                      extraUiSchema: {
+                      idPrefix={`${baseId}-${index}`}
-                        "ui:widget": "CameraPathWidget",
+                      mode={sourceModeByIndex[index] ?? detectMode(input.path)}
-                        "ui:options": {
+                      onModeChange={(nextMode) =>
-                          size: "full",
+                        handleSourceModeChange(index, nextMode)
-                          splitLayout: false,
+                      }
+                      streamNames={go2rtcStreamNames}
+                      selectedStreamName={
+                        parseRestreamStreamName(input.path) ?? ""
+                      }
+                      onSelectStream={(streamName) =>
+                        handleSelectRestreamStream(index, streamName)
+                      }
+                      manualField={renderField(index, "path", {
+                        extraUiSchema: {
+                          "ui:widget": "CameraPathWidget",
+                          "ui:options": {
+                            size: "full",
+                            splitLayout: false,
+                          },
                         },
-                      },
+                        showSchemaDescription: true,
-                      showSchemaDescription: true,
+                      })}
-                    })}
+                      disabled={disabled}
+                      readonly={readonly}
+                    />
                   </div>
 
                   <div className="w-full">{renderField(index, "roles")}</div>

web/src/components/config-form/theme/fields/StreamSourceSelector.tsx

@@ -0,0 +1,217 @@
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { Check, ChevronsUpDown } from "lucide-react";
+import type { StreamSourceMode } from "./streamSource";
+
+type Go2rtcStreamComboboxProps = {
+  id: string;
+  value: string;
+  options: string[];
+  disabled?: boolean;
+  onSelect: (streamName: string) => void;
+};
+
+// Searchable dropdown of existing go2rtc streams
+function Go2rtcStreamCombobox({
+  id,
+  value,
+  options,
+  disabled,
+  onSelect,
+}: Go2rtcStreamComboboxProps) {
+  const { t } = useTranslation(["views/settings", "common"]);
+  const [open, setOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+
+  const commit = (next: string) => {
+    onSelect(next);
+    setSearchValue("");
+    setOpen(false);
+  };
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) setSearchValue("");
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between font-normal sm:max-w-xs",
+            !value && "text-muted-foreground",
+          )}
+        >
+          <span className="truncate">
+            {value ||
+              t("configForm.cameraInputs.sourceMode.go2rtcStreamPlaceholder")}
+          </span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
+        <Command>
+          <CommandInput
+            placeholder={t(
+              "configForm.cameraInputs.sourceMode.go2rtcStreamSearch",
+            )}
+            value={searchValue}
+            onValueChange={setSearchValue}
+          />
+          <CommandList>
+            <CommandEmpty>
+              {t("configForm.cameraInputs.sourceMode.noMatchingStreams")}
+            </CommandEmpty>
+            <CommandGroup
+              heading={t("configForm.cameraInputs.sourceMode.availableStreams")}
+            >
+              {options.map((option) => (
+                <CommandItem
+                  key={option}
+                  value={option}
+                  onSelect={() => commit(option)}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === option ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  {option}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+type StreamSourceSelectorProps = {
+  idPrefix: string;
+  mode: StreamSourceMode;
+  onModeChange: (mode: StreamSourceMode) => void;
+  streamNames: string[];
+  selectedStreamName: string;
+  onSelectStream: (streamName: string) => void;
+  manualField: ReactNode;
+  disabled?: boolean;
+  readonly?: boolean;
+};
+
+export function StreamSourceSelector({
+  idPrefix,
+  mode,
+  onModeChange,
+  streamNames,
+  selectedStreamName,
+  onSelectStream,
+  manualField,
+  disabled,
+  readonly,
+}: StreamSourceSelectorProps) {
+  const { t } = useTranslation(["views/settings", "common"]);
+
+  const restreamId = `${idPrefix}-source-restream`;
+  const manualId = `${idPrefix}-source-manual`;
+  const selectId = `${idPrefix}-restream-select`;
+
+  const hasStreams = streamNames.length > 0;
+  const isDisabled = disabled || readonly;
+
+  return (
+    <div className="space-y-3">
+      <RadioGroup
+        value={mode}
+        onValueChange={(value) => onModeChange(value as StreamSourceMode)}
+        className="flex flex-col gap-2 sm:flex-row sm:gap-6"
+        disabled={isDisabled}
+      >
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem
+            value="restream"
+            id={restreamId}
+            className={
+              mode === "restream"
+                ? "bg-selected from-selected/50 to-selected/90 text-selected"
+                : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
+            }
+          />
+          <label htmlFor={restreamId} className="cursor-pointer text-sm">
+            {t("configForm.cameraInputs.sourceMode.restream")}
+          </label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem
+            value="manual"
+            id={manualId}
+            className={
+              mode === "manual"
+                ? "bg-selected from-selected/50 to-selected/90 text-selected"
+                : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
+            }
+          />
+          <label htmlFor={manualId} className="cursor-pointer text-sm">
+            {t("configForm.cameraInputs.sourceMode.manual")}
+          </label>
+        </div>
+      </RadioGroup>
+
+      {mode === "restream" ? (
+        <div className="space-y-2 pt-1">
+          <Label htmlFor={selectId} className="block">
+            {t("configForm.cameraInputs.sourceMode.go2rtcStreamLabel")}
+          </Label>
+          {hasStreams ? (
+            <Go2rtcStreamCombobox
+              id={selectId}
+              value={selectedStreamName}
+              options={streamNames}
+              disabled={isDisabled}
+              onSelect={onSelectStream}
+            />
+          ) : (
+            <p
+              className={cn(
+                "rounded-md border border-dashed p-3 text-sm text-muted-foreground sm:max-w-xs",
+              )}
+            >
+              {t("configForm.cameraInputs.sourceMode.noGo2rtcStreams")}
+            </p>
+          )}
+        </div>
+      ) : (
+        manualField
+      )}
+    </div>
+  );
+}
+
+export default StreamSourceSelector;

web/src/components/config-form/theme/fields/streamSource.ts

@@ -0,0 +1,33 @@
+export type StreamSourceMode = "restream" | "manual";
+
+// The literal go2rtc restream prefix matches what the camera wizard inlines
+// when it builds a restreamed input path. Only this exact host:port is treated
+// as a restream so manually typed URLs (including localhost) stay manual.
+export const RESTREAM_PREFIX = "rtsp://127.0.0.1:8554/";
+export const RESTREAM_PRESET = "preset-rtsp-restream";
+
+/** Build the restream input path for a given go2rtc stream name. */
+export function buildRestreamPath(streamName: string): string {
+  return `${RESTREAM_PREFIX}${streamName}`;
+}
+
+/**
+ * Extract the go2rtc stream name from a restream input path.
+ *
+ * Returns the stream name when the path is a well-formed restream URL with no
+ * extra path segments or query, otherwise undefined.
+ */
+export function parseRestreamStreamName(
+  path: string | undefined,
+): string | undefined {
+  if (typeof path !== "string" || !path.startsWith(RESTREAM_PREFIX)) {
+    return undefined;
+  }
+
+  const name = path.slice(RESTREAM_PREFIX.length);
+  if (name.length === 0 || /[/?#]/.test(name)) {
+    return undefined;
+  }
+
+  return name;
+}