#4

client/app/composables/use-mediasoup.ts

@@ -1,3 +1,4 @@
+import type { ChadClient, RemoteClient } from '#shared/types'
 import type { Socket } from 'socket.io-client'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
@@ -30,61 +31,14 @@ export const useMediasoup = createSharedComposable(() => {
   const webcamProducer = shallowRef<mediasoupClient.types.Producer>()
   const shareProducer = shallowRef<mediasoupClient.types.Producer>()
 
-  const producers = shallowRef<Map<string, mediasoupClient.types.Producer>>(new Map())
   const consumers = shallowRef<Map<string, mediasoupClient.types.Consumer>>(new Map())
-
-  //
-  // socket.on('producers', async (producers) => {
-  //   watch(connected, async () => {
-  //     if (!connected.value)
-  //       return
-  //
-  //     for (const producer of producers) {
-  //       await consume(producer.producerId)
-  //     }
-  //   }, { immediate: true })
-  // })
-  //
-  // socket.on('newProducer', async ({ producerId }) => {
-  //   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,
-  //     transportId: recvTransport.id,
-  //     rtpCapabilities: device.rtpCapabilities,
-  //   })
-  //
-  //   if (params?.error) {
-  //     console.error('consume error:', params.error)
-  //     return
-  //   }
-  //
-  //   const consumer = await recvTransport.consume({
-  //     ...params,
-  //     id: params.consumerId,
-  //   })
-  //
-  //   const stream = new MediaStream([consumer.track])
-  //
-  //   streams.value[producerId] = stream
-  //
-  //   triggerRef(streams)
-  // }
+  const producers = shallowRef<Map<string, mediasoupClient.types.Producer>>(new Map())
 
   watch(socket, (socket, prevSocket) => {
     if (prevSocket) {
       prevSocket.close()
 
       dispose()
-      state.reset()
     }
 
     if (!socket) {
@@ -99,16 +53,15 @@ export const useMediasoup = createSharedComposable(() => {
       console.log('[onAnyOutgoing]', event, args)
     })
 
-    socket.on('connect', () => {
+    socket.on('connect', async () => {
       if (!state.username.value)
         state.username.value = socket.id!
 
-      join()
+      await join()
     })
 
     socket.on('newPeer', (client) => {
-      state.clients.value.push(client)
-      triggerRef(state.clients)
+      state.clients.value.push(transformClient(client))
     })
 
     socket.on('peerClosed', (id) => {
@@ -121,8 +74,6 @@ export const useMediasoup = createSharedComposable(() => {
         { id, producerId, kind, rtpParameters, peerId, appData, producerPaused },
         cb,
       ) => {
-        console.log({ id, producerId, kind, rtpParameters, peerId, appData }, cb)
-
         if (!recvTransport.value)
           return
 
@@ -135,13 +86,51 @@ export const useMediasoup = createSharedComposable(() => {
           appData: { ...appData, peerId },
         })
 
+        consumer.on('transportclose', () => {
+          console.log('consumer on transportclose')
+          consumers.value.delete(consumer.id)
+          triggerRef(consumers)
+
+          const client = state.clientByIdMap.value[peerId as string]
+
+          if (!client)
+            return
+
+          client.consumerIds = client.consumerIds.filter(id => id !== consumer.id)
+        })
+
         consumers.value.set(consumer.id, consumer)
         triggerRef(consumers)
 
-        consumer.on('transportclose', () => {
-          consumers.value.delete(consumer.id)
-          triggerRef(consumers)
-        })
+        console.log(consumer)
+
+        state.clientByIdMap.value[peerId]!.consumerIds.push(consumer.id)
+
+        cb()
+      },
+    )
+
+    socket.on(
+      'consumerClosed',
+      async (
+        { consumerId },
+      ) => {
+        console.log('socket on consumerClosed')
+
+        const consumer = consumers.value.get(consumerId)
+
+        if (!consumer)
+          return
+
+        consumers.value.delete(consumer.id)
+        triggerRef(consumers)
+
+        const client = state.clientByIdMap.value[(consumer.appData.peerId || consumer.appData.socketId) as string]
+
+        if (!client)
+          return
+
+        client.consumerIds = client.consumerIds.filter(id => id !== consumer.id)
       },
     )
 
@@ -154,7 +143,7 @@ export const useMediasoup = createSharedComposable(() => {
     })
   }, { immediate: true, flush: 'sync' })
 
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     socket.value?.close()
   })
 
@@ -242,7 +231,7 @@ export const useMediasoup = createSharedComposable(() => {
 
     const result = await socket.value.emitWithAck('join', { username: state.username.value, rtpCapabilities: rtpCapabilities.value })
 
-    state.clients.value = result
+    state.clients.value = (result as RemoteClient[]).map(transformClient)
 
     await enableMic()
   }
@@ -267,6 +256,9 @@ export const useMediasoup = createSharedComposable(() => {
     })
     const track = stream.getAudioTracks()[0]
 
+    if (!track)
+      return
+
     micProducer.value = await sendTransport.value.produce({
       track,
       codecOptions: {
@@ -338,6 +330,14 @@ export const useMediasoup = createSharedComposable(() => {
     }
   }
 
+  function transformClient(client: RemoteClient): ChadClient {
+    return {
+      ...client,
+      isMe: client.id === socket.value!.id,
+      consumerIds: [],
+    }
+  }
+
   function init() {
     if (socket.value)
       return
@@ -359,17 +359,20 @@ export const useMediasoup = createSharedComposable(() => {
     shareProducer.value = undefined
 
     consumers.value = new Map()
+    producers.value = new Map()
+
+    state.reset()
   }
 
   return {
     init,
+    consumers,
+    producers,
     sendTransport,
     recvTransport,
     socket,
     rtpCapabilities,
     device,
-    producers,
-    consumers,
     micProducer,
     webcamProducer,
     shareProducer,