Make sure to apply audio output selection when participant is first c…

…reated (#968)

* make sure to apply audio output selection when participant is first created

* Create slow-chicken-agree.md

* catch audio output setting in constructor

.changeset/slow-chicken-agree.md

@@ -0,0 +1,5 @@
+---
+"livekit-client": patch
+---
+
+Make sure to apply audio output selection when participant is first created

example/sample.ts

@@ -77,13 +77,17 @@ const appActions = {
     const cryptoKey = (<HTMLSelectElement>$('crypto-key')).value;
     const autoSubscribe = (<HTMLInputElement>$('auto-subscribe')).checked;
     const e2eeEnabled = (<HTMLInputElement>$('e2ee')).checked;
+    const audioOutputId = (<HTMLSelectElement>$('audio-output')).value;
 
     setLogLevel(LogLevel.debug);
     updateSearchParams(url, token, cryptoKey);
 
     const roomOpts: RoomOptions = {
       adaptiveStream,
       dynacast,
+      audioOutput: {
+        deviceId: audioOutputId,
+      },
       publishDefaults: {
         simulcast,
         videoSimulcastLayers: [VideoPresets.h90, VideoPresets.h216],

src/room/Room.ts

@@ -195,7 +195,10 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
       );
     }
     if (this.options.audioOutput?.deviceId) {
-      this.switchActiveDevice('audiooutput', unwrapConstraint(this.options.audioOutput.deviceId));
+      this.switchActiveDevice(
+        'audiooutput',
+        unwrapConstraint(this.options.audioOutput.deviceId),
+      ).catch((e) => log.warn(`Could not set audio output: ${e.message}`));
     }
 
     if (this.options.e2ee) {
@@ -1504,6 +1507,11 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
     if (this.options.expWebAudioMix) {
       participant.setAudioContext(this.audioContext);
     }
+    if (this.options.audioOutput?.deviceId) {
+      participant
+        .setAudioOutput(this.options.audioOutput)
+        .catch((e) => log.warn(`Could not set audio output: ${e.message}`));
+    }
     return participant;
   }