#4

client/app/composables/use-mediasoup.ts

@@ -1,3 +1,4 @@
+import type { type Consumer, Producer } from 'mediasoup-client/types'
 import type { Socket } from 'socket.io-client'
 import { createGlobalState } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
@@ -24,7 +25,7 @@ export const useMediasoup = createGlobalState(() => {
 
   const initializing = ref(false)
   const connected = ref(false)
-  const streams = shallowRef<MediaStream[]>([])
+  const streams = shallowRef<Record<Consumer['id'], MediaStream>>({})
   let device: mediasoupClient.Device
   let sendTransport: mediasoupClient.types.Transport
   let recvTransport: mediasoupClient.types.Transport
@@ -44,6 +45,12 @@ export const useMediasoup = createGlobalState(() => {
     await consume(producerId)
   })
 
+  socket.on('producerClosed', async (producerId: Producer['id']) => {
+    delete streams.value[producerId]
+
+    triggerRef(streams)
+  })
+
   async function consume(producerId: number) {
     const params = await socket.emitWithAck('consume', {
       producerId,
@@ -60,9 +67,11 @@ export const useMediasoup = createGlobalState(() => {
       ...params,
       id: params.consumerId,
     })
+
     const stream = new MediaStream([consumer.track])
 
-    streams.value.push(stream)
+    streams.value[producerId] = stream
+
     triggerRef(streams)
   }
 
@@ -91,8 +100,10 @@ export const useMediasoup = createGlobalState(() => {
 
         callback()
       }
-      catch (err) {
-        errback(err)
+      catch (error) {
+        if (error instanceof Error) {
+          errback(error)
+        }
       }
     })
 
@@ -105,8 +116,10 @@ export const useMediasoup = createGlobalState(() => {
         })
         callback({ id: producerId })
       }
-      catch (err) {
-        errback(err)
+      catch (error) {
+        if (error instanceof Error) {
+          errback(error)
+        }
       }
     })
   }
@@ -116,12 +129,10 @@ export const useMediasoup = createGlobalState(() => {
     console.log(devices)
 
     const stream = await navigator.mediaDevices.getUserMedia({
-      // audio: true,
       audio: {
         autoGainControl: false,
         noiseSuppression: true,
         echoCancellation: false,
-        latency: 0,
       },
     })
     const track = stream.getAudioTracks()[0]
@@ -148,8 +159,10 @@ export const useMediasoup = createGlobalState(() => {
 
         callback()
       }
-      catch (err) {
-        errback(err)
+      catch (error) {
+        if (error instanceof Error) {
+          errback(error)
+        }
       }
     })
   }