client volumes

client/app/composables/use-mediasoup.ts

@@ -1,6 +1,8 @@
+import type { SpeakingClient } from '#shared/types'
 import type { MediaKind, ProducerOptions } from 'mediasoup-client/types'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
+import { shallowRef } from 'vue'
 import { useDevices } from '~/composables/use-devices'
 import { usePreferences } from '~/composables/use-preferences'
 import { useSignaling } from '~/composables/use-signaling'
@@ -40,6 +42,8 @@ export const useMediasoup = createSharedComposable(() => {
   const consumers = shallowRef<Map<string, mediasoupClient.types.Consumer>>(new Map())
   const producers = shallowRef<Map<string, mediasoupClient.types.Producer>>(new Map())
 
+  const speakingClients = shallowRef<SpeakingClient[]>([])
+
   watch(signaling.socket, (socket) => {
     if (!socket)
       return
@@ -227,6 +231,10 @@ export const useMediasoup = createSharedComposable(() => {
 
       triggerRef(consumers)
     })
+
+    socket.on('speakingPeers', (value: SpeakingClient[]) => {
+      speakingClients.value = value
+    })
   }, { immediate: true, flush: 'sync' })
 
   async function enableProducer(type: ProducerType, options: ProducerOptions) {
@@ -424,6 +432,7 @@ export const useMediasoup = createSharedComposable(() => {
     init,
     consumers,
     producers,
+    speakingClients,
     sendTransport,
     recvTransport,
     rtpCapabilities,