fix: resolve issue with echo and missing remote video for callee

fonoster · Dec 20, 2023 · 2127609 · 2127609
1 parent c7f6300
commit 2127609
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 17 deletions.
diff --git a/mods/frontoffice/src/components/chat/video/Video.tsx b/mods/frontoffice/src/components/chat/video/Video.tsx
@@ -94,17 +94,18 @@ export const FOVideo = forwardRef((props: FOVideoProps, ref) => {
         </HeaderContainer>
       </Header>
       <RemoteVideoContainer>
-        <audio style={{ display: "none" }} id="goodtok-audio" controls>
-          <p>Your browser doesn't support HTML5 audio.</p>
-        </audio>
         <RemoteVideo ref={remoteVideoRef} className="goodtok-video__remote" />
         {props.isLocalCameraMuted && (
           <MutedOverlay>
             <MutedCameraIcon />
           </MutedOverlay>
         )}
         <LocalVideoContainer>
-          <LocalVideo ref={localVideoRef} className="goodtok-video__local" />
+          <LocalVideo
+            ref={localVideoRef}
+            className="goodtok-video__local"
+            muted
+          />
         </LocalVideoContainer>
         <Controls>
           <ButtonCircleWrapper onClick={() => props.onMuteMicrophone()}>

diff --git a/mods/frontoffice/src/containers/ChatContainer.tsx b/mods/frontoffice/src/containers/ChatContainer.tsx
@@ -187,8 +187,6 @@ function ChatContainer() {
   };
 
   const onCustomerDequeue = async () => {
-    // TODO: If peer exist and is connected, hangup
-
     const queues = new SDK.Queues(client);
     queues.updateQueueEntryStatus({
       workspaceId,
@@ -200,7 +198,12 @@ function ChatContainer() {
   };
 
   const handleHangup = async () => {
-    // TODO: If peer exist and is connected, hangup
+    // Release media resources
+    if (localStream) {
+      localStream.getTracks().forEach((track) => track.stop());
+    }
+
+    // TODO: remotePeer.close();
   };
 
   const handleMuteCamera = async () => {
@@ -219,7 +222,7 @@ function ChatContainer() {
     if (peer) {
       setIsLocalMicrophoneMuted(!isLocalMicrophoneMuted);
       localStream!.getAudioTracks().forEach((track) => {
-        track.enabled = true;
+        track.enabled = !track.enabled;
       });
     }
   };

diff --git a/mods/widget/src/GoodtokUA.tsx b/mods/widget/src/GoodtokUA.tsx
@@ -91,7 +91,7 @@ const GoodtokUA = () => {
       });
 
       peer.on("call", (mediaConnection: MediaConnection) => {
-        mediaConnection.answer(localStream);
+        mediaConnection.answer(stream);
 
         mediaConnection.on("stream", (stream) => {
           remoteVideo.srcObject = stream;
@@ -243,6 +243,8 @@ const GoodtokUA = () => {
           localStream.getTracks().forEach((track) => track.stop());
         }
 
+        // TODO: remotePeer.close();
+
         // TODO: If is connected, unregister, disconnect and hangup
         break;
       }

diff --git a/mods/widget/src/components/video/MobileVideo.tsx b/mods/widget/src/components/video/MobileVideo.tsx
@@ -99,17 +99,18 @@ export const MobileVideo = forwardRef((props: VideoProps, ref) => {
   return (
     <MobileVideoContainer style={{ display: props.isOpen ? "block" : "none" }}>
       <RemoteVideoContainer>
-        <audio style={{ display: "none" }} id="goodtok-audio" controls>
-          <p>Your browser doesn't support HTML5 audio.</p>
-        </audio>
         <RemoteVideo ref={remoteVideoRef} className="goodtok-video__remote" />
         {isCustomerCameraMuted && (
           <MutedOverlay>
             <MutedCameraIcon />
           </MutedOverlay>
         )}
         <LocalVideoContainer>
-          <LocalVideo ref={localVideoRef} className="goodtok-video__local" />
+          <LocalVideo
+            ref={localVideoRef}
+            className="goodtok-video__local"
+            muted
+          />
         </LocalVideoContainer>
         <Controls>
           <ButtonCircleWrapper

diff --git a/mods/widget/src/components/video/Video.tsx b/mods/widget/src/components/video/Video.tsx
@@ -127,17 +127,18 @@ export const Video = forwardRef((props: VideoProps, ref) => {
         </HeaderContainer>
       </Header>
       <RemoteVideoContainer>
-        <audio style={{ display: "none" }} id="goodtok-audio" controls>
-          <p>Your browser doesn't support HTML5 audio.</p>
-        </audio>
         <RemoteVideo ref={remoteVideoRef} className="goodtok-video__remote" />
         {isCustomerCameraMuted && (
           <MutedOverlay>
             <MutedCameraIcon />
           </MutedOverlay>
         )}
         <LocalVideoContainer>
-          <LocalVideo ref={localVideoRef} className="goodtok-video__local" />
+          <LocalVideo
+            ref={localVideoRef}
+            className="goodtok-video__local"
+            muted
+          />
         </LocalVideoContainer>
         <Controls>
           <ButtonCircleWrapper