fix(api-devices): Initial device function calls

react/features/base/connection/actions.web.js

@@ -7,6 +7,8 @@ declare var config: Object;
 
 const logger = require('jitsi-meet-logger').getLogger(__filename);
 
+import { configureInitialDevices } from '../devices';
+
 export {
     connectionEstablished,
     connectionFailed,
@@ -25,12 +27,13 @@ export function connect() {
 
         // XXX For web based version we use conference initialization logic
         // from the old app (at the moment of writing).
-        return APP.conference.init({
-            roomName: room
-        }).catch(error => {
-            APP.API.notifyConferenceLeft(APP.conference.roomName);
-            logger.error(error);
-        });
+        return dispatch(configureInitialDevices()).then(
+            () => APP.conference.init({
+                roomName: room
+            }).catch(error => {
+                APP.API.notifyConferenceLeft(APP.conference.roomName);
+                logger.error(error);
+            }));
     };
 }
 

react/features/base/devices/actions.js

@@ -1,10 +1,12 @@
 import JitsiMeetJS from '../lib-jitsi-meet';
+import { updateSettings } from '../settings';
 
 import {
     SET_AUDIO_INPUT_DEVICE,
     SET_VIDEO_INPUT_DEVICE,
     UPDATE_DEVICE_LIST
 } from './actionTypes';
+import { getDevicesFromURL } from './functions';
 
 /**
  * Queries for connected A/V input and output devices and updates the redux
@@ -77,3 +79,22 @@ export function updateDeviceList(devices) {
         devices
     };
 }
+
+/**
+ * Configures the initial A/V devices before the conference has started.
+ *
+ * @returns {Function}
+ */
+export function configureInitialDevices() {
+    return (dispatch, getState) => new Promise(resolve => {
+        const devices = getDevicesFromURL(getState());
+
+        if (devices) {
+            dispatch(updateSettings({
+                ...devices
+            }));
+            resolve();
+        }
+    });
+}
+

react/features/base/devices/functions.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { parseURLParams } from '../config';
 import JitsiMeetJS from '../lib-jitsi-meet';
 import { updateSettings } from '../settings';
 
@@ -30,3 +31,47 @@ export function setAudioOutputDeviceId(
                 audioOutputDeviceId: newId
             })));
 }
+
+/**
+ * Converts an array of media devices into an object organized by device kind.
+ *
+ * @param {Array<MediaDeviceInfo>} devices - Available media devices.
+ * @private
+ * @returns {Object} An object with the media devices split by type. The keys
+ * are device type and the values are arrays with devices matching the device
+ * type.
+ */
+export function groupDevicesByKind(devices: Object[]): Object {
+    return {
+        audioInput: devices.filter(device => device.kind === 'audioinput'),
+        audioOutput: devices.filter(device => device.kind === 'audiooutput'),
+        videoInput: devices.filter(device => device.kind === 'videoinput')
+    };
+}
+
+/**
+ * Returns the devices set in the URL.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {Object|undefined}
+ */
+export function getDevicesFromURL(state: Object) {
+    const urlParams
+        = parseURLParams(state['features/base/connection'].locationURL);
+
+    const audioOutputDeviceId = urlParams['devices.audioOutput'];
+    const cameraDeviceId = urlParams['devices.videoInput'];
+    const micDeviceId = urlParams['devices.audioInput'];
+
+    if (!audioOutputDeviceId && !cameraDeviceId && !micDeviceId) {
+        return undefined;
+    }
+
+    const devices = {};
+
+    audioOutputDeviceId && (devices.audioOutputDeviceId = audioOutputDeviceId);
+    cameraDeviceId && (devices.cameraDeviceId = cameraDeviceId);
+    micDeviceId && (devices.micDeviceId = micDeviceId);
+
+    return devices;
+}

react/features/base/devices/reducer.js

@@ -3,6 +3,7 @@ import {
     SET_VIDEO_INPUT_DEVICE,
     UPDATE_DEVICE_LIST
 } from './actionTypes';
+import { groupDevicesByKind } from './functions';
 
 import { ReducerRegistry } from '../redux';
 
@@ -27,7 +28,7 @@ ReducerRegistry.register(
     (state = DEFAULT_STATE, action) => {
         switch (action.type) {
         case UPDATE_DEVICE_LIST: {
-            const deviceList = _groupDevicesByKind(action.devices);
+            const deviceList = groupDevicesByKind(action.devices);
 
             return {
                 ...deviceList
@@ -44,19 +45,3 @@ ReducerRegistry.register(
         }
     });
 
-/**
- * Converts an array of media devices into an object organized by device kind.
- *
- * @param {Array<MediaDeviceInfo>} devices - Available media devices.
- * @private
- * @returns {Object} An object with the media devices split by type. The keys
- * are device type and the values are arrays with devices matching the device
- * type.
- */
-function _groupDevicesByKind(devices) {
-    return {
-        audioInput: devices.filter(device => device.kind === 'audioinput'),
-        audioOutput: devices.filter(device => device.kind === 'audiooutput'),
-        videoInput: devices.filter(device => device.kind === 'videoinput')
-    };
-}

react/features/base/util/uri.js

@@ -469,16 +469,16 @@ export function urlObjectToString(o: Object): ?string {
 
     let { hash } = url;
 
-    for (const configName of [ 'config', 'interfaceConfig' ]) {
+    for (const urlPrefix of [ 'config', 'interfaceConfig', 'devices' ]) {
         const urlParamsArray
             = _objectToURLParamsArray(
-                o[`${configName}Overwrite`]
-                    || o[configName]
-                    || o[`${configName}Override`]);
+                o[`${urlPrefix}Overwrite`]
+                    || o[urlPrefix]
+                    || o[`${urlPrefix}Override`]);
 
         if (urlParamsArray.length) {
             let urlParamsString
-                = `${configName}.${urlParamsArray.join(`&${configName}.`)}`;
+                = `${urlPrefix}.${urlParamsArray.join(`&${urlPrefix}.`)}`;
 
             if (hash.length) {
                 urlParamsString = `&${urlParamsString}`;