fix(web): queue screen switch audio/camera devices

brunocroh · May 21, 2024 · b9abd70 · b9abd70
1 parent 56785cb
commit b9abd70
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 18 deletions.
diff --git a/apps/web/app/room/queue/page.tsx b/apps/web/app/room/queue/page.tsx
@@ -20,6 +20,7 @@ export default function Page(): JSX.Element {
     selectedVideoDevice,
     switchMic,
     activeStream: stream,
+    stopAllStreaming,
   } = useUserMedia();
 
   const [me, setMe] = useState(null);
@@ -66,6 +67,12 @@ export default function Page(): JSX.Element {
     }
   }, [stream]);
 
+  useEffect(() => {
+    return () => {
+      stopAllStreaming()
+    }
+  }, [])
+
   return (
     <main className="flex h-full flex-col">
       <section className="align-center flex h-full place-content-center content-center justify-center">

diff --git a/apps/web/hooks/useUserMedia.ts b/apps/web/hooks/useUserMedia.ts
@@ -80,53 +80,43 @@ export const useUserMedia = () => {
 
   const switchMic = useCallback(
     async (deviceId: string) => {
-      const oldTrack = stream?.getAudioTracks()[0]!;
+      const oldTrack = activeStream?.getAudioTracks()[0]!;
 
-      const tempStream = await navigator.mediaDevices.getUserMedia({
+      const newStream = await navigator.mediaDevices.getUserMedia({
         audio: { deviceId: { exact: deviceId } },
         video: { deviceId: { exact: preferences.video } },
       });
 
-      const newTrack = tempStream.getAudioTracks()[0]!;
-
-      const newStream = new MediaStream([
-        newTrack,
-        ...(stream?.getVideoTracks() || []),
-      ]);
+      const newTrack = newStream.getAudioTracks()[0]!;
 
 
       stopStreaming(activeStream!)
       preferences.set(deviceId, 'audio')
-      // setActiveStream(newStream)
+      setActiveStream(newStream)
 
       return {
         oldTrack,
         newTrack,
         newStream,
       };
     },
-    [preferences, stream, stopStreaming, activeStream],
+    [preferences, stopStreaming, activeStream],
   );
 
   const switchVideo = useCallback(async (deviceId: string) => {
     console.log("SWITCH")
     const oldTrack = activeStream?.getVideoTracks()[0]!;
 
-    const tempStream = await navigator.mediaDevices.getUserMedia({
+    const newStream = await navigator.mediaDevices.getUserMedia({
       audio: false,
       video: { deviceId: { exact: deviceId } },
     });
 
-    const newTrack = tempStream.getVideoTracks()[0]!;
-
-    const newStream = new MediaStream([
-      newTrack,
-      ...(stream?.getAudioTracks() || []),
-    ]);
+    const newTrack = newStream.getVideoTracks()[0]!;
 
     stopStreaming(activeStream!)
     preferences.set(deviceId, 'video')
-    // setActiveStream(newStream)
+    setActiveStream(newStream)
 
     return {
       oldTrack,