#4

client/app/app.vue

@@ -3,5 +3,5 @@
 </template>
 
 <script lang="ts" setup>
-useMediasoup()
+const { consumers, producers } = useMediasoup()
 </script>

client/app/components.d.ts

@@ -8,27 +8,13 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    PrimeAccordion: typeof import('primevue/accordion')['default']
-    PrimeAccordionContent: typeof import('primevue/accordioncontent')['default']
-    PrimeAccordionHeader: typeof import('primevue/accordionheader')['default']
-    PrimeAccordionPanel: typeof import('primevue/accordionpanel')['default']
     PrimeAvatar: typeof import('primevue/avatar')['default']
     PrimeBadge: typeof import('primevue/badge')['default']
     PrimeButton: typeof import('primevue/button')['default']
-    PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
     PrimeCard: typeof import('primevue/card')['default']
-    PrimeContextMenu: typeof import('primevue/contextmenu')['default']
-    PrimeDivider: typeof import('primevue/divider')['default']
-    PrimeDrawer: typeof import('primevue/drawer')['default']
-    PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimeMenu: typeof import('primevue/menu')['default']
-    PrimeOverlayBadge: typeof import('primevue/overlaybadge')['default']
-    PrimePopover: typeof import('primevue/popover')['default']
-    PrimeScrollPanel: typeof import('primevue/scrollpanel')['default']
     PrimeSlider: typeof import('primevue/slider')['default']
-    PrimeTag: typeof import('primevue/tag')['default']
-    PrimeToolbar: typeof import('primevue/toolbar')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

client/app/components/ClientRow.vue

@@ -30,11 +30,11 @@
 </template>
 
 <script setup lang="ts">
-import type { Client } from '#shared/types'
+import type { ChadClient } from '#shared/types'
 import type { MenuItem } from 'primevue/menuitem'
 
 defineProps<{
-  client: Client
+  client: ChadClient
 }>()
 
 const menuRef = useTemplateRef('menu')

client/app/composables/use-global-state.ts

@@ -1,10 +1,20 @@
-import type { Client } from '#shared/types'
+import type { ChadClient } from '#shared/types'
 import { createGlobalState, useLocalStorage } from '@vueuse/core'
 
 export const useGlobalState = createGlobalState(() => {
   const username = useLocalStorage<string>('username', '')
 
-  const clients = shallowRef<Client[]>([])
+  const clients = ref<ChadClient[]>([])
+
+  const me = computed(() => clients.value.find(client => client.isMe))
+
+  const clientByIdMap = computed(() => {
+    return clients.value.reduce<Record<ChadClient['id'], ChadClient>>((result, client) => {
+      result[client.id] = client
+
+      return result
+    }, {})
+  })
 
   function reset() {
     clients.value = []
@@ -12,7 +22,9 @@ export const useGlobalState = createGlobalState(() => {
 
   return {
     username,
+    me,
     clients,
+    clientByIdMap,
     reset,
   }
 })

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())
-
+  const producers = shallowRef<Map<string, mediasoupClient.types.Producer>>(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)
-  // }
 
   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)
+      state.clients.value.push(transformClient(client))
-      triggerRef(state.clients)
     })
 
     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', () => {
+        console.log(consumer)
-          consumers.value.delete(consumer.id)
+
-          triggerRef(consumers)
+        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,

client/app/pages/index.vue

@@ -18,30 +18,39 @@
     </div>
   </div>
 
-  <audio v-for="[id, producer] in Array.from(producers)" :key="id" :ref="(el) => onAudioRef(el, producer)" />
+  <audio v-for="client in clients" :key="client.id" :ref="(el) => onAudioRef(el, client)" autoplay controls />
 
   <PrimeBadge class="fixed top-3 right-3" severity="success" />
 </template>
 
 <script setup lang="ts">
-import type { Producer } from 'mediasoup-client/types'
+import type { ChadClient } from '#shared/types'
 import { vAutoAnimate } from '@formkit/auto-animate'
 
 const { clients } = useGlobalState()
-const { producers } = useMediasoup()
+const { consumers } = useMediasoup()
 
-function onAudioRef(ref: HTMLAudioElement, producer: Producer) {
+function onAudioRef(ref: HTMLAudioElement, client: ChadClient) {
-  if (!ref || !producer.track)
+  if (!ref || !client)
     return
 
-  console.log(onAudioRef)
+  if (client.isMe)
+    return
+
+  const consumersArray = client.consumerIds.map(id => consumers.value.get(id)!)
+
+  const audioConsumer = consumersArray.find(
+    consumer => consumer.track.kind === 'audio',
+  )
+
+  if (!audioConsumer)
+    return
 
   const stream = new MediaStream()
 
-  stream.addTrack(producer.track)
+  stream.addTrack(audioConsumer!.track)
 
   ref.srcObject = stream
-
+  ref.setAttribute('data-consumer-id', audioConsumer.id)
-  ref.play()
 }
 </script>

client/shared/types.ts

@@ -1,7 +1,11 @@
 import type * as mediasoupClient from 'mediasoup-client'
 
-export interface Client {
+export interface RemoteClient {
   id: string
   username: string
-  consumers: mediasoupClient.types.Consumer['id'][]
+}
+
+export interface ChadClient extends RemoteClient {
+  isMe?: boolean
+  consumerIds: mediasoupClient.types.Consumer['id'][]
 }

client/src-tauri/tauri.conf.json

@@ -2,12 +2,12 @@
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "chad",
   "version": "0.1.0",
-  "identifier": "com.tauri.dev",
+  "identifier": "xyz.koptilnya.chad",
   "build": {
-    "frontendDist": "../dist",
+    "frontendDist": "../.output/public",
     "devUrl": "http://localhost:3000",
     "beforeDevCommand": "yarn dev",
-    "beforeBuildCommand": "yarn build"
+    "beforeBuildCommand": "yarn generate"
   },
   "app": {
     "windows": [

server/sockets/webrtc.ts

@@ -299,7 +299,7 @@ export default function (io: SocketServer, router: types.Router) {
 
       producer.close()
 
-      socket.data.producers.delete(producer.id)
+      socket.data.producers.delete(producerId)
 
       cb({ ok: true })
     })