diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx
index 9b8924d1b..1174d35f3 100644
--- a/web/src/api/ws.tsx
+++ b/web/src/api/ws.tsx
@@ -200,6 +200,31 @@ export function useAutotrackingState(camera: string): {
return { payload: payload as ToggleableSetting, send };
}
+export function useAlertsState(camera: string): {
+ payload: ToggleableSetting;
+ send: (payload: ToggleableSetting, retain?: boolean) => void;
+} {
+ const {
+ value: { payload },
+ send,
+ } = useWs(`${camera}/review/alerts/state`, `${camera}/review/alerts/set`);
+ return { payload: payload as ToggleableSetting, send };
+}
+
+export function useDetectionsState(camera: string): {
+ payload: ToggleableSetting;
+ send: (payload: ToggleableSetting, retain?: boolean) => void;
+} {
+ const {
+ value: { payload },
+ send,
+ } = useWs(
+ `${camera}/review/detections/state`,
+ `${camera}/review/detections/set`,
+ );
+ return { payload: payload as ToggleableSetting, send };
+}
+
export function usePtzCommand(camera: string): {
payload: string;
send: (payload: string, retain?: boolean) => void;
diff --git a/web/src/types/frigateConfig.ts b/web/src/types/frigateConfig.ts
index 5c5971fc0..b19e5553f 100644
--- a/web/src/types/frigateConfig.ts
+++ b/web/src/types/frigateConfig.ts
@@ -172,10 +172,12 @@ export interface CameraConfig {
};
review: {
alerts: {
+ enabled: boolean;
required_zones: string[];
labels: string[];
};
detections: {
+ enabled: boolean;
required_zones: string[];
labels: string[];
};
diff --git a/web/src/views/settings/CameraSettingsView.tsx b/web/src/views/settings/CameraSettingsView.tsx
index 30c6229e1..2f97cc1f4 100644
--- a/web/src/views/settings/CameraSettingsView.tsx
+++ b/web/src/views/settings/CameraSettingsView.tsx
@@ -27,6 +27,9 @@ import { LuExternalLink } from "react-icons/lu";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { MdCircle } from "react-icons/md";
import { cn } from "@/lib/utils";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { useAlertsState, useDetectionsState } from "@/api/ws";
type CameraSettingsViewProps = {
selectedCamera: string;
@@ -105,6 +108,11 @@ export default function CameraSettingsView({
const watchedAlertsZones = form.watch("alerts_zones");
const watchedDetectionsZones = form.watch("detections_zones");
+ const { payload: alertsState, send: sendAlerts } =
+ useAlertsState(selectedCamera);
+ const { payload: detectionsState, send: sendDetections } =
+ useDetectionsState(selectedCamera);
+
const handleCheckedChange = useCallback(
(isChecked: boolean) => {
if (!isChecked) {
@@ -244,6 +252,49 @@ export default function CameraSettingsView({