From 52ce6190ae0e6480eed46d4cd4c7e93afbd70b7a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 13 Mar 2024 08:04:11 -0600
Subject: [PATCH] Fix two way talk starting webrtc session (#10422)

* Fix two way talk starting webrtc session

* Remove logs
---
 web/src/components/player/MsePlayer.tsx    |  2 +-
 web/src/components/player/WebRTCPlayer.tsx | 20 +++++++++++---------
 web/src/views/live/LiveCameraView.tsx      | 10 +++++++++-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 176fc59f0..42ae9aab6 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -46,7 +46,7 @@ function MSEPlayer({
   const msRef = useRef<MediaSource | null>(null);
 
   const wsURL = useMemo(() => {
-    return `${baseUrl.replace(/^http/, "ws")}live/webrtc/api/ws?src=${camera}`;
+    return `${baseUrl.replace(/^http/, "ws")}live/mse/api/ws?src=${camera}`;
   }, [camera]);
 
   const play = () => {
diff --git a/web/src/components/player/WebRTCPlayer.tsx b/web/src/components/player/WebRTCPlayer.tsx
index f7d6c85c0..4171947f3 100644
--- a/web/src/components/player/WebRTCPlayer.tsx
+++ b/web/src/components/player/WebRTCPlayer.tsx
@@ -1,5 +1,5 @@
 import { baseUrl } from "@/api/baseUrl";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 
 type WebRtcPlayerProps = {
   className?: string;
@@ -18,6 +18,12 @@ export default function WebRtcPlayer({
   microphoneEnabled = false,
   onPlaying,
 }: WebRtcPlayerProps) {
+  // metadata
+
+  const wsURL = useMemo(() => {
+    return `${baseUrl.replace(/^http/, "ws")}live/webrtc/api/ws?src=${camera}`;
+  }, [camera]);
+
   // camera states
 
   const pcRef = useRef<RTCPeerConnection | undefined>();
@@ -89,12 +95,13 @@ export default function WebRtcPlayer({
   }
 
   const connect = useCallback(
-    async (ws: WebSocket, aPc: Promise<RTCPeerConnection | undefined>) => {
+    async (aPc: Promise<RTCPeerConnection | undefined>) => {
       if (!aPc) {
         return;
       }
 
       pcRef.current = await aPc;
+      const ws = new WebSocket(wsURL);
 
       ws.addEventListener("open", () => {
         pcRef.current?.addEventListener("icecandidate", (ev) => {
@@ -130,7 +137,7 @@ export default function WebRtcPlayer({
         }
       });
     },
-    [],
+    [wsURL],
   );
 
   useEffect(() => {
@@ -142,15 +149,10 @@ export default function WebRtcPlayer({
       return;
     }
 
-    const url = `${baseUrl.replace(
-      /^http/,
-      "ws",
-    )}live/webrtc/api/ws?src=${camera}`;
-    const ws = new WebSocket(url);
     const aPc = PeerConnection(
       microphoneEnabled ? "video+audio+microphone" : "video+audio",
     );
-    connect(ws, aPc);
+    connect(aPc);
 
     return () => {
       if (pcRef.current) {
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index e31d9fba2..8c8f02f4c 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -129,6 +129,14 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
     }
   }, [camera, fullscreen, isPortrait]);
 
+  const preferredLiveMode = useMemo(() => {
+    if (isSafari || mic) {
+      return "webrtc";
+    }
+
+    return "mse";
+  }, [mic]);
+
   const windowAspectRatio = useMemo(() => {
     return windowWidth / windowHeight;
   }, [windowWidth, windowHeight]);
@@ -263,7 +271,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             cameraConfig={camera}
             playAudio={audio}
             micEnabled={mic}
-            preferredLiveMode={isSafari || mic ? "webrtc" : "mse"}
+            preferredLiveMode={preferredLiveMode}
           />
         </div>
         {camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}