Merge pull request #645 from tsareg/master

Added ability to change output audio device through settings

conference.js

@@ -1133,6 +1133,17 @@ export default {
             }
         );
 
+        APP.UI.addListener(
+            UIEvents.AUDIO_OUTPUT_DEVICE_CHANGED,
+            (audioOutputDeviceId) => {
+                APP.settings.setAudioOutputDeviceId(audioOutputDeviceId)
+                    .then(() => console.log('changed audio output device'))
+                    .catch((err) => {
+                        console.error('failed to set audio output device', 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">

lang/main.json

@@ -89,6 +89,7 @@
         "startVideoMuted": "Start without video",
         "selectCamera": "Select camera",
         "selectMic": "Select microphone",
+        "selectAudioOutput": "Select audio output",
         "followMe": "Enable follow me"
     },
     "videothumbnail":

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -1,4 +1,4 @@
-/* global APP, $ */
+/* global APP, $, JitsiMeetJS */
 import UIUtil from "../../util/UIUtil";
 import UIEvents from "../../../../service/UI/UIEvents";
 import languages from "../../../../service/translation/languages";
@@ -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,41 @@ 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'),
+            $selectAudioOutputParent = $selectAudioOutput.parent();
+
         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 &&
+            JitsiMeetJS.isDeviceChangeAvailable('output')) {
+            $selectAudioOutput.html(
+                generateDevicesOptions(audioOutput,
+                    Settings.getAudioOutputDeviceId()));
+
+            $selectAudioOutputParent.show();
+        } else {
+            $selectAudioOutputParent.hide();
+        }
+
+        $devicesOptions.show();
     }
 };

modules/settings/Settings.js

@@ -1,3 +1,5 @@
+/* global JitsiMeetJS */
+
 import UIUtil from '../UI/util/UIUtil';
 
 let email = '';
@@ -40,6 +42,17 @@ if (supportsLocalStorage()) {
     welcomePageDisabled = JSON.parse(
         window.localStorage.welcomePageDisabled || false
     );
+
+    var audioOutputDeviceId = window.localStorage.audioOutputDeviceId;
+
+    if (typeof audioOutputDeviceId !== 'undefined' &&
+        audioOutputDeviceId !== JitsiMeetJS.getAudioOutputDevice()) {
+        JitsiMeetJS.setAudioOutputDevice(
+            window.localStorage.audioOutputDeviceId).catch((ex) => {
+                console.error('failed to set audio output device from local ' +
+                    'storage', ex);
+            });
+    }
 } else {
     console.log("local storage is not supported");
 }
@@ -142,6 +155,25 @@ 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 JitsiMeetJS.getAudioOutputDevice();
+    },
+    /**
+     * 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
+     * @returns {Promise}
+     */
+    setAudioOutputDeviceId: function (newId = '') {
+        return JitsiMeetJS.setAudioOutputDevice(newId)
+            .then(() => 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.