pass volume prop to players

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}

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(() => {

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");