fix(web): fix stop other media stream when change video/voice input

brunocroh · May 21, 2024 · 1dccf41 · 1dccf41
1 parent 5d24cdf
commit 1dccf41
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git 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
@@ -80,46 +80,67 @@ 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,
       };
     },
     [preferences, activeStream, stopStreaming],
   );
 
   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]);