Add basic camera settings to UI for testing (#18690)

* add basic camera add/edit pane to the UI for testing

* only init model runner if transcription is enabled globally

* fix role checkboxes

frigate/events/audio.py

@@ -91,12 +91,7 @@ class AudioProcessor(util.Process):
         self.cameras = cameras
         self.config = config
 
-        if any(
+        if self.config.audio_transcription.enabled:
-            [
-                conf.audio_transcription.enabled_in_config == True
-                for conf in config.cameras.values()
-            ]
-        ):
             self.transcription_model_runner = AudioTranscriptionModelRunner(
                 self.config.audio_transcription.device,
                 self.config.audio_transcription.model_size,

web/public/locales/en/views/settings.json

@@ -176,6 +176,35 @@
       "toast": {
         "success": "Review Classification configuration has been saved. Restart Frigate to apply changes."
       }
+    },
+    "addCamera": "Add New Camera",
+    "editCamera": "Edit Camera:",
+    "selectCamera": "Select a Camera",
+    "backToSettings": "Back to Camera Settings",
+    "cameraConfig": {
+      "add": "Add Camera",
+      "edit": "Edit Camera",
+      "description": "Configure camera settings including stream inputs and roles.",
+      "name": "Camera Name",
+      "nameRequired": "Camera name is required",
+      "nameInvalid": "Camera name must contain only letters, numbers, underscores, or hyphens",
+      "namePlaceholder": "e.g., front_door",
+      "enabled": "Enabled",
+      "ffmpeg": {
+        "inputs": "Input Streams",
+        "path": "Stream Path",
+        "pathRequired": "Stream path is required",
+        "pathPlaceholder": "rtsp://...",
+        "roles": "Roles",
+        "rolesRequired": "At least one role is required",
+        "rolesUnique": "Each role (audio, detect, record) can only be assigned to one stream",
+        "addInput": "Add Input Stream",
+        "removeInput": "Remove Input Stream",
+        "inputsRequired": "At least one input stream is required"
+      },
+      "toast": {
+        "success": "Camera {{cameraName}} saved successfully"
+      }
     }
   },
   "masksAndZones": {

web/src/components/settings/CameraEditForm.tsx

@@ -0,0 +1,439 @@
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import Heading from "@/components/ui/heading";
+import { Separator } from "@/components/ui/separator";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, useFieldArray } from "react-hook-form";
+import { z } from "zod";
+import axios from "axios";
+import { toast, Toaster } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useState, useMemo } from "react";
+import { LuTrash2, LuPlus } from "react-icons/lu";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { FrigateConfig } from "@/types/frigateConfig";
+import useSWR from "swr";
+
+type ConfigSetBody = {
+  requires_restart: number;
+  // TODO: type this better
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  config_data: any;
+  update_topic?: string;
+};
+
+const RoleEnum = z.enum(["audio", "detect", "record"]);
+type Role = z.infer<typeof RoleEnum>;
+
+type CameraEditFormProps = {
+  cameraName?: string;
+  onSave?: () => void;
+  onCancel?: () => void;
+};
+
+export default function CameraEditForm({
+  cameraName,
+  onSave,
+  onCancel,
+}: CameraEditFormProps) {
+  const { t } = useTranslation(["views/settings"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const formSchema = useMemo(
+    () =>
+      z.object({
+        cameraName: z
+          .string()
+          .min(1, { message: t("camera.cameraConfig.nameRequired") })
+          .regex(/^[a-zA-Z0-9_-]+$/, {
+            message: t("camera.cameraConfig.nameInvalid"),
+          }),
+        enabled: z.boolean(),
+        ffmpeg: z.object({
+          inputs: z
+            .array(
+              z.object({
+                path: z.string().min(1, {
+                  message: t("camera.cameraConfig.ffmpeg.pathRequired"),
+                }),
+                roles: z.array(RoleEnum).min(1, {
+                  message: t("camera.cameraConfig.ffmpeg.rolesRequired"),
+                }),
+              }),
+            )
+            .min(1, {
+              message: t("camera.cameraConfig.ffmpeg.inputsRequired"),
+            })
+            .refine(
+              (inputs) => {
+                const roleOccurrences = new Map<Role, number>();
+                inputs.forEach((input) => {
+                  input.roles.forEach((role) => {
+                    roleOccurrences.set(
+                      role,
+                      (roleOccurrences.get(role) || 0) + 1,
+                    );
+                  });
+                });
+                return Array.from(roleOccurrences.values()).every(
+                  (count) => count <= 1,
+                );
+              },
+              {
+                message: t("camera.cameraConfig.ffmpeg.rolesUnique"),
+                path: ["inputs"],
+              },
+            ),
+        }),
+      }),
+    [t],
+  );
+
+  type FormValues = z.infer<typeof formSchema>;
+
+  // Determine available roles for default values
+  const usedRoles = useMemo(() => {
+    const roles = new Set<Role>();
+    if (cameraName && config?.cameras[cameraName]) {
+      const camera = config.cameras[cameraName];
+      camera.ffmpeg?.inputs?.forEach((input) => {
+        input.roles.forEach((role) => roles.add(role as Role));
+      });
+    }
+    return roles;
+  }, [cameraName, config]);
+
+  const defaultValues: FormValues = {
+    cameraName: cameraName || "",
+    enabled: true,
+    ffmpeg: {
+      inputs: [
+        {
+          path: "",
+          roles: usedRoles.has("detect") ? [] : ["detect"],
+        },
+      ],
+    },
+  };
+
+  // Load existing camera config if editing
+  if (cameraName && config?.cameras[cameraName]) {
+    const camera = config.cameras[cameraName];
+    defaultValues.enabled = camera.enabled ?? true;
+    defaultValues.ffmpeg.inputs = camera.ffmpeg?.inputs?.length
+      ? camera.ffmpeg.inputs.map((input) => ({
+          path: input.path,
+          roles: input.roles as Role[],
+        }))
+      : defaultValues.ffmpeg.inputs;
+  }
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues,
+    mode: "onChange",
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "ffmpeg.inputs",
+  });
+
+  // Watch ffmpeg.inputs to track used roles
+  const watchedInputs = form.watch("ffmpeg.inputs");
+
+  const saveCameraConfig = (values: FormValues) => {
+    setIsLoading(true);
+    const configData: ConfigSetBody["config_data"] = {
+      cameras: {
+        [values.cameraName]: {
+          enabled: values.enabled,
+          ffmpeg: {
+            inputs: values.ffmpeg.inputs.map((input) => ({
+              path: input.path,
+              roles: input.roles,
+            })),
+          },
+        },
+      },
+    };
+
+    const requestBody: ConfigSetBody = {
+      requires_restart: 1,
+      config_data: configData,
+    };
+
+    // Add update_topic for new cameras
+    if (!cameraName) {
+      requestBody.update_topic = `config/cameras/${values.cameraName}/add`;
+    }
+
+    axios
+      .put("config/set", requestBody)
+      .then((res) => {
+        if (res.status === 200) {
+          toast.success(
+            t("camera.cameraConfig.toast.success", {
+              cameraName: values.cameraName,
+            }),
+            { position: "top-center" },
+          );
+          if (onSave) onSave();
+        } else {
+          throw new Error(res.statusText);
+        }
+      })
+      .catch((error) => {
+        const errorMessage =
+          error.response?.data?.message ||
+          error.response?.data?.detail ||
+          "Unknown error";
+        toast.error(
+          t("toast.save.error.title", { errorMessage, ns: "common" }),
+          { position: "top-center" },
+        );
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
+
+  const onSubmit = (values: FormValues) => {
+    if (cameraName && values.cameraName !== cameraName) {
+      // If camera name changed, delete old camera config
+      const deleteRequestBody: ConfigSetBody = {
+        requires_restart: 1,
+        config_data: {
+          cameras: {
+            [cameraName]: "",
+          },
+        },
+        update_topic: `config/cameras/${cameraName}/remove`,
+      };
+
+      axios
+        .put("config/set", deleteRequestBody)
+        .then(() => saveCameraConfig(values))
+        .catch((error) => {
+          const errorMessage =
+            error.response?.data?.message ||
+            error.response?.data?.detail ||
+            "Unknown error";
+          toast.error(
+            t("toast.save.error.title", { errorMessage, ns: "common" }),
+            { position: "top-center" },
+          );
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    } else {
+      saveCameraConfig(values);
+    }
+  };
+
+  // Determine available roles for new streams
+  const getAvailableRoles = (): Role[] => {
+    const used = new Set<Role>();
+    watchedInputs.forEach((input) => {
+      input.roles.forEach((role) => used.add(role));
+    });
+    return used.has("detect") ? [] : ["detect"];
+  };
+
+  const getUsedRolesExcludingIndex = (excludeIndex: number) => {
+    const roles = new Set<Role>();
+    watchedInputs.forEach((input, idx) => {
+      if (idx !== excludeIndex) {
+        input.roles.forEach((role) => roles.add(role));
+      }
+    });
+    return roles;
+  };
+
+  return (
+    <>
+      <Toaster position="top-center" closeButton />
+      <Heading as="h3" className="my-2">
+        {cameraName
+          ? t("camera.cameraConfig.edit")
+          : t("camera.cameraConfig.add")}
+      </Heading>
+      <div className="my-3 text-sm text-muted-foreground">
+        {t("camera.cameraConfig.description")}
+      </div>
+      <Separator className="my-3 bg-secondary" />
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <FormField
+            control={form.control}
+            name="cameraName"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("camera.cameraConfig.name")}</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder={t("camera.cameraConfig.namePlaceholder")}
+                    {...field}
+                    disabled={!!cameraName} // Prevent editing name for existing cameras
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="enabled"
+            render={({ field }) => (
+              <FormItem className="flex items-center space-x-2">
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+                <FormLabel>{t("camera.cameraConfig.enabled")}</FormLabel>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div>
+            <FormLabel>{t("camera.cameraConfig.ffmpeg.inputs")}</FormLabel>
+            {fields.map((field, index) => (
+              <div
+                key={field.id}
+                className="mt-2 space-y-4 rounded-md border p-4"
+              >
+                <FormField
+                  control={form.control}
+                  name={`ffmpeg.inputs.${index}.path`}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {t("camera.cameraConfig.ffmpeg.path")}
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder={t(
+                            "camera.cameraConfig.ffmpeg.pathPlaceholder",
+                          )}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name={`ffmpeg.inputs.${index}.roles`}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {t("camera.cameraConfig.ffmpeg.roles")}
+                      </FormLabel>
+                      <FormControl>
+                        <div className="flex flex-wrap gap-2">
+                          {(["audio", "detect", "record"] as const).map(
+                            (role) => (
+                              <label
+                                key={role}
+                                className="flex items-center space-x-2"
+                              >
+                                <input
+                                  type="checkbox"
+                                  checked={field.value.includes(role)}
+                                  onChange={(e) => {
+                                    const updatedRoles = e.target.checked
+                                      ? [...field.value, role]
+                                      : field.value.filter((r) => r !== role);
+                                    field.onChange(updatedRoles);
+                                  }}
+                                  disabled={
+                                    !field.value.includes(role) &&
+                                    getUsedRolesExcludingIndex(index).has(role)
+                                  }
+                                />
+                                <span>{role}</span>
+                              </label>
+                            ),
+                          )}
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={() => remove(index)}
+                  disabled={fields.length === 1}
+                >
+                  <LuTrash2 className="mr-2 h-4 w-4" />
+                  {t("camera.cameraConfig.ffmpeg.removeInput")}
+                </Button>
+              </div>
+            ))}
+            <FormMessage>
+              {form.formState.errors.ffmpeg?.inputs?.root &&
+                form.formState.errors.ffmpeg.inputs.root.message}
+            </FormMessage>
+            <Button
+              variant="outline"
+              size="sm"
+              className="mt-2"
+              onClick={() => append({ path: "", roles: getAvailableRoles() })}
+            >
+              <LuPlus className="mr-2 h-4 w-4" />
+              {t("camera.cameraConfig.ffmpeg.addInput")}
+            </Button>
+          </div>
+
+          <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[50%]">
+            <Button
+              className="flex flex-1"
+              aria-label={t("button.cancel", { ns: "common" })}
+              onClick={onCancel}
+              type="button"
+            >
+              {t("button.cancel", { ns: "common" })}
+            </Button>
+            <Button
+              variant="select"
+              disabled={isLoading}
+              className="flex flex-1"
+              aria-label={t("button.save", { ns: "common" })}
+              type="submit"
+            >
+              {isLoading ? (
+                <div className="flex flex-row items-center gap-2">
+                  <ActivityIndicator />
+                  <span>{t("button.saving", { ns: "common" })}</span>
+                </div>
+              ) : (
+                t("button.save", { ns: "common" })
+              )}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </>
+  );
+}

web/src/views/settings/CameraSettingsView.tsx

@@ -1,7 +1,6 @@
 import Heading from "@/components/ui/heading";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { Toaster } from "sonner";
+import { Toaster, toast } from "sonner";
-import { toast } from "sonner";
 import {
   Form,
   FormControl,
@@ -14,8 +13,8 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { Separator } from "../../components/ui/separator";
+import { Separator } from "@/components/ui/separator";
-import { Button } from "../../components/ui/button";
+import { Button } from "@/components/ui/button";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -31,6 +30,17 @@ import { Trans, useTranslation } from "react-i18next";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { useAlertsState, useDetectionsState, useEnabledState } from "@/api/ws";
+import CameraEditForm from "@/components/settings/CameraEditForm";
+import { LuPlus } from "react-icons/lu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { IoMdArrowRoundBack } from "react-icons/io";
+import { isDesktop } from "react-device-detect";
 
 type CameraSettingsViewProps = {
   selectedCamera: string;
@@ -60,9 +70,23 @@ export default function CameraSettingsView({
   const [changedValue, setChangedValue] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [selectDetections, setSelectDetections] = useState(false);
+  const [viewMode, setViewMode] = useState<"settings" | "add" | "edit">(
+    "settings",
+  ); // Control view state
+  const [editCameraName, setEditCameraName] = useState<string | undefined>(
+    undefined,
+  ); // Track camera being edited
 
   const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
 
+  // List of cameras for dropdown
+  const cameras = useMemo(() => {
+    if (config) {
+      return Object.keys(config.cameras).sort();
+    }
+    return [];
+  }, [config]);
+
   // zones and labels
 
   const zones = useMemo(() => {
@@ -256,7 +280,14 @@ export default function CameraSettingsView({
     document.title = t("documentTitle.camera");
   }, [t]);
 
-  if (!cameraConfig && !selectedCamera) {
+  // Handle back navigation from add/edit form
+  const handleBack = useCallback(() => {
+    setViewMode("settings");
+    setEditCameraName(undefined);
+    updateConfig();
+  }, [updateConfig]);
+
+  if (!cameraConfig && !selectedCamera && viewMode === "settings") {
     return <ActivityIndicator />;
   }
 
@@ -265,10 +296,43 @@ export default function CameraSettingsView({
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
         <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
+          {viewMode === "settings" ? (
+            <>
               <Heading as="h3" className="my-2">
-            <Trans ns="views/settings">camera.title</Trans>
+                {t("camera.title")}
               </Heading>
-
+              <div className="mb-4 flex flex-col gap-4">
+                <Button
+                  variant="select"
+                  onClick={() => setViewMode("add")}
+                  className="flex max-w-48 items-center gap-2"
+                >
+                  <LuPlus className="h-4 w-4" />
+                  {t("camera.addCamera")}
+                </Button>
+                {cameras.length > 0 && (
+                  <div className="flex items-center gap-2">
+                    <Label>{t("camera.editCamera")}</Label>
+                    <Select
+                      onValueChange={(value) => {
+                        setEditCameraName(value);
+                        setViewMode("edit");
+                      }}
+                    >
+                      <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder={t("camera.selectCamera")} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {cameras.map((camera) => (
+                          <SelectItem key={camera} value={camera}>
+                            {capitalizeFirstLetter(camera.replaceAll("_", " "))}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+              </div>
               <Separator className="my-2 flex bg-secondary" />
 
               <Heading as="h4" className="my-2">
@@ -327,7 +391,9 @@ export default function CameraSettingsView({
                     />
                     <div className="space-y-0.5">
                       <Label htmlFor="detections-enabled">
-                    <Trans ns="views/settings">camera.review.detections</Trans>
+                        <Trans ns="views/settings">
+                          camera.review.detections
+                        </Trans>
                       </Label>
                     </div>
                   </div>
@@ -340,7 +406,9 @@ export default function CameraSettingsView({
               <Separator className="my-2 flex bg-secondary" />
 
               <Heading as="h4" className="my-2">
-            <Trans ns="views/settings">camera.reviewClassification.title</Trans>
+                <Trans ns="views/settings">
+                  camera.reviewClassification.title
+                </Trans>
               </Heading>
 
               <div className="max-w-6xl">
@@ -405,8 +473,7 @@ export default function CameraSettingsView({
                                     key={zone.name}
                                     control={form.control}
                                     name="alerts_zones"
-                                render={({ field }) => {
+                                    render={({ field }) => (
-                                  return (
                                       <FormItem
                                         key={zone.name}
                                         className="mb-3 flex flex-row items-center space-x-3 space-y-0 last:mb-0"
@@ -437,8 +504,7 @@ export default function CameraSettingsView({
                                           {zone.name.replaceAll("_", " ")}
                                         </FormLabel>
                                       </FormItem>
-                                  );
+                                    )}
-                                }}
                                   />
                                 ))}
                               </div>
@@ -470,12 +536,15 @@ export default function CameraSettingsView({
                                     ).replaceAll("_", " "),
                                   },
                                 )
-                          : t("camera.reviewClassification.objectAlertsTips", {
+                              : t(
+                                  "camera.reviewClassification.objectAlertsTips",
+                                  {
                                     alertsLabels,
                                     cameraName: capitalizeFirstLetter(
                                       cameraConfig?.name ?? "",
                                     ).replaceAll("_", " "),
-                            })}
+                                  },
+                                )}
                           </div>
                         </FormItem>
                       )}
@@ -511,8 +580,7 @@ export default function CameraSettingsView({
                                       key={zone.name}
                                       control={form.control}
                                       name="detections_zones"
-                                  render={({ field }) => {
+                                      render={({ field }) => (
-                                    return (
                                         <FormItem
                                           key={zone.name}
                                           className="mb-3 flex flex-row items-center space-x-3 space-y-0 last:mb-0"
@@ -542,8 +610,7 @@ export default function CameraSettingsView({
                                             {zone.name.replaceAll("_", " ")}
                                           </FormLabel>
                                         </FormItem>
-                                    );
+                                      )}
-                                  }}
                                     />
                                   ))}
                                 </div>
@@ -592,7 +659,7 @@ export default function CameraSettingsView({
                                     ).replaceAll("_", " "),
                                   }}
                                   ns="views/settings"
-                            ></Trans>
+                                />
                               ) : (
                                 <Trans
                                   i18nKey="camera.reviewClassification.zoneObjectDetectionsTips.notSelectDetections"
@@ -662,6 +729,33 @@ export default function CameraSettingsView({
                   </div>
                 </form>
               </Form>
+            </>
+          ) : (
+            <>
+              <div className="mb-4 flex items-center gap-2">
+                <Button
+                  className={`flex items-center gap-2.5 rounded-lg`}
+                  aria-label={t("label.back", { ns: "common" })}
+                  size="sm"
+                  onClick={handleBack}
+                >
+                  <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+                  {isDesktop && (
+                    <div className="text-primary">
+                      {t("button.back", { ns: "common" })}
+                    </div>
+                  )}
+                </Button>
+              </div>
+              <div className="md:max-w-5xl">
+                <CameraEditForm
+                  cameraName={viewMode === "edit" ? editCameraName : undefined}
+                  onSave={handleBack}
+                  onCancel={handleBack}
+                />
+              </div>
+            </>
+          )}
         </div>
       </div>
     </>