diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx index b890bd05f..663e60808 100644 --- a/web/src/components/player/LivePlayer.tsx +++ b/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)} /> ); diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx index 318d97121..176fc59f0 100644 --- a/web/src/components/player/MsePlayer.tsx +++ b/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} /> ); } diff --git a/web/src/components/player/WebRTCPlayer.tsx b/web/src/components/player/WebRTCPlayer.tsx index 2eb18266c..d964b3460 100644 --- a/web/src/components/player/WebRTCPlayer.tsx +++ b/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} /> ); diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx index b83a78935..0f2731a51 100644 --- a/web/src/views/live/LiveCameraView.tsx +++ b/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) {
+ setAudio(!audio)} + />