From 1dccf4105efa7db3867da01f11920d726b65ff86 Mon Sep 17 00:00:00 2001
From: Bruno Rodrigues <brunocroh@gmail.com>
Date: Wed, 22 May 2024 00:00:02 +0100
Subject: [PATCH] fix(web): fix stop other media stream when change video/voice
 input

---
 apps/web/app/room/[slug]/page.tsx |  5 ++--
 apps/web/hooks/useUserMedia.ts    | 45 ++++++++++++++++++++++---------
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/apps/web/app/room/[slug]/page.tsx b/apps/web/app/room/[slug]/page.tsx
index d0d13c1..ffa2f01 100644
--- a/apps/web/app/room/[slug]/page.tsx
+++ b/apps/web/app/room/[slug]/page.tsx
@@ -146,10 +146,11 @@ export default function Page(): JSX.Element {
       result = await switchVideo(deviceId);
     }
 
-    peerRef.current?.replaceTrack(result.oldTrack, result.newTrack, stream!);
+    peerRef.current?.replaceTrack(result?.oldVideoTrack!, result?.newVideoTrack!, stream!);
+    peerRef.current?.replaceTrack(result?.oldAudioTrack!, result?.newAudioTrack!, stream!);
 
     if (videoRef.current) {
-      videoRef.current.srcObject = result.newStream;
+      videoRef.current.srcObject = result?.newStream!;
     }
   };
 
diff --git a/apps/web/hooks/useUserMedia.ts b/apps/web/hooks/useUserMedia.ts
index b574619..a83698f 100644
--- a/apps/web/hooks/useUserMedia.ts
+++ b/apps/web/hooks/useUserMedia.ts
@@ -80,22 +80,31 @@ export const useUserMedia = () => {
 
   const switchMic = useCallback(
     async (deviceId: string) => {
-      const oldTrack = activeStream?.getAudioTracks()[0]!;
+    const oldVideoTrack = activeStream?.getVideoTracks()[0]!;
+    const oldAudioTrack = activeStream?.getAudioTracks()[0]!;
 
-      const newStream = await navigator.mediaDevices.getUserMedia({
+      const tempStream = await navigator.mediaDevices.getUserMedia({
         audio: { deviceId: { exact: deviceId } },
         video: { deviceId: { exact: preferences.video } },
       });
 
-      const newTrack = newStream.getAudioTracks()[0]!;
+      const newAudioTrack = tempStream.getAudioTracks()[0]!;
+      const newVideoTrack = tempStream.getVideoTracks()[0]!;
+
+      const newStream = new MediaStream()
+
+      newStream.addTrack(newVideoTrack)
+      newStream.addTrack(newAudioTrack)
 
       stopStreaming(activeStream!)
       preferences.set(deviceId, 'audio')
       setActiveStream(newStream)
 
       return {
-        oldTrack,
-        newTrack,
+        oldVideoTrack,
+        newVideoTrack,
+        oldAudioTrack,
+        newAudioTrack,
         newStream,
       };
     },
@@ -103,23 +112,35 @@ export const useUserMedia = () => {
   );
 
   const switchVideo = useCallback(async (deviceId: string) => {
-    const oldTrack = activeStream?.getVideoTracks()[0]!;
+    const oldVideoTrack = activeStream?.getVideoTracks()[0]!;
+    const oldAudioTrack = activeStream?.getAudioTracks()[0]!;
 
-    const newStream = await navigator.mediaDevices.getUserMedia({
-      audio: { deviceId: { exact: preferences.audio }},
+    const tempStream = await navigator.mediaDevices.getUserMedia({
+      audio: {deviceId: { exact: preferences.audio } },
       video: { deviceId: { exact: deviceId }},
     });
 
-    const newTrack = newStream.getVideoTracks()[0]!;
+    const newVideoTrack = tempStream.getVideoTracks()[0]!;
+    const newAudioTrack = tempStream.getAudioTracks()[0]!;
+
+    const newStream = new MediaStream()
+
+    if(oldAudioTrack) {
+      newStream.addTrack(oldAudioTrack)
+    }
+
+    newStream.addTrack(newVideoTrack)
 
     stopStreaming(activeStream!)
     preferences.set(deviceId, 'video')
     setActiveStream(newStream)
 
     return {
-      oldTrack,
-      newTrack,
-      newStream,
+      oldVideoTrack,
+      newVideoTrack,
+      oldAudioTrack,
+      newAudioTrack,
+      newStream: tempStream,
     };
   }, [activeStream, preferences, stopStreaming]);