feat: Add camera nickname (#19567)

* refactor: Refactor camera nickname

* fix: fix cameraNameLabel visually

* chore: The Explore search function also displays the Camera's nickname in English

* chore: add mobile page camera nickname

* feat: webpush support camera nickname

* fix: fix storage camera name is null

* chore: fix review detail and context menu camera nickname

* chore: fix use-stats and notification setting camera nickname

* fix: fix stats camera if not nickname need capitalize

* fix: fix debug page open camera web ui i18n and camera nickname support

* fix: fix camera metrics not use nickname

* refactor: refactor use-camera-nickname hook.

Author: ZhaiSoul

frigate/comms/webpush.py

@@ -334,6 +334,9 @@ def send_alert(self, payload: dict[str, Any]) -> None:
             return
 
         camera: str = payload["after"]["camera"]
+        camera_name: str = getattr(
+            self.config.cameras[camera], "nickname", None
+        ) or titlecase(camera.replace("_", " "))
         current_time = datetime.datetime.now().timestamp()
 
         if self._within_cooldown(camera):
@@ -375,7 +378,7 @@ def send_alert(self, payload: dict[str, Any]) -> None:
         if state == "genai" and payload["after"]["data"]["metadata"]:
             message = payload["after"]["data"]["metadata"]["scene"]
         else:
-            message = f"Detected on {titlecase(camera.replace('_', ' '))}"
+            message = f"Detected on {camera_name}"
 
         if ended:
             logger.debug(
@@ -406,6 +409,9 @@ def send_trigger(self, payload: dict[str, Any]) -> None:
             return
 
         camera: str = payload["camera"]
+        camera_name: str = getattr(
+            self.config.cameras[camera], "nickname", None
+        ) or titlecase(camera.replace("_", " "))
         current_time = datetime.datetime.now().timestamp()
 
         if self._within_cooldown(camera):
@@ -421,14 +427,16 @@ def send_trigger(self, payload: dict[str, Any]) -> None:
         name = payload["name"]
         score = payload["score"]
 
-        title = f"{name.replace('_', ' ')} triggered on {titlecase(camera.replace('_', ' '))}"
-        message = f"{titlecase(trigger_type)} trigger fired for {titlecase(camera.replace('_', ' '))} with score {score:.2f}"
+        title = f"{name.replace('_', ' ')} triggered on {camera_name}"
+        message = f"{titlecase(trigger_type)} trigger fired for {camera_name} with score {score:.2f}"
         image = f"clips/triggers/{camera}/{event_id}.webp"
 
         direct_url = f"/explore?event_id={event_id}"
         ttl = 0
 
-        logger.debug(f"Sending push notification for {camera}, trigger name {name}")
+        logger.debug(
+            f"Sending push notification for {camera_name}, trigger name {name}"
+        )
 
         for user in self.web_pushers:
             self.send_push_notification(

frigate/config/camera/camera.py

@@ -2,7 +2,7 @@
 from enum import Enum
 from typing import Optional
 
-from pydantic import Field, PrivateAttr
+from pydantic import Field, PrivateAttr, model_validator
 
 from frigate.const import CACHE_DIR, CACHE_SEGMENT_FORMAT, REGEX_CAMERA_NAME
 from frigate.ffmpeg_presets import (
@@ -51,6 +51,16 @@ class CameraTypeEnum(str, Enum):
 
 class CameraConfig(FrigateBaseModel):
     name: Optional[str] = Field(None, title="Camera name.", pattern=REGEX_CAMERA_NAME)
+
+    nickname: Optional[str] = Field(None, title="Camera nickname. Only for display.")
+
+    @model_validator(mode="before")
+    @classmethod
+    def handle_nickname(cls, values):
+        if isinstance(values, dict) and "nickname" in values:
+            pass
+        return values
+
     enabled: bool = Field(default=True, title="Enable camera.")
 
     # Options with global fallback

frigate/storage.py

@@ -77,7 +77,10 @@ def calculate_camera_usages(self) -> dict[str, dict]:
                 .scalar()
             )
 
-            usages[camera] = {
+            camera_key = (
+                getattr(self.config.cameras[camera], "nickname", None) or camera
+            )
+            usages[camera_key] = {
                 "usage": camera_storage,
                 "bandwidth": self.camera_storage_stats.get(camera, {}).get(
                     "bandwidth", 0

web/public/locales/en/components/camera.json

@@ -27,6 +27,7 @@
     "icon": "Icon",
     "success": "Camera group ({{name}}) has been saved.",
     "camera": {
+      "birdseye": "Birdseye",
       "setting": {
         "label": "Camera Streaming Settings",
         "title": "{{cameraName}} Streaming Settings",

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

@@ -17,6 +17,7 @@
     "cameras": "Camera Settings",
     "masksAndZones": "Masks / Zones",
     "motionTuner": "Motion Tuner",
+    "triggers": "Triggers",
     "debug": "Debug",
     "users": "Users",
     "notifications": "Notifications",
@@ -192,7 +193,7 @@
       "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",
+      "nameLength": "Camera name must be less than 24 characters.",
       "namePlaceholder": "e.g., front_door",
       "enabled": "Enabled",
       "ffmpeg": {
@@ -408,6 +409,7 @@
     "title": "Debug",
     "detectorDesc": "Frigate uses your detectors ({{detectors}}) to detect objects in your camera's video stream.",
     "desc": "Debugging view shows a real-time view of tracked objects and their statistics. The object list shows a time-delayed summary of detected objects.",
+    "openCameraWebUI": "Open {{camera}}'s Web UI",
     "debugging": "Debugging",
     "objectList": "Object List",
     "noObjects": "No objects",

web/src/components/camera/CameraNameLabel.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { useCameraNickname } from "@/hooks/use-camera-nickname";
+import { CameraConfig } from "@/types/frigateConfig";
+
+interface CameraNameLabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+  camera?: string | CameraConfig;
+}
+
+const CameraNameLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  CameraNameLabelProps
+>(({ className, camera, ...props }, ref) => {
+  const displayName = useCameraNickname(camera);
+  return (
+    <LabelPrimitive.Root ref={ref} className={className} {...props}>
+      {displayName}
+    </LabelPrimitive.Root>
+  );
+});
+CameraNameLabel.displayName = LabelPrimitive.Root.displayName;
+
+export { CameraNameLabel };

web/src/components/filter/CameraGroupSelector.tsx

@@ -71,12 +71,12 @@ import {
   MobilePageTitle,
 } from "../mobile/MobilePage";
 
-import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
 import { CameraStreamingDialog } from "../settings/CameraStreamingDialog";
 import { DialogTrigger } from "@radix-ui/react-dialog";
 import { useStreamingSettings } from "@/context/streaming-settings-provider";
 import { Trans, useTranslation } from "react-i18next";
+import { CameraNameLabel } from "../camera/CameraNameLabel";
 
 type CameraGroupSelectorProps = {
   className?: string;
@@ -846,12 +846,11 @@ export function CameraGroupEdit({
                 ].map((camera) => (
                   <FormControl key={camera}>
                     <div className="flex items-center justify-between gap-1">
-                      <Label
+                      <CameraNameLabel
                         className="mx-2 w-full cursor-pointer text-primary smart-capitalize"
                         htmlFor={camera.replaceAll("_", " ")}
-                      >
-                        {camera.replaceAll("_", " ")}
-                      </Label>
+                        camera={camera}
+                      />
 
                       <div className="flex items-center gap-x-2">
                         {camera !== "birdseye" && (

web/src/components/filter/CamerasFilterButton.tsx

@@ -189,7 +189,8 @@ export function CamerasFilterContent({
             <FilterSwitch
               key={item}
               isChecked={currentCameras?.includes(item) ?? false}
-              label={item.replaceAll("_", " ")}
+              label={item}
+              isCameraName={true}
               disabled={
                 mainCamera !== undefined &&
                 currentCameras !== undefined &&

web/src/components/filter/FilterSwitch.tsx

@@ -1,26 +1,37 @@
 import { Switch } from "../ui/switch";
 import { Label } from "../ui/label";
+import { CameraNameLabel } from "../camera/CameraNameLabel";
 
 type FilterSwitchProps = {
   label: string;
   disabled?: boolean;
   isChecked: boolean;
+  isCameraName?: boolean;
   onCheckedChange: (checked: boolean) => void;
 };
 export default function FilterSwitch({
   label,
   disabled = false,
   isChecked,
+  isCameraName = false,
   onCheckedChange,
 }: FilterSwitchProps) {
   return (
     <div className="flex items-center justify-between gap-1">
-      <Label
-        className={`mx-2 w-full cursor-pointer text-primary smart-capitalize ${disabled ? "text-secondary-foreground" : ""}`}
-        htmlFor={label}
-      >
-        {label}
-      </Label>
+      {isCameraName ? (
+        <CameraNameLabel
+          className={`mx-2 w-full cursor-pointer text-sm font-medium leading-none text-primary smart-capitalize peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${disabled ? "text-secondary-foreground" : ""}`}
+          htmlFor={label}
+          camera={label}
+        />
+      ) : (
+        <Label
+          className={`mx-2 w-full cursor-pointer text-primary smart-capitalize ${disabled ? "text-secondary-foreground" : ""}`}
+          htmlFor={label}
+        >
+          {label}
+        </Label>
+      )}
       <Switch
         id={label}
         disabled={disabled}

web/src/components/input/InputWithTags.tsx

@@ -53,6 +53,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { MdImageSearch } from "react-icons/md";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
+import { CameraNameLabel } from "../camera/CameraNameLabel";
 
 type InputWithTagsProps = {
   inputFocused: boolean;
@@ -826,9 +827,13 @@ export default function InputWithTags({
                             className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm text-green-800 smart-capitalize"
                           >
                             {t("filter.label." + filterType)}:{" "}
-                            {filterType === "labels"
-                              ? getTranslatedLabel(value)
-                              : value.replaceAll("_", " ")}
+                            {filterType === "labels" ? (
+                              getTranslatedLabel(value)
+                            ) : filterType === "cameras" ? (
+                              <CameraNameLabel camera={value} />
+                            ) : (
+                              value.replaceAll("_", " ")
+                            )}
                             <button
                               onClick={() =>
                                 removeFilter(filterType as FilterType, value)
@@ -923,13 +928,27 @@ export default function InputWithTags({
                   onSelect={() => handleSuggestionClick(suggestion)}
                 >
                   {i18n.language === "en" ? (
-                    suggestion
+                    currentFilterType && currentFilterType === "cameras" ? (
+                      <>
+                        {suggestion} {" ("}{" "}
+                        <CameraNameLabel camera={suggestion} />
+                        {")"}
+                      </>
+                    ) : (
+                      suggestion
+                    )
                   ) : (
                     <>
                       {suggestion} {" ("}
-                      {currentFilterType
-                        ? formatFilterValues(currentFilterType, suggestion)
-                        : t("filter.label." + suggestion)}
+                      {currentFilterType ? (
+                        currentFilterType === "cameras" ? (
+                          <CameraNameLabel camera={suggestion} />
+                        ) : (
+                          formatFilterValues(currentFilterType, suggestion)
+                        )
+                      ) : (
+                        t("filter.label." + suggestion)
+                      )}
                       {")"}
                     </>
                   )}