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

web/src/views/live/LiveCameraView.tsx

@@ -40,6 +40,8 @@ import {
   FaAngleUp,
   FaCompress,
   FaExpand,
+  FaMicrophone,
+  FaMicrophoneSlash,
 } from "react-icons/fa";
 import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
 import { IoMdArrowBack } from "react-icons/io";
@@ -98,6 +100,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
   // playback state
 
   const [audio, setAudio] = useState(false);
+  const [mic, setMic] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
 
   const growClassName = useMemo(() => {
@@ -190,6 +193,16 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                 }
               }}
             />
+            {window.isSecureContext && (
+              <CameraFeatureToggle
+                className="p-2 md:p-0"
+                variant={fullscreen ? "overlay" : "primary"}
+                Icon={mic ? FaMicrophone : FaMicrophoneSlash}
+                isActive={mic}
+                title={`${mic ? "Disable" : "Enable"} Two Way Talk`}
+                onClick={() => setMic(!mic)}
+              />
+            )}
             <CameraFeatureToggle
               className="p-2 md:p-0"
               variant={fullscreen ? "overlay" : "primary"}
@@ -249,7 +262,8 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             showStillWithoutActivity={false}
             cameraConfig={camera}
             playAudio={audio}
-            preferredLiveMode={isSafari ? "webrtc" : "mse"}
+            micEnabled={mic}
+            preferredLiveMode={isSafari || mic ? "webrtc" : "mse"}
           />
         </div>
         {camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}
@@ -410,7 +424,10 @@ function PtzControlPanel({ camera }: { camera: string }) {
           <DropdownMenuContent>
             {ptz?.presets.map((preset) => {
               return (
-                <DropdownMenuItem onSelect={() => sendPtz(`preset_${preset}`)}>
+                <DropdownMenuItem
+                  key={preset}
+                  onSelect={() => sendPtz(`preset_${preset}`)}
+                >
                   {preset}
                 </DropdownMenuItem>
               );