🐛(frontend) play the speaker test when no output is picked

The speaker test called setSinkId('default'). Firefox rejects it
and playback stopped. Skip that id and play on the system output.

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to
 
 ### Fixed
 
+- 🐛(frontend) omit the default speaker id sent to LiveKit
 - 🐛(frontend) enforce recording-mode permissions on the checkboxes
 - 🔒️(agents) fix util-linux CVEs reported by Cyberwatch
 

src/frontend/src/features/analytics/exceptionFilters.ts

@@ -8,6 +8,10 @@ const IGNORED_EXCEPTION_PATTERNS = [
   // the close reason is already logged by the SDK.
   // See: https://github.com/livekit/client-sdk-js/issues/2062
   /^Event captured as exception with keys: isTrusted$/,
+  // LiveKit logs a rejected setSinkId on remote audio attach and already
+  // swallows it. capture_console_errors turns that log into an exception
+  // and stringifies the real error as [object Object].
+  /^Failed to set sink id on remote audio track/,
 ]
 
 const shouldIgnoreException = (value: unknown): boolean =>

src/frontend/src/features/rooms/components/Conference.tsx

@@ -45,6 +45,7 @@ import { userStore } from '@/stores/user'
 import { WatchMediaDeviceErrors } from './WatchMediaDeviceErrors'
 import { MeetDevtools } from '@/features/devtools'
 import { VOICE_AUDIO_CONSTRAINTS } from '@/features/rooms/livekit/utils/constants'
+import { resolveAudioOutputDeviceId } from '@/features/rooms/utils/resolveAudioOutputDeviceId'
 
 export const Conference = ({
   roomId,
@@ -120,7 +121,7 @@ export const Conference = ({
         ...VOICE_AUDIO_CONSTRAINTS,
       },
       audioOutput: {
-        deviceId: userConfig.audioOutputDeviceId ?? undefined,
+        deviceId: resolveAudioOutputDeviceId(userConfig.audioOutputDeviceId),
       },
     }
     // do not rely on the userConfig object directly as its reference may change on every render

src/frontend/src/features/rooms/livekit/components/controls/Device/OutputSoundTester.tsx

@@ -4,6 +4,7 @@ import { RiVolumeUpLine } from '@remixicon/react'
 import { styled } from '@/styled-system/jsx'
 import { Button } from '@/primitives'
 import { canTestAudioOutput } from '@/features/rooms/utils/canTestAudioOutput'
+import { resolveAudioOutputDeviceId } from '@/features/rooms/utils/resolveAudioOutputDeviceId'
 
 // Speaker test in the audiooutput menu footer (Meet-style UX). Outputs have
 // no track: the test plays a bundled file through the selected sink, and
@@ -66,6 +67,8 @@ export const OutputSoundTester = ({
   const audioRef = useRef<HTMLAudioElement>(null)
   const [isPlaying, setIsPlaying] = useState(false)
 
+  const outputId = resolveAudioOutputDeviceId(sinkId)
+
   const latestSinkIdRef = useRef(sinkId)
   latestSinkIdRef.current = sinkId
 
@@ -79,15 +82,15 @@ export const OutputSoundTester = ({
   }, [])
 
   useEffect(() => {
-    if (!sinkId || !canTestAudioOutput()) return
-    audioRef.current?.setSinkId(sinkId).catch(() => {
+    if (!outputId || !canTestAudioOutput()) return
+    audioRef.current?.setSinkId(outputId).catch(() => {
       // Re-routing failed (stale or unplugged device): stop the test rather
       // than keep playing through the previous sink.
       if (latestSinkIdRef.current === sinkId) {
         stopPlayback()
       }
     })
-  }, [sinkId, stopPlayback])
+  }, [outputId, sinkId, stopPlayback])
 
   useEffect(() => {
     const audio = audioRef.current
@@ -108,8 +111,8 @@ export const OutputSoundTester = ({
             // Confirm routing before starting: a no-op when already routed,
             // but rejects on a stale device id, so the test never plays
             // through the wrong sink.
-            if (sinkId && canTestAudioOutput()) {
-              await audio.setSinkId(sinkId)
+            if (outputId && canTestAudioOutput()) {
+              await audio.setSinkId(outputId)
             }
             await audio.play()
             setIsPlaying(true)

src/frontend/src/features/rooms/utils/resolveAudioOutputDeviceId.ts

@@ -0,0 +1,11 @@
+/**
+ * `'default'` means "use the system output". Firefox has no device with that
+ * id, so setSinkId('default') rejects. Omit it and the browser keeps the OS
+ * default, which is the same result.
+ */
+export const resolveAudioOutputDeviceId = (
+  deviceId: string | undefined
+): string | undefined => {
+  if (!deviceId || deviceId === 'default') return undefined
+  return deviceId
+}