fix(filmstrip-only): DeviceSelectionPopup

doc/api.md

@@ -114,9 +114,24 @@ api.getAvailableDevices().then(function(devices) {
 ```javascript
 api.getCurrentDevices().then(function(devices) {
     // devices = {
-    //     'audioInput': 'deviceLabel',
-    //     'audioOutput': 'deviceLabel',
-    //     'videoInput': 'deviceLabel'
+    //     'audioInput': {
+    //         deviceId: "ID"
+    //         groupId: "grpID"
+    //         kind: "videoInput"
+    //         label: "Label"
+    //     },
+    //     'audioOutput': {
+    //         deviceId: "ID"
+    //         groupId: "grpID"
+    //         kind: "videoInput"
+    //         label: "Label"
+    //     },
+    //     'videoInput': {
+    //         deviceId: "ID"
+    //         groupId: "grpID"
+    //         kind: "videoInput"
+    //         label: "Label"
+    //     }
     // }
     ...
 });
@@ -143,20 +158,20 @@ api.isMultipleAudioInputSupported().then(function(isMultipleAudioInputSupported)
     ...
 });
 ```
-* **setAudioInputDevice** - Sets the audio input device to the one with the label that is passed.
+* **setAudioInputDevice** - Sets the audio input device to the one with the label or id that is passed.
 
 ```javascript
-api.setAudioInputDevice(deviceLabel);
+api.setAudioInputDevice(deviceLabel, deviceId);
 ```
-* **setAudioOutputDevice** - Sets the audio output device to the one with the label that is passed.
+* **setAudioOutputDevice** - Sets the audio output device to the one with the label or id that is passed.
 
 ```javascript
-api.setAudioOutputDevice(deviceLabel);
+api.setAudioOutputDevice(deviceLabel, deviceId);
 ```
-* **setVideoInputDevice** - Sets the video input device to the one with the label that is passed.
+* **setVideoInputDevice** - Sets the video input device to the one with the label or id that is passed.
 
 ```javascript
-api.setVideoInputDevice(deviceLabel);
+api.setVideoInputDevice(deviceLabel, deviceId);
 ```
 
 You can control the embedded Jitsi Meet conference using the `JitsiMeetExternalAPI` object by using `executeCommand`:

modules/API/external/functions.js

@@ -101,32 +101,36 @@ export function isMultipleAudioInputSupported(transport: Object) {
 }
 
 /**
- * Sets the audio input device to the one with the id that is passed.
+ * Sets the audio input device to the one with the label or id that is passed.
  *
  * @param {Transport} transport - The @code{Transport} instance responsible for
  * the external communication.
  * @param {string} label - The label of the new device.
+ * @param {string} id - The id of the new device.
  * @returns {Promise}
  */
-export function setAudioInputDevice(transport: Object, label: string) {
+export function setAudioInputDevice(transport: Object, label: string, id: string) {
     return _setDevice(transport, {
-        label,
-        kind: 'audioinput'
+        id,
+        kind: 'audioinput',
+        label
     });
 }
 
 /**
- * Sets the audio output device to the one with the id that is passed.
+ * Sets the audio output device to the one with the label or id that is passed.
  *
  * @param {Transport} transport - The @code{Transport} instance responsible for
  * the external communication.
  * @param {string} label - The label of the new device.
+ * @param {string} id - The id of the new device.
  * @returns {Promise}
  */
-export function setAudioOutputDevice(transport: Object, label: string) {
+export function setAudioOutputDevice(transport: Object, label: string, id: string) {
     return _setDevice(transport, {
-        label,
-        kind: 'audiooutput'
+        id,
+        kind: 'audiooutput',
+        label
     });
 }
 
@@ -147,16 +151,18 @@ function _setDevice(transport: Object, device) {
 }
 
 /**
- * Sets the video input device to the one with the id that is passed.
+ * Sets the video input device to the one with the label or id that is passed.
  *
  * @param {Transport} transport - The @code{Transport} instance responsible for
  * the external communication.
  * @param {string} label - The label of the new device.
+ * @param {string} id - The id of the new device.
  * @returns {Promise}
  */
-export function setVideoInputDevice(transport: Object, label: string) {
+export function setVideoInputDevice(transport: Object, label: string, id: string) {
     return _setDevice(transport, {
-        label,
-        kind: 'videoinput'
+        id,
+        kind: 'videoinput',
+        label
     });
 }

react/features/device-selection/functions.js

@@ -84,16 +84,18 @@ export function processRequest( // eslint-disable-line max-params
                     const audioOutputDeviceId = getAudioOutputDeviceId();
                     const { cameraDeviceId, micDeviceId } = settings;
 
-                    devices.forEach(({ deviceId, label }) => {
+                    devices.forEach(device => {
+                        const { deviceId } = device;
+
                         switch (deviceId) {
                         case micDeviceId:
-                            audioInput = label;
+                            audioInput = device;
                             break;
                         case audioOutputDeviceId:
-                            audioOutput = label;
+                            audioOutput = device;
                             break;
                         case cameraDeviceId:
-                            videoInput = label;
+                            videoInput = device;
                             break;
                         }
                     });
@@ -145,7 +147,8 @@ export function processRequest( // eslint-disable-line max-params
                 return true;
             }
 
-            const deviceId = getDeviceIdByLabel(state, device.label);
+            const { label, id } = device;
+            const deviceId = label ? getDeviceIdByLabel(state, device.label) : id;
 
             if (deviceId) {
                 switch (device.kind) {

react/features/settings/components/web/DeviceSelectionPopup.js

@@ -18,7 +18,7 @@ import {
     setAudioInputDevice,
     setAudioOutputDevice,
     setVideoInputDevice
-} from '../../../../../modules/API/external';
+} from '../../../../../modules/API/external/functions';
 
 import { parseURLParams } from '../../../base/config';
 import { DialogWithTabs } from '../../../base/dialog';
@@ -118,7 +118,19 @@ export default class DeviceSelectionPopup {
      * @returns {Promise}
      */
     _getCurrentDevices() {
-        return getCurrentDevices(this._transport);
+        return getCurrentDevices(this._transport).then(currentDevices => {
+            const {
+                audioInput = {},
+                audioOutput = {},
+                videoInput = {}
+            } = currentDevices;
+
+            return {
+                audioInput: audioInput.deviceId,
+                audioOutput: audioOutput.deviceId,
+                videoInput: videoInput.deviceId
+            };
+        });
     }
 
     /**
@@ -252,7 +264,7 @@ export default class DeviceSelectionPopup {
      * @returns {Promise}
      */
     _setAudioInputDevice(id) {
-        return setAudioInputDevice(this._transport, id);
+        return setAudioInputDevice(this._transport, undefined, id);
     }
 
     /**
@@ -262,7 +274,7 @@ export default class DeviceSelectionPopup {
      * @returns {Promise}
      */
     _setAudioOutputDevice(id) {
-        return setAudioOutputDevice(this._transport, id);
+        return setAudioOutputDevice(this._transport, undefined, id);
     }
 
     /**
@@ -272,7 +284,7 @@ export default class DeviceSelectionPopup {
      * @returns {Promise}
      */
     _setVideoInputDevice(id) {
-        return setVideoInputDevice(this._transport, id);
+        return setVideoInputDevice(this._transport, undefined, id);
     }
 
     /**