diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx index 5e347e1d4..ab3144ff6 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 63f78006f..b8ab2da66 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 e3c1801e6..2f6bb497f 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 5afefa331..b914f76c9 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, },