From 393394225853ea2153d44be77a0573419dfc56f7 Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Thu, 16 May 2024 09:15:14 -0500 Subject: [PATCH 1/3] add autotracking enable/disable button to camera controls --- web/src/api/ws.tsx | 11 +++++++++ web/src/components/player/MsePlayer.tsx | 1 + web/src/views/live/LiveCameraView.tsx | 33 +++++++++++++++++++++++-- web/vite.config.ts | 12 ++++----- 4 files changed, 49 insertions(+), 8 deletions(-) diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx index 5e347e1d40..ab3144ff6e 100644 --- a/web/src/api/ws.tsx +++ b/web/src/api/ws.tsx @@ -161,6 +161,17 @@ export function useAudioState(camera: string): { return { payload: payload as ToggleableSetting, send }; } +export function useAutotrackingState(camera: string): { + payload: ToggleableSetting; + send: (payload: ToggleableSetting, retain?: boolean) => void; +} { + const { + value: { payload }, + send, + } = useWs(`${camera}/ptz_autotracker/state`, `${camera}/ptz_autotracker/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/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx index 63f78006f7..b8ab2da66e 100644 --- a/web/src/components/player/MsePlayer.tsx +++ b/web/src/components/player/MsePlayer.tsx @@ -305,6 +305,7 @@ function MSEPlayer({ onLoadedData={onPlaying} onLoadedMetadata={handleLoadedMetadata} muted={!audioEnabled} + onError={onClose} /> ); } diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx index e3c1801e6f..2f6bb497f4 100644 --- a/web/src/views/live/LiveCameraView.tsx +++ b/web/src/views/live/LiveCameraView.tsx @@ -1,5 +1,6 @@ import { useAudioState, + useAutotrackingState, useDetectState, usePtzCommand, useRecordingsState, @@ -50,7 +51,7 @@ import { FaMicrophoneSlash, } from "react-icons/fa"; import { GiSpeaker, GiSpeakerOff } from "react-icons/gi"; -import { HiViewfinderCircle } from "react-icons/hi2"; +import { TbViewfinder, TbViewfinderOff } from "react-icons/tb"; import { IoMdArrowRoundBack } from "react-icons/io"; import { LuEar, @@ -326,6 +327,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) { @@ -534,7 +538,7 @@ function PtzControlPanel({ className={`${clickOverlay ? "text-selected" : "text-primary"}`} onClick={() => setClickOverlay(!clickOverlay)} > - + )} @@ -566,11 +570,13 @@ function PtzControlPanel({ type FrigateCameraFeaturesProps = { camera: string; audioDetectEnabled: boolean; + autotrackingEnabled: boolean; fullscreen: boolean; }; function FrigateCameraFeatures({ camera, audioDetectEnabled, + autotrackingEnabled, fullscreen, }: FrigateCameraFeaturesProps) { const { payload: detectState, send: sendDetect } = useDetectState(camera); @@ -578,6 +584,8 @@ function FrigateCameraFeatures({ const { payload: snapshotState, send: sendSnapshot } = useSnapshotsState(camera); const { payload: audioState, send: sendAudio } = useAudioState(camera); + const { payload: autotrackingState, send: sendAutotracking } = + useAutotrackingState(camera); // desktop shows icons part of row if (isDesktop) { @@ -617,6 +625,18 @@ function FrigateCameraFeatures({ onClick={() => sendAudio(audioState == "ON" ? "OFF" : "ON")} /> )} + {autotrackingEnabled && ( + + sendAutotracking(autotrackingState == "ON" ? "OFF" : "ON") + } + /> + )} ); } @@ -662,6 +682,15 @@ function FrigateCameraFeatures({ onCheckedChange={() => sendAudio(audioState == "ON" ? "OFF" : "ON")} /> )} + {autotrackingEnabled && ( + + sendAutotracking(autotrackingState == "ON" ? "OFF" : "ON") + } + /> + )} ); diff --git a/web/vite.config.ts b/web/vite.config.ts index 5afefa3312..b914f76c96 100644 --- a/web/vite.config.ts +++ b/web/vite.config.ts @@ -12,24 +12,24 @@ export default defineConfig({ server: { proxy: { "/api": { - target: "http://localhost:5000", + target: "http://192.168.5.4:5000", ws: true, }, "/vod": { - target: "http://localhost:5000", + target: "http://192.168.5.4:5000", }, "/clips": { - target: "http://localhost:5000", + target: "http://192.168.5.4:5000", }, "/exports": { - target: "http://localhost:5000", + target: "http://192.168.5.4:5000", }, "/ws": { - target: "ws://localhost:5000", + target: "ws://192.168.5.4:5000", ws: true, }, "/live": { - target: "ws://localhost:5000", + target: "ws://192.168.5.4:5000", changeOrigin: true, ws: true, }, From bbd3c0cba02cb5068c36b69e269f3eb03a65db0c Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Thu, 16 May 2024 09:16:05 -0500 Subject: [PATCH 2/3] fix vite --- web/vite.config.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/web/vite.config.ts b/web/vite.config.ts index b914f76c96..5afefa3312 100644 --- a/web/vite.config.ts +++ b/web/vite.config.ts @@ -12,24 +12,24 @@ export default defineConfig({ server: { proxy: { "/api": { - target: "http://192.168.5.4:5000", + target: "http://localhost:5000", ws: true, }, "/vod": { - target: "http://192.168.5.4:5000", + target: "http://localhost:5000", }, "/clips": { - target: "http://192.168.5.4:5000", + target: "http://localhost:5000", }, "/exports": { - target: "http://192.168.5.4:5000", + target: "http://localhost:5000", }, "/ws": { - target: "ws://192.168.5.4:5000", + target: "ws://localhost:5000", ws: true, }, "/live": { - target: "ws://192.168.5.4:5000", + target: "ws://localhost:5000", changeOrigin: true, ws: true, }, From bb52479640de07a28bbfe339053f22e94751c0bc Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Thu, 16 May 2024 09:28:01 -0500 Subject: [PATCH 3/3] get initial state --- web/src/api/ws.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx index ab3144ff6e..831b3dff39 100644 --- a/web/src/api/ws.tsx +++ b/web/src/api/ws.tsx @@ -42,13 +42,17 @@ function useValue(): useValueReturn { const cameraStates: WsState = {}; Object.keys(config.cameras).forEach((camera) => { - const { name, record, detect, snapshots, audio } = config.cameras[camera]; + const { name, record, detect, snapshots, audio, onvif } = + config.cameras[camera]; cameraStates[`${name}/recordings/state`] = record.enabled ? "ON" : "OFF"; cameraStates[`${name}/detect/state`] = detect.enabled ? "ON" : "OFF"; cameraStates[`${name}/snapshots/state`] = snapshots.enabled ? "ON" : "OFF"; cameraStates[`${name}/audio/state`] = audio.enabled ? "ON" : "OFF"; + cameraStates[`${name}/ptz_autotracker/state`] = onvif.autotracking.enabled + ? "ON" + : "OFF"; }); setWsState({ ...wsState, ...cameraStates });