#4

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) {
-  if (!ref || !producer.track)
+function onAudioRef(ref: HTMLAudioElement, client: ChadClient) {
+  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.play()
+  ref.setAttribute('data-consumer-id', audioConsumer.id)
 }
 </script>