client volumes

Reviewed-on: #9

client/app/assets/styles/main.scss

@@ -31,17 +31,17 @@ body {
 
 .p-select-overlay {
   /* Force dropdown width to match computed min-width from PrimeVue internals. */
-  width: 0;
+  width: 0 !important;
 }
 
 .p-select-label {
-  width: 0;
+  width: 0 !important;
-  overflow: hidden;
+  overflow: hidden !important;
-  text-overflow: ellipsis;
+  text-overflow: ellipsis !important;
 }
 
 .p-select-option-label {
-  min-width: 0;
+  min-width: 0 !important;
-  overflow: hidden;
+  overflow: hidden !important;
-  text-overflow: ellipsis;
+  text-overflow: ellipsis !important;
 }

client/app/components.d.ts

@@ -13,19 +13,17 @@ declare module 'vue' {
     PrimeButton: typeof import('primevue/button')['default']
     PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
     PrimeCard: typeof import('primevue/card')['default']
+    PrimeDivider: typeof import('primevue/divider')['default']
     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']
     PrimeSlider: typeof import('primevue/slider')['default']
-    PrimeTab: typeof import('primevue/tab')['default']
-    PrimeTabList: typeof import('primevue/tablist')['default']
-    PrimeTabPanel: typeof import('primevue/tabpanel')['default']
-    PrimeTabPanels: typeof import('primevue/tabpanels')['default']
-    PrimeTabs: typeof import('primevue/tabs')['default']
-    PrimeTextarea: typeof import('primevue/textarea')['default']
     PrimeToast: typeof import('primevue/toast')['default']
+    PrimeToggleSwitch: typeof import('primevue/toggleswitch')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

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>
@@ -27,7 +32,7 @@
         <PrimeBadge v-if="isMe" severity="secondary" value="You" size="small" class="shrink-0" />
       </div>
 
-      <Component :is="expanded ? ChevronUp : ChevronDown" v-if="!isMe" :size="20" />
+      <Component :is="expanded ? ChevronUp : ChevronDown" v-if="!isMe" :size="20" class="text-muted-color" />
     </div>
 
     <CollapseTransition v-if="!isMe">
@@ -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/components/chat/ChatEditor.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="chat-editor">
-    <PrimeTextarea v-model="msg" />
-    <PrimeButton :disabled="!msg" @click="handleSend()">
-      Send
-    </PrimeButton>
-  </div>
-</template>
-
-<script lang="ts" setup>
-interface Emits {
-  (e: 'send', msg: string): void
-}
-
-const emit = defineEmits<Emits>()
-
-const msg = ref<string | undefined>()
-
-function handleSend() {
-  emit('send', msg.value!)
-
-  msg.value = ''
-}
-</script>
-
-<style lang="scss">
-
-</style>

client/app/components/chat/ChatMessage.vue

@@ -1,27 +0,0 @@
-<template>
-  <PrimeCard>
-    <template #header>
-      <span class="font-bold">
-        {{ username }}
-      </span>
-    </template>
-    <template #content>
-      {{ message }}
-    </template>
-    <template #footer>
-      {{ createdAt }}
-    </template>
-  </PrimeCard>
-</template>
-
-<script lang="ts" setup>
-interface Props {
-  username: string
-  message: string
-  createdAt: Date
-}
-
-defineProps<Props>()
-</script>
-
-<style lang="scss"></style>

client/app/components/chat/ChatWidget.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="chat-tabs">
-    <div class="chat-tabs__messages">
-      <ChatMessage v-for="msg in messages" :key="msg.id" :created-at="msg.createdAt" :username="msg.username" :message="msg.message" />
-    </div>
-
-    <PrimeTabs :value="channels[0]">
-      <PrimeTabList>
-        <PrimeTab v-for="channel in channels" :key="channel" :value="channel">
-          Channel: {{ channel }}
-        </PrimeTab>
-      </PrimeTabList>
-      <PrimeTabPanels>
-        <PrimeTabPanel :value="channel">
-          <ChatEditor />
-        </PrimeTabPanel>
-      </PrimeTabPanels>
-    </PrimeTabs>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const {
-  channel,
-
-  messages,
-  channels,
-} = useChat()
-</script>
-
-<style lang="scss" scoped>
-
-</style>

client/app/composables/use-app.ts

@@ -12,7 +12,17 @@ export const useApp = createGlobalState(() => {
   const ready = ref(false)
   const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
   const commitSha = __COMMIT_SHA__
-  const version = computedAsync(() => isTauri.value ? getVersion() : 'web', '-')
+  const version = computedAsync(() => {
+    if (import.meta.dev) {
+      return 'dev'
+    }
+    else if (isTauri.value) {
+      return getVersion()
+    }
+    else {
+      return 'web'
+    }
+  }, '-')
 
   const inputMuted = computed(() => {
     return !!mediasoup.micProducer.value?.paused

client/app/composables/use-chat.ts

@@ -1,44 +0,0 @@
-import { createGlobalState } from '@vueuse/core'
-
-interface ChatMessage {
-  id: string
-  username: string
-  message: string
-}
-
-interface ChatChannel {
-  id: number
-  name: string
-}
-
-export const useChat = createGlobalState(() => {
-  const messages = ref([
-    {
-      id: '1337',
-      username: 'Yes',
-      message: 'Fisting is 300 bucks',
-      createdAt: Date.now(),
-    },
-  ])
-
-  const channel = ref<number>(0)
-
-  async function sendMsg(channelId: ChatChannel['id'], msg: ChatMessage['message']) {
-    console.log('Trying to send message', channelId, msg)
-  }
-
-  watch(channel, async (id) => {
-    await console.log('Yes', id)
-  }, {
-    immediate: true,
-  })
-
-  return {
-    channel,
-
-    channels,
-    messages,
-
-    sendMsg,
-  }
-})

client/app/composables/use-fullscreen-video.ts

@@ -29,11 +29,25 @@ export const useFullscreenVideo = createGlobalState(() => {
       videoEl.value = el
     }
 
+    stream.getTracks().forEach(t =>
+      t.addEventListener('ended', hide),
+    )
+    videoEl.value.addEventListener('ended', hide)
+
     await videoEl.value.requestFullscreen()
   }
 
   function hide() {
+    if (!videoEl.value)
+      return
+
+    (videoEl.value.srcObject as MediaStream).getTracks().forEach(t =>
+      t.removeEventListener('ended', hide),
+    )
+    videoEl.value.removeEventListener('ended', hide)
+
     videoEl.value?.remove()
+    videoEl.value = undefined
   }
 
   useEventListener(document, 'fullscreenchange', () => {

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) {
@@ -317,7 +325,7 @@ export const useMediasoup = createSharedComposable(() => {
     if (!device.value)
       return
 
-    const stream = await getShareStream()
+    const stream = await getShareStream(preferences.shareFps.value)
 
     const track = stream.getVideoTracks()[0]
 
@@ -424,6 +432,7 @@ export const useMediasoup = createSharedComposable(() => {
     init,
     consumers,
     producers,
+    speakingClients,
     sendTransport,
     recvTransport,
     rtpCapabilities,

client/app/composables/use-preferences.ts

@@ -19,6 +19,8 @@ export const usePreferences = createGlobalState(() => {
   const noiseSuppression = useLocalStorage('NOISE_SUPPRESSION', true)
   const echoCancellation = useLocalStorage('ECHO_CANCELLATION', true)
 
+  const shareFps = useLocalStorage('SHARE_FPS', 30)
+
   const toggleInputHotkey = ref<SyncedPreferences['toggleInputHotkey']>('')
   const toggleOutputHotkey = ref<SyncedPreferences['toggleOutputHotkey']>('')
 
@@ -57,6 +59,7 @@ export const usePreferences = createGlobalState(() => {
     autoGainControl,
     noiseSuppression,
     echoCancellation,
+    shareFps,
     toggleInputHotkey,
     toggleOutputHotkey,
     inputDeviceExist,

client/app/layouts/default.vue

@@ -4,7 +4,7 @@
       class="flex items-center justify-between gap-2 rounded-xl p-3 bg-surface-950"
     >
       <div class="inline-flex items-center gap-3">
-        <PrimeBadge v-if="isTauri" class="opacity-50" severity="secondary" :value="version" size="small" />
+        <PrimeBadge class="opacity-50" severity="secondary" :value="version" size="small" />
         <PrimeBadge :severity="connected ? 'success' : 'danger' " />
       </div>
 
@@ -72,7 +72,6 @@ import {
 } from 'lucide-vue-next'
 
 const {
-  isTauri,
   version,
   clients,
   inputMuted,

client/app/pages/index.vue

@@ -3,7 +3,7 @@
     <div class="flex items-center justify-center">
       <PrimeCard>
         <template #content>
-          <ChatWidget />
+          The chat is under development.
         </template>
       </PrimeCard>
     </div>

client/app/pages/preferences.vue

@@ -47,6 +47,18 @@
     <!--      <label for="outputDevice">Output device</label> -->
     <!--    </PrimeFloatLabel> -->
 
+    <PrimeDivider align="left">
+      Video
+    </PrimeDivider>
+
+    <div>
+      <div class="text-sm mb-2">
+        Share FPS
+      </div>
+
+      <PrimeSelectButton v-model="shareFps" :options="[5, 30, 60]" fluid size="small" />
+    </div>
+
     <template v-if="isTauri">
       <PrimeDivider align="left">
         Hotkeys
@@ -117,6 +129,7 @@ const {
   toggleOutputHotkey,
   inputDeviceExist,
   outputDeviceExist,
+  shareFps,
 } = usePreferences()
 
 const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)

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/src/lib.rs

@@ -4,7 +4,7 @@ pub fn run() {
         .plugin(tauri_plugin_global_shortcut::Builder::new().build())
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_updater::Builder::new().build())
-//         .plugin(tauri_plugin_single_instance::init(|_, _, _| {}))
+        .plugin(tauri_plugin_single_instance::init(|_, _, _| {}))
         .setup(|app| {
             if cfg!(debug_assertions) {
                 app.handle().plugin(

client/src-tauri/tauri.conf.json

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

node_modules/.yarn-integrity

@@ -1,12 +0,0 @@
-{
-  "systemParams": "win32-x64-137",
-  "modulesFolders": [
-    "node_modules"
-  ],
-  "flags": [],
-  "linkedModules": [],
-  "topLevelPatterns": [],
-  "lockfileEntries": {},
-  "files": [],
-  "artifacts": {}
-}

server/modules/chat/index.ts

@@ -1,22 +0,0 @@
-import client from '../../prisma/client.ts'
-
-export async function chatInit() {
-  const existing = client.chatChannel.findFirst({
-    where: {
-      id: 0,
-    },
-  })
-
-  if (!existing) {
-    await client.chatChannel.create({
-      create: {
-        id: 0,
-        name: 'Main channel',
-      },
-      update: null,
-      where: {
-        id: 0,
-      },
-    })
-  }
-}

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/prisma/migrations/20251226183651_minus_nahuy/migration.sql

@@ -1,20 +0,0 @@
-/*
-  Warnings:
-
-  - You are about to drop the column `volumes` on the `UserPreferences` table. All the data in the column will be lost.
-
-*/
--- RedefineTables
-PRAGMA defer_foreign_keys=ON;
-PRAGMA foreign_keys=OFF;
-CREATE TABLE "new_UserPreferences" (
-    "userId" TEXT NOT NULL PRIMARY KEY,
-    "toggleInputHotkey" TEXT DEFAULT '',
-    "toggleOutputHotkey" TEXT DEFAULT '',
-    CONSTRAINT "UserPreferences_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
-);
-INSERT INTO "new_UserPreferences" ("toggleInputHotkey", "toggleOutputHotkey", "userId") SELECT "toggleInputHotkey", "toggleOutputHotkey", "userId" FROM "UserPreferences";
-DROP TABLE "UserPreferences";
-ALTER TABLE "new_UserPreferences" RENAME TO "UserPreferences";
-PRAGMA foreign_keys=ON;
-PRAGMA defer_foreign_keys=OFF;

server/prisma/migrations/20251226190516_chat/migration.sql

@@ -1,18 +0,0 @@
--- CreateTable
-CREATE TABLE "ChatMessage" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "userId" TEXT NOT NULL,
-    "channelId" TEXT NOT NULL,
-    "content" TEXT NOT NULL DEFAULT '',
-    CONSTRAINT "ChatMessage_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE,
-    CONSTRAINT "ChatMessage_channelId_fkey" FOREIGN KEY ("channelId") REFERENCES "ChatChannel" ("id") ON DELETE CASCADE ON UPDATE CASCADE
-);
-
--- CreateTable
-CREATE TABLE "ChatChannel" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "name" TEXT NOT NULL
-);
-
--- CreateIndex
-CREATE UNIQUE INDEX "ChatChannel_name_key" ON "ChatChannel"("name");

server/prisma/migrations/20251226194252_more_chat_wip/migration.sql

@@ -1,34 +0,0 @@
-/*
-  Warnings:
-
-  - The primary key for the `ChatChannel` table will be changed. If it partially fails, the table could be left without primary key constraint.
-  - You are about to alter the column `id` on the `ChatChannel` table. The data in that column could be lost. The data in that column will be cast from `String` to `Int`.
-  - You are about to alter the column `channelId` on the `ChatMessage` table. The data in that column could be lost. The data in that column will be cast from `String` to `Int`.
-  - Added the required column `createdAt` to the `ChatMessage` table without a default value. This is not possible if the table is not empty.
-
-*/
--- RedefineTables
-PRAGMA defer_foreign_keys=ON;
-PRAGMA foreign_keys=OFF;
-CREATE TABLE "new_ChatChannel" (
-    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
-    "name" TEXT NOT NULL
-);
-INSERT INTO "new_ChatChannel" ("id", "name") SELECT "id", "name" FROM "ChatChannel";
-DROP TABLE "ChatChannel";
-ALTER TABLE "new_ChatChannel" RENAME TO "ChatChannel";
-CREATE UNIQUE INDEX "ChatChannel_name_key" ON "ChatChannel"("name");
-CREATE TABLE "new_ChatMessage" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "userId" TEXT NOT NULL,
-    "channelId" INTEGER NOT NULL,
-    "content" TEXT NOT NULL DEFAULT '',
-    "createdAt" DATETIME NOT NULL,
-    CONSTRAINT "ChatMessage_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE,
-    CONSTRAINT "ChatMessage_channelId_fkey" FOREIGN KEY ("channelId") REFERENCES "ChatChannel" ("id") ON DELETE CASCADE ON UPDATE CASCADE
-);
-INSERT INTO "new_ChatMessage" ("channelId", "content", "id", "userId") SELECT "channelId", "content", "id", "userId" FROM "ChatMessage";
-DROP TABLE "ChatMessage";
-ALTER TABLE "new_ChatMessage" RENAME TO "ChatMessage";
-PRAGMA foreign_keys=ON;
-PRAGMA defer_foreign_keys=OFF;

server/prisma/migrations/20251226194927_more_chat_wip/migration.sql

@@ -1,17 +0,0 @@
--- RedefineTables
-PRAGMA defer_foreign_keys=ON;
-PRAGMA foreign_keys=OFF;
-CREATE TABLE "new_ChatMessage" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "userId" TEXT NOT NULL,
-    "channelId" INTEGER NOT NULL,
-    "content" TEXT NOT NULL,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    CONSTRAINT "ChatMessage_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE,
-    CONSTRAINT "ChatMessage_channelId_fkey" FOREIGN KEY ("channelId") REFERENCES "ChatChannel" ("id") ON DELETE CASCADE ON UPDATE CASCADE
-);
-INSERT INTO "new_ChatMessage" ("channelId", "content", "createdAt", "id", "userId") SELECT "channelId", "content", "createdAt", "id", "userId" FROM "ChatMessage";
-DROP TABLE "ChatMessage";
-ALTER TABLE "new_ChatMessage" RENAME TO "ChatMessage";
-PRAGMA foreign_keys=ON;
-PRAGMA defer_foreign_keys=OFF;

server/prisma/schema.prisma

@@ -18,8 +18,6 @@ model User {
 
   Session           Session[]
   UserPreferences   UserPreferences?
-
-  ChatMessage ChatMessage[]
 }
 
 model Session {
@@ -36,26 +34,7 @@ model UserPreferences {
   userId              String  @id
   toggleInputHotkey   String? @default("")
   toggleOutputHotkey  String? @default("")
+  volumes             Json?   @default("{}")
 
   user                User    @relation(fields: [userId], references: [id], onDelete: Cascade)
-}
-
-model ChatMessage {
-  id String @id
-
-  userId String
-  channelId Int
-  content String
-
-  createdAt DateTime @default(now())
-
-  user User @relation(fields: [userId], references: [id], onDelete: Restrict)
-  channel ChatChannel @relation(fields: [channelId], references: [id], onDelete: Cascade)
-}
-
-model ChatChannel {
-  id Int @id
-  name String @unique
-
-  messages ChatMessage[]
 }

server/routes/chat.ts

@@ -1,23 +0,0 @@
-import type { FastifyInstance } from 'fastify'
-import prisma from '../prisma/client.ts'
-
-export default function (fastify: FastifyInstance) {
-  fastify.get('/chats', async (req, reply) => {
-    if (req.user) {
-      return prisma.chatChannel.findMany()
-    }
-
-    reply.code(401).send(false)
-  })
-
-  fastify.get('/chats/:id', async (req, reply) => {
-    if (req.user) {
-      console.log('Trying to fetch chat with id', req.body.id)
-
-      // return prisma.userPreferences.findFirst({ where: { userId: req.user.id } })
-      return true
-    }
-
-    reply.code(401).send(false)
-  })
-}

server/server.ts

@@ -4,7 +4,6 @@ import FastifyAutoLoad from '@fastify/autoload'
 import FastifyCookie from '@fastify/cookie'
 import FastifyCors from '@fastify/cors'
 import Fastify from 'fastify'
-import { chatInit } from './modules/chat/index.ts'
 import prisma from './prisma/client.ts'
 
 const __filename = fileURLToPath(import.meta.url)
@@ -44,8 +43,6 @@ fastify.register(FastifyAutoLoad, {
 
     await prisma.$connect()
     fastify.log.info('Testing DB Connection. OK')
-
-    await chatInit()
   }
   catch (err) {
     fastify.log.error(err)

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 {}

yarn.lock

@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-