client volumes

client/app/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimePassword: typeof import('primevue/password')['default']
+    PrimeProgressBar: typeof import('primevue/progressbar')['default']
     PrimeScrollPanel: typeof import('primevue/scrollpanel')['default']
     PrimeSelect: typeof import('primevue/select')['default']
     PrimeSelectButton: typeof import('primevue/selectbutton')['default']

client/app/components/ClientRow.vue

@@ -7,7 +7,12 @@
     }"
   >
     <div class="p-3 flex items-center gap-3" @click="toggleExpand">
-      <PrimeAvatar size="small">
+      <PrimeAvatar
+        size="small"
+        :class="{
+          'outline-1 outline-primary outline-offset-2': speaking,
+        }"
+      >
         <template #icon>
           <User :size="20" />
         </template>
@@ -61,7 +66,7 @@ const props = defineProps<{
 }>()
 
 const { outputMuted } = useApp()
-const { consumers: allConsumers, micProducer } = useMediasoup()
+const { consumers: allConsumers, micProducer, speakingClients } = useMediasoup()
 const { me } = useClients()
 const { show } = useFullscreenVideo()
 
@@ -94,6 +99,10 @@ const audioTrack = computed(() => {
   return audioConsumer.value?.track
 })
 
+const speaking = computed(() => {
+  return speakingClients.value.find(speaker => speaker.clientId === props.client.socketId)
+})
+
 const audioConsumerPaused = ref(false)
 
 const inputMuted = computed(() => {

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,

client/app/pages/preferences.vue

@@ -52,11 +52,11 @@
     </PrimeDivider>
 
     <div>
-      <div class="flex justify-between text-sm mb-3">
+      <div class="text-sm mb-2">
-        <span>FPS</span>
+        Share FPS
-        <span>{{ shareFps }}</span>
       </div>
-      <PrimeSlider v-model="shareFps" class="mx-[10px]" :min="30" :max="60" :step="5" />
+
+      <PrimeSelectButton v-model="shareFps" :options="[5, 30, 60]" fluid size="small" />
     </div>
 
     <template v-if="isTauri">

client/shared/types.ts

@@ -8,3 +8,8 @@ export interface ChadClient {
 }
 
 export type UpdatedClient = Omit<ChadClient, 'socketId' | 'userId' | 'isMe'>
+
+export interface SpeakingClient {
+  clientId: ChadClient['socketId']
+  volume: number
+}

client/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "chad",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",

server/plugins/socket.ts

@@ -22,8 +22,8 @@ export default fp<Partial<ServerOptions>>(
       await fastify.io.close()
     })
 
-    fastify.ready(() => {
+    fastify.ready(async () => {
-      registerWebrtcSocket(fastify.io, fastify.mediasoupRouter)
+      await registerWebrtcSocket(fastify.io, fastify.mediasoupRouter)
     })
   },
   { name: 'socket-io', dependencies: ['mediasoup-worker', 'mediasoup-router'] },

server/socket/webrtc.ts

@@ -1,6 +1,7 @@
 import type { types } from 'mediasoup'
 import type { Server as SocketServer } from 'socket.io'
 import type {
+  ChadClient,
   Namespace,
   SomeSocket,
 } from '../types/webrtc.ts'
@@ -8,9 +9,39 @@ import { consola } from 'consola'
 import prisma from '../prisma/client.ts'
 import { socketToClient } from '../utils/socket-to-client.ts'
 
-export default function (io: SocketServer, router: types.Router) {
+export default async function (io: SocketServer, router: types.Router) {
   const namespace: Namespace = io.of('/webrtc')
 
+  const audioLevelObserver = await router.createAudioLevelObserver({
+    maxEntries: 10,
+    threshold: -80,
+    interval: 800,
+  })
+
+  const activeSpeakerObserver = await router.createActiveSpeakerObserver()
+
+  audioLevelObserver.on('volumes', async (volumes: types.AudioLevelObserverVolume[]) => {
+    namespace.emit('speakingPeers', volumes.map(({ producer, volume }) => {
+      const { socketId } = producer.appData as { socketId: ChadClient['socketId'] }
+
+      return {
+        clientId: socketId,
+        volume,
+      }
+    }))
+  })
+
+  audioLevelObserver.on('silence', () => {
+    namespace.emit('speakingPeers', [])
+    namespace.emit('activeSpeaker', undefined)
+  })
+
+  activeSpeakerObserver.on('dominantspeaker', ({ producer }) => {
+    const { socketId } = producer.appData as { socketId: ChadClient['socketId'] }
+
+    namespace.emit('activeSpeaker', socketId)
+  })
+
   namespace.on('connection', async (socket) => {
     consola.info('[WebRtc]', 'Client connected', socket.id)
 
@@ -182,8 +213,8 @@ export default function (io: SocketServer, router: types.Router) {
           )
         }
 
-        // TODO: Add into the AudioLevelObserver and ActiveSpeakerObserver.
+        await audioLevelObserver.addProducer({ producerId: producer.id })
-        // https://github.com/versatica/mediasoup-demo/blob/v3/server/lib/Room.js#L1276
+        await activeSpeakerObserver.addProducer({ producerId: producer.id })
       }
       catch (error) {
         if (error instanceof Error) {

server/types/webrtc.ts

@@ -118,6 +118,8 @@ export interface ServerToClientEvents {
   consumerResumed: (arg: { consumerId: string }) => void
   consumerScore: (arg: { consumerId: string, score: types.ConsumerScore }) => void
   clientChanged: (clientId: ChadClient['socketId'], client: ChadClient) => void
+  speakingPeers: (arg: { clientId: ChadClient['socketId'], volume: types.AudioLevelObserverVolume['volume'] }[]) => void
+  activeSpeaker: (clientId?: ChadClient['socketId']) => void
 }
 
 export interface InterServerEvent {}