Very raw version of ability to switch audio output device

conference.js

@@ -1103,6 +1103,43 @@ export default {
             }
         );
 
+        APP.UI.addListener(
+            UIEvents.AUDIO_OUTPUT_DEVICE_CHANGED,
+            (audioOutputDeviceId) => {
+                APP.settings.setAudioOutputDeviceId(audioOutputDeviceId);
+
+                let promises = [],
+                    track;
+
+                for (let key in room.rtc.remoteTracks) {
+                    track = room.rtc.remoteTracks[key].video;
+
+                    if (track && track.containers.length) {
+                        promises.push(
+                            track.changeAudioOutput(audioOutputDeviceId));
+                    }
+
+                    track = room.rtc.remoteTracks[key].audio;
+
+                    if (track && track.containers.length) {
+                        promises.push(
+                            track.changeAudioOutput(audioOutputDeviceId));
+                    }
+                }
+
+                room.rtc.localTracks.forEach((track) => {
+                    if (track.containers.length) {
+                        promises.push(
+                            track.changeAudioOutput(audioOutputDeviceId));
+                    }
+                });
+
+                Promise.all(promises).then(
+                    () => console.log('audio devices switched'),
+                    (err) => console.error(err));
+            }
+        );
+
         APP.UI.addListener(
             UIEvents.TOGGLE_SCREENSHARING, this.toggleScreenSharing.bind(this)
         );

index.html

@@ -258,6 +258,10 @@
                     <span data-i18n="settings.selectMic"></span>
                     <select id="selectMic"></select>
                 </label>
+                <label className="devicesOptionsLabel">
+                    <span data-i18n="settings.selectAudioOutput"></span>
+                    <select id="selectAudioOutput"></select>
+                </label>
             </div>
             <div id="followMeOptions">
                 <label class = "followMeLabel">

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -124,6 +124,13 @@ export default {
                 emitter.emit(UIEvents.AUDIO_DEVICE_CHANGED, micDeviceId);
             }
         });
+        $('#selectAudioOutput').change(function () {
+            let audioOutputDeviceId = $(this).val();
+            if (audioOutputDeviceId !== Settings.getAudioOutputDeviceId()) {
+                emitter.emit(UIEvents.AUDIO_OUTPUT_DEVICE_CHANGED,
+                    audioOutputDeviceId);
+            }
+        });
     },
 
     /**
@@ -186,21 +193,40 @@ export default {
      * @param {{ deviceId, label, kind }[]} devices list of available devices
      */
     changeDevicesList (devices) {
+        let $devicesOptions =  $('#devicesOptions');
+
         if (!devices.length) {
-            $('#devicesOptions').hide();
+            $devicesOptions.hide();
             return;
         }
 
+        let $selectCamera= $('#selectCamera'),
+            $selectMic = $('#selectMic'),
+            $selectAudioOutput = $('#selectAudioOutput');
+
         let audio = devices.filter(device => device.kind === 'audioinput');
         let video = devices.filter(device => device.kind === 'videoinput');
+        let audioOutput = devices
+            .filter(device => device.kind === 'audiooutput');
 
-        $('#selectCamera').html(
+        $selectCamera.html(
             generateDevicesOptions(video, Settings.getCameraDeviceId())
         );
-        $('#selectMic').html(
+        $selectMic.html(
             generateDevicesOptions(audio, Settings.getMicDeviceId())
         );
 
-        $('#devicesOptions').show();
+        if (audioOutput.length) {
+            $selectAudioOutput.html(
+                generateDevicesOptions(audioOutput,
+                    Settings.getAudioOutputDeviceId())
+            ).show();
+        } else {
+            // if we have no audiooutput devices, that means current browser
+            // doesn't support it, so don't show the select box at all
+            $selectAudioOutput.hide();
+        }
+
+        $devicesOptions.show();
     }
 };

modules/settings/Settings.js

@@ -5,6 +5,7 @@ let displayName = '';
 let language = null;
 let cameraDeviceId = '';
 let micDeviceId = '';
+let audioOutputDeviceId = '';
 let welcomePageDisabled = false;
 
 function supportsLocalStorage() {
@@ -123,6 +124,24 @@ export default {
         window.localStorage.micDeviceId = newId;
     },
 
+    /**
+     * Get device id of the audio output device which is currently in use.
+     * Empty string stands for default device.
+     * @returns {String}
+     */
+    getAudioOutputDeviceId: function () {
+        return audioOutputDeviceId;
+    },
+    /**
+     * Set device id of the audio output device which is currently in use.
+     * Empty string stands for default device.
+     * @param {string} newId new audio output device id
+     */
+    setAudioOutputDeviceId: function (newId = '') {
+        audioOutputDeviceId = newId;
+        window.localStorage.audioOutputDeviceId = newId;
+    },
+
     /**
      * Check if welcome page is enabled or not.
      * @returns {boolean}

service/UI/UIEvents.js

@@ -67,6 +67,7 @@ export default {
     SUBJECT_CHANGED: "UI.subject_changed",
     VIDEO_DEVICE_CHANGED: "UI.video_device_changed",
     AUDIO_DEVICE_CHANGED: "UI.audio_device_changed",
+    AUDIO_OUTPUT_DEVICE_CHANGED: "UI.audio_output_device_changed",
     /**
      * Notifies interested listeners that the follow-me feature is enabled or
      * disabled.