Add button for camera audio

web/src/components/player/LivePlayer.tsx

@@ -20,6 +20,7 @@ type LivePlayerProps = {
   preferredLiveMode?: LivePlayerMode;
   showStillWithoutActivity?: boolean;
   windowVisible?: boolean;
+  playAudio?: boolean;
   onClick?: () => void;
 };
 
@@ -29,6 +30,7 @@ export default function LivePlayer({
   preferredLiveMode,
   showStillWithoutActivity = true,
   windowVisible = true,
+  playAudio = false,
   onClick,
 }: LivePlayerProps) {
   // camera activity
@@ -95,6 +97,7 @@ export default function LivePlayer({
         className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
         camera={cameraConfig.live.stream_name}
         playbackEnabled={cameraActive}
+        audioEnabled={playAudio}
         onPlaying={() => setLiveReady(true)}
       />
     );
@@ -105,6 +108,7 @@ export default function LivePlayer({
           className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
           camera={cameraConfig.name}
           playbackEnabled={cameraActive}
+          audioEnabled={playAudio}
           onPlaying={() => setLiveReady(true)}
         />
       );

web/src/components/player/MsePlayer.tsx

@@ -5,6 +5,7 @@ type MSEPlayerProps = {
   camera: string;
   className?: string;
   playbackEnabled?: boolean;
+  audioEnabled?: boolean;
   onPlaying?: () => void;
 };
 
@@ -12,6 +13,7 @@ function MSEPlayer({
   camera,
   className,
   playbackEnabled = true,
+  audioEnabled = false,
   onPlaying,
 }: MSEPlayerProps) {
   let connectTS: number = 0;
@@ -273,7 +275,7 @@ function MSEPlayer({
       playsInline
       preload="auto"
       onLoadedData={onPlaying}
-      muted
+      muted={!audioEnabled}
     />
   );
 }

web/src/components/player/WebRTCPlayer.tsx

@@ -5,6 +5,7 @@ type WebRtcPlayerProps = {
   className?: string;
   camera: string;
   playbackEnabled?: boolean;
+  audioEnabled?: boolean;
   onPlaying?: () => void;
 };
 
@@ -12,6 +13,7 @@ export default function WebRtcPlayer({
   className,
   camera,
   playbackEnabled = true,
+  audioEnabled = false,
   onPlaying,
 }: WebRtcPlayerProps) {
   // camera states
@@ -160,7 +162,7 @@ export default function WebRtcPlayer({
       className={className}
       autoPlay
       playsInline
-      muted
+      muted={!audioEnabled}
       onLoadedData={onPlaying}
     />
   );

web/src/views/live/LiveCameraView.tsx

@@ -18,7 +18,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { CameraConfig } from "@/types/frigateConfig";
 import { CameraPtzInfo } from "@/types/ptz";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { isSafari } from "react-device-detect";
 import { BsThreeDotsVertical } from "react-icons/bs";
 import {
@@ -27,6 +27,7 @@ import {
   FaAngleRight,
   FaAngleUp,
 } from "react-icons/fa";
+import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
 import { IoMdArrowBack } from "react-icons/io";
 import { LuEar, LuEarOff, LuVideo, LuVideoOff } from "react-icons/lu";
 import {
@@ -34,6 +35,7 @@ import {
   MdPersonOff,
   MdPersonSearch,
   MdPhotoCamera,
+  MdSpeaker,
   MdZoomIn,
   MdZoomOut,
 } from "react-icons/md";
@@ -59,6 +61,10 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
   );
   const { payload: audioState, send: sendAudio } = useAudioState(camera.name);
 
+  // playback state
+
+  const [audio, setAudio] = useState(false);
+
   const growClassName = useMemo(() => {
     if (camera.detect.width / camera.detect.height > 2) {
       return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
@@ -76,6 +82,12 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
         </Button>
         <TooltipProvider>
           <div className="flex items-center gap-1 mr-1 *:rounded-lg">
+            <CameraFeatureToggle
+              Icon={audio ? GiSpeaker : GiSpeakerOff}
+              isActive={audio}
+              title={`${audio ? "Disable" : "Enable"} Camera Audio`}
+              onClick={() => setAudio(!audio)}
+            />
             <CameraFeatureToggle
               Icon={detectState == "ON" ? MdPersonSearch : MdPersonOff}
               isActive={detectState == "ON"}
@@ -117,6 +129,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             windowVisible
             showStillWithoutActivity={false}
             cameraConfig={camera}
+            playAudio={audio}
             preferredLiveMode={isSafari ? "webrtc" : "mse"}
           />
         </div>