Add autotracking enable/disable button to live view (#11396)

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 });
@@ -161,6 +165,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;

web/src/components/player/MsePlayer.tsx

@@ -305,6 +305,7 @@ function MSEPlayer({
       onLoadedData={onPlaying}
       onLoadedMetadata={handleLoadedMetadata}
       muted={!audioEnabled}
+      onError={onClose}
     />
   );
 }

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) {
               <FrigateCameraFeatures
                 camera={camera.name}
                 audioDetectEnabled={camera.audio.enabled_in_config}
+                autotrackingEnabled={
+                  camera.onvif.autotracking.enabled_in_config
+                }
                 fullscreen={fullscreen}
               />
             </div>
@@ -534,7 +538,7 @@ function PtzControlPanel({
             className={`${clickOverlay ? "text-selected" : "text-primary"}`}
             onClick={() => setClickOverlay(!clickOverlay)}
           >
-            <HiViewfinderCircle />
+            <TbViewfinder />
           </Button>
         </>
       )}
@@ -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 && (
+          <CameraFeatureToggle
+            className="p-2 md:p-0"
+            variant={fullscreen ? "overlay" : "primary"}
+            Icon={autotrackingState == "ON" ? TbViewfinder : TbViewfinderOff}
+            isActive={autotrackingState == "ON"}
+            title={`${autotrackingState == "ON" ? "Disable" : "Enable"} Autotracking`}
+            onClick={() =>
+              sendAutotracking(autotrackingState == "ON" ? "OFF" : "ON")
+            }
+          />
+        )}
       </>
     );
   }
@@ -662,6 +682,15 @@ function FrigateCameraFeatures({
             onCheckedChange={() => sendAudio(audioState == "ON" ? "OFF" : "ON")}
           />
         )}
+        {autotrackingEnabled && (
+          <FilterSwitch
+            label="Autotracking"
+            isChecked={autotrackingState == "ON"}
+            onCheckedChange={() =>
+              sendAutotracking(autotrackingState == "ON" ? "OFF" : "ON")
+            }
+          />
+        )}
       </DrawerContent>
     </Drawer>
   );