Add micropohone button for two way talk (#10408)

web/src/components/player/LivePlayer.tsx

@@ -20,6 +20,7 @@ type LivePlayerProps = {
   showStillWithoutActivity?: boolean;
   windowVisible?: boolean;
   playAudio?: boolean;
+  micEnabled?: boolean; // only webrtc supports mic
   onClick?: () => void;
 };
 
@@ -30,6 +31,7 @@ export default function LivePlayer({
   showStillWithoutActivity = true,
   windowVisible = true,
   playAudio = false,
+  micEnabled = false,
   onClick,
 }: LivePlayerProps) {
   // camera activity
@@ -97,6 +99,7 @@ export default function LivePlayer({
         camera={cameraConfig.live.stream_name}
         playbackEnabled={cameraActive}
         audioEnabled={playAudio}
+        microphoneEnabled={micEnabled}
         onPlaying={() => setLiveReady(true)}
       />
     );

web/src/components/player/WebRTCPlayer.tsx

@@ -6,6 +6,7 @@ type WebRtcPlayerProps = {
   camera: string;
   playbackEnabled?: boolean;
   audioEnabled?: boolean;
+  microphoneEnabled?: boolean;
   onPlaying?: () => void;
 };
 
@@ -14,6 +15,7 @@ export default function WebRtcPlayer({
   camera,
   playbackEnabled = true,
   audioEnabled = false,
+  microphoneEnabled = false,
   onPlaying,
 }: WebRtcPlayerProps) {
   // camera states
@@ -145,7 +147,9 @@ export default function WebRtcPlayer({
       "ws",
     )}live/webrtc/api/ws?src=${camera}`;
     const ws = new WebSocket(url);
-    const aPc = PeerConnection("video+audio");
+    const aPc = PeerConnection(
+      microphoneEnabled ? "video+audio+microphone" : "video+audio",
+    );
     connect(ws, aPc);
 
     return () => {
@@ -154,7 +158,15 @@ export default function WebRtcPlayer({
         pcRef.current = undefined;
       }
     };
-  }, [camera, connect, PeerConnection, pcRef, videoRef, playbackEnabled]);
+  }, [
+    camera,
+    connect,
+    PeerConnection,
+    pcRef,
+    videoRef,
+    playbackEnabled,
+    microphoneEnabled,
+  ]);
 
   return (
     <video