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.

web/src/components/settings/CameraStreamingDialog.tsx

@@ -33,6 +33,7 @@ import { Link } from "react-router-dom";
 import { LiveStreamMetadata } from "@/types/live";
 import { Trans, useTranslation } from "react-i18next";
 import { useDocDomain } from "@/hooks/use-doc-domain";
+import { useCameraNickname } from "@/hooks/use-camera-nickname";
 
 type CameraStreamingDialogProps = {
   camera: string;
@@ -56,6 +57,8 @@ export function CameraStreamingDialog({
   const { getLocaleDocUrl } = useDocDomain();
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  const cameraName = useCameraNickname(camera);
+
   const [isLoading, setIsLoading] = useState(false);
 
   const [streamName, setStreamName] = useState(
@@ -190,7 +193,7 @@ export function CameraStreamingDialog({
       <DialogHeader className="mb-4">
         <DialogTitle className="smart-capitalize">
           {t("group.camera.setting.title", {
-            cameraName: camera.replaceAll("_", " "),
+            cameraName: cameraName,
           })}
         </DialogTitle>
         <DialogDescription>