dont call setSinkId with controlled devices

src/livekit/MediaDevicesContext.tsx

@@ -48,6 +48,8 @@ export interface MediaDeviceHandle {
    */
   available: Map<string, DeviceLabel>;
   selectedId: string | undefined;
+  selectedWebDeviceId: string | undefined;
+
   /**
    * An additional device configuration that makes us use only one channel of the
    * output device and a reduced volume.
@@ -202,6 +204,7 @@ function useMediaDeviceHandle(
   return useMemo(
     () => ({
       available,
+      selectedWebDeviceId: selectedId,
       selectedId,
       useAsEarpiece: false,
       selectedGroupId,
@@ -214,6 +217,7 @@ function useMediaDeviceHandle(
 export const deviceStub: MediaDeviceHandle = {
   available: new Map(),
   selectedId: undefined,
+  selectedWebDeviceId: undefined,
   selectedGroupId: undefined,
   select: () => {},
   useAsEarpiece: false,
@@ -379,6 +383,7 @@ function useControlledOutput(): MediaDeviceHandle {
     () => ({
       available: available,
       selectedId,
+      selectedWebDeviceId: undefined,
       selectedGroupId: undefined,
       select: setPreferredId,
       useAsEarpiece: asEarpiece,

src/livekit/useLivekit.ts

@@ -308,7 +308,7 @@ export function useLivekit(
         kind: MediaDeviceKind,
         device: MediaDeviceHandle,
       ): void => {
-        const id = device.selectedId;
+        const id = device.selectedWebDeviceId;
 
         // Detect if we're trying to use chrome's default device, in which case
         // we need to to see if the default device has changed to a different device
@@ -348,14 +348,12 @@ export function useLivekit(
                 logger.error(`Failed to restart audio device track`, e);
               });
           }
-        } else {
+        } else if (id !== undefined && room.getActiveDevice(kind) !== id) {
-          if (id !== undefined && room.getActiveDevice(kind) !== id) {
+          room
-            room
+            .switchActiveDevice(kind, id)
-              .switchActiveDevice(kind, id)
+            .catch((e) =>
-              .catch((e) =>
+              logger.error(`Failed to sync ${kind} device with LiveKit`, e),
-                logger.error(`Failed to sync ${kind} device with LiveKit`, e),
+            );
-              );
-          }
         }
       };
 

src/useAudioContext.tsx

@@ -113,11 +113,11 @@ export function useAudioContext<S extends string>(
     if (audioContext && "setSinkId" in audioContext) {
       // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/setSinkId
       // @ts-expect-error - setSinkId doesn't exist yet in types, maybe because it's not supported everywhere.
-      audioContext.setSinkId(audioOutput.selectedId).catch((ex) => {
+      audioContext.setSinkId(audioOutput.selectedWebDeviceId).catch((ex) => {
         logger.warn("Unable to change sink for audio context", ex);
       });
     }
-  }, [audioContext, audioOutput.selectedId]);
+  }, [audioContext, audioOutput.selectedWebDeviceId]);
   const { pan: earpiecePan, volume: earpieceVolume } = useEarpieceAudioConfig();
 
   // Don't return a function until we're ready.