Empty cameras view (#20434)

* Don't define camera by default

* Add empty card component and use for camera view

* Add i18n

docker/rocm/Dockerfile

@@ -15,7 +15,7 @@ ARG AMDGPU
 
 RUN apt update -qq && \
     apt install -y wget gpg && \
-    wget -O rocm.deb https://repo.radeon.com/amdgpu-install/7.0.1/ubuntu/jammy/amdgpu-install_7.0.1.70001-1_all.deb && \
+    wget -O rocm.deb https://repo.radeon.com/amdgpu-install/7.0.2/ubuntu/jammy/amdgpu-install_7.0.2.70002-1_all.deb && \
     apt install -y ./rocm.deb && \
     apt update && \
     apt install -qq -y rocm

docker/rocm/requirements-wheels-rocm.txt

@@ -1 +1 @@
-onnxruntime-migraphx @ https://github.com/NickM-27/frigate-onnxruntime-rocm/releases/download/v7.0.1/onnxruntime_migraphx-1.23.0-cp311-cp311-linux_x86_64.whl
+onnxruntime-migraphx @ https://github.com/NickM-27/frigate-onnxruntime-rocm/releases/download/v7.0.2/onnxruntime_migraphx-1.23.1-cp311-cp311-linux_x86_64.whl

docker/rocm/rocm.hcl

@@ -2,7 +2,7 @@ variable "AMDGPU" {
   default = "gfx900"
 }
 variable "ROCM" {
-  default = "7.0.1"
+  default = "7.0.2"
 }
 variable "HSA_OVERRIDE_GFX_VERSION" {
   default = ""

docs/docs/integrations/homekit.md

@@ -0,0 +1,37 @@
+---
+id: homekit
+title: HomeKit
+---
+
+Frigate cameras can be integrated with Apple HomeKit through go2rtc. This allows you to view your camera streams directly in the Apple Home app on your iOS, iPadOS, macOS, and tvOS devices.
+
+## Overview
+
+HomeKit integration is handled entirely through go2rtc, which is embedded in Frigate. go2rtc provides the necessary HomeKit Accessory Protocol (HAP) server to expose your cameras to HomeKit.
+
+## Setup
+
+All HomeKit configuration and pairing should be done through the **go2rtc WebUI**.
+
+### Accessing the go2rtc WebUI
+
+The go2rtc WebUI is available at:
+
+```
+http://<frigate_host>:1984
+```
+
+Replace `<frigate_host>` with the IP address or hostname of your Frigate server.
+
+### Pairing Cameras
+
+1. Navigate to the go2rtc WebUI at `http://<frigate_host>:1984`
+2. Use the `add` section to add a new camera to HomeKit
+3. Follow the on-screen instructions to generate pairing codes for your cameras
+
+## Requirements
+
+- Frigate must be accessible on your local network using host network_mode
+- Your iOS device must be on the same network as Frigate
+- Port 1984 must be accessible for the go2rtc WebUI
+- For detailed go2rtc configuration options, refer to the [go2rtc documentation](https://github.com/AlexxIT/go2rtc)

docs/sidebars.ts

@@ -116,6 +116,7 @@ const sidebars: SidebarsConfig = {
         items: frigateHttpApiSidebar,
       },
       "integrations/mqtt",
+      "integrations/homekit",
       "configuration/metrics",
       "integrations/third_party_extensions",
     ],

frigate/config/config.py

@@ -80,18 +80,7 @@ DEFAULT_CONFIG = """
 mqtt:
   enabled: False
 
-cameras:
-  name_of_your_camera: # <------ Name the camera
-    enabled: True
-    ffmpeg:
-      inputs:
-        - path: rtsp://10.0.10.10:554/rtsp # <----- The stream you want to use for detection
-          roles:
-            - detect
-    detect:
-      enabled: False # <---- disable detection until you have a working camera feed
-      width: 1280
-      height: 720
+cameras: {}  # No cameras defined, UI wizard should be used
 """
 
 DEFAULT_DETECTORS = {"cpu": {"type": "cpu"}}

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

@@ -168,5 +168,10 @@
       "label": "Edit Camera Group"
     },
     "exitEdit": "Exit Editing"
+  },
+  "noCameras": {
+    "title": "No Cameras Set Up",
+    "description": "Get started by connecting a camera.",
+    "buttonText": "Add Camera"
   }
 }

web/src/components/card/EmptyCard.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Button } from "../ui/button";
+import Heading from "../ui/heading";
+
+type EmptyCardProps = {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  buttonText?: string;
+};
+export function EmptyCard({
+  icon,
+  title,
+  description,
+  buttonText,
+}: EmptyCardProps) {
+  return (
+    <div className="flex flex-col items-center gap-2">
+      {icon}
+      <Heading as="h4">{title}</Heading>
+      <div className="text-secondary-foreground">{description}</div>
+      {buttonText?.length && (
+        <Button size="sm" variant="select">
+          {buttonText}
+        </Button>
+      )}
+    </div>
+  );
+}

web/src/views/live/LiveDashboardView.tsx

@@ -44,6 +44,8 @@ import { useResizeObserver } from "@/hooks/resize-observer";
 import LiveContextMenu from "@/components/menu/LiveContextMenu";
 import { useStreamingSettings } from "@/context/streaming-settings-provider";
 import { useTranslation } from "react-i18next";
+import { EmptyCard } from "@/components/card/EmptyCard";
+import { BsFillCameraVideoOffFill } from "react-icons/bs";
 
 type LiveDashboardViewProps = {
   cameras: CameraConfig[];
@@ -352,6 +354,10 @@ export default function LiveDashboardView({
     onSaveMuting(true);
   };
 
+  if (cameras.length == 0) {
+    return <NoCameraView />;
+  }
+
   return (
     <div
       className="scrollbar-container size-full select-none overflow-y-auto px-1 pt-2 md:p-2"
@@ -608,3 +614,18 @@ export default function LiveDashboardView({
     </div>
   );
 }
+
+function NoCameraView() {
+  const { t } = useTranslation(["views/live"]);
+
+  return (
+    <div className="flex size-full items-center justify-center">
+      <EmptyCard
+        icon={<BsFillCameraVideoOffFill className="size-8" />}
+        title={t("noCameras.title")}
+        description={t("noCameras.description")}
+        buttonText={t("noCameras.buttonText")}
+      />
+    </div>
+  );
+}