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 });