diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx index 2f71293b6..c638f42f9 100644 --- a/web/src/components/player/LivePlayer.tsx +++ b/web/src/components/player/LivePlayer.tsx @@ -32,6 +32,7 @@ type LivePlayerProps = { useWebGL: boolean; windowVisible?: boolean; playAudio?: boolean; + volume?: number; playInBackground: boolean; micEnabled?: boolean; // only webrtc supports mic iOSCompatFullScreen?: boolean; @@ -54,6 +55,7 @@ export default function LivePlayer({ useWebGL = false, windowVisible = true, playAudio = false, + volume, playInBackground = false, micEnabled = false, iOSCompatFullScreen = false, @@ -188,6 +190,7 @@ export default function LivePlayer({ camera={streamName} playbackEnabled={cameraActive || liveReady} audioEnabled={playAudio} + volume={volume} microphoneEnabled={micEnabled} iOSCompatFullScreen={iOSCompatFullScreen} onPlaying={playerIsPlaying} @@ -204,6 +207,7 @@ export default function LivePlayer({ camera={streamName} playbackEnabled={cameraActive || liveReady} audioEnabled={playAudio} + volume={volume} playInBackground={playInBackground} onPlaying={playerIsPlaying} pip={pip} diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx index e3d431b82..8d0a71229 100644 --- a/web/src/components/player/MsePlayer.tsx +++ b/web/src/components/player/MsePlayer.tsx @@ -15,6 +15,7 @@ type MSEPlayerProps = { className?: string; playbackEnabled?: boolean; audioEnabled?: boolean; + volume?: number; playInBackground?: boolean; pip?: boolean; onPlaying?: () => void; @@ -27,6 +28,7 @@ function MSEPlayer({ className, playbackEnabled = true, audioEnabled = false, + volume, playInBackground = false, pip = false, onPlaying, @@ -537,6 +539,16 @@ function MSEPlayer({ videoRef.current.requestPictureInPicture(); }, [pip, videoRef]); + // control volume + + useEffect(() => { + if (!videoRef.current || volume == undefined) { + return; + } + + videoRef.current.volume = volume; + }, [volume, videoRef]); + // ensure we disconnect for slower connections useEffect(() => { diff --git a/web/src/components/player/WebRTCPlayer.tsx b/web/src/components/player/WebRTCPlayer.tsx index 3498c31ff..4528b9358 100644 --- a/web/src/components/player/WebRTCPlayer.tsx +++ b/web/src/components/player/WebRTCPlayer.tsx @@ -7,6 +7,7 @@ type WebRtcPlayerProps = { camera: string; playbackEnabled?: boolean; audioEnabled?: boolean; + volume?: number; microphoneEnabled?: boolean; iOSCompatFullScreen?: boolean; // ios doesn't support fullscreen divs so we must support the video element pip?: boolean; @@ -19,6 +20,7 @@ export default function WebRtcPlayer({ camera, playbackEnabled = true, audioEnabled = false, + volume, microphoneEnabled = false, iOSCompatFullScreen = false, pip = false, @@ -194,6 +196,16 @@ export default function WebRtcPlayer({ videoRef.current.requestPictureInPicture(); }, [pip, videoRef]); + // control volume + + useEffect(() => { + if (!videoRef.current || volume == undefined) { + return; + } + + videoRef.current.volume = volume; + }, [volume, videoRef]); + useEffect(() => { videoLoadTimeoutRef.current = setTimeout(() => { onError?.("stalled");