ref(settings): listen to TRACK_ADDED to set the input devices id (#14093)

This fixes the issue when starting the conference with video muted, after unmuting it the cameraDeviceId would stay undefined.

conference.js

@@ -2042,10 +2042,6 @@ export default {
 
                     return this.useVideoStream(stream);
                 })
-                .then(() => {
-                    logger.info(`Switched local video device to ${cameraDeviceId}.`);
-                    this._updateVideoDeviceId();
-                })
                 .catch(error => {
                     logger.error(`Failed to switch to selected camera:${cameraDeviceId}, error:${error}`);
 
@@ -2100,8 +2096,6 @@ export default {
                         // above mentioned chrome bug.
                         localAudio._realDeviceId = localAudio.deviceId = 'default';
                     }
-                    logger.info(`switched local audio input device to: ${selectedDeviceId}`);
-                    this._updateAudioDeviceId();
                 })
                 .catch(err => {
                     logger.error(`Failed to switch to selected audio input device ${selectedDeviceId}, error=${err}`);
@@ -2186,13 +2180,6 @@ export default {
 
             return dispatch(getAvailableDevices())
                 .then(devices => {
-                    // Ugly way to synchronize real device IDs with local
-                    // storage and settings menu. This is a workaround until
-                    // getConstraints() method will be implemented in browsers.
-                    this._updateAudioDeviceId();
-
-                    this._updateVideoDeviceId();
-
                     APP.UI.onAvailableDevicesChanged(devices);
                 });
         }
@@ -2200,36 +2187,6 @@ export default {
         return Promise.resolve();
     },
 
-    /**
-     * Updates the settings for the currently used video device, extracting
-     * the device id from the used track.
-     * @private
-     */
-    _updateVideoDeviceId() {
-        const localVideo = getLocalJitsiVideoTrack(APP.store.getState());
-
-        if (localVideo && localVideo.videoType === 'camera') {
-            APP.store.dispatch(updateSettings({
-                cameraDeviceId: localVideo.getDeviceId()
-            }));
-        }
-    },
-
-    /**
-     * Updates the settings for the currently used audio device, extracting
-     * the device id from the used track.
-     * @private
-     */
-    _updateAudioDeviceId() {
-        const localAudio = getLocalJitsiAudioTrack(APP.store.getState());
-
-        if (localAudio) {
-            APP.store.dispatch(updateSettings({
-                micDeviceId: localAudio.getDeviceId()
-            }));
-        }
-    },
-
     /**
      * Event listener for JitsiMediaDevicesEvents.DEVICE_LIST_CHANGED to
      * handle change of available media devices.
@@ -2378,14 +2335,10 @@ export default {
                         this.useAudioStream(track)
                             .then(() => {
                                 hasDefaultMicChanged && (track._realDeviceId = track.deviceId = 'default');
-                                this._updateAudioDeviceId();
                             }));
                 } else {
                     promises.push(
-                        this.useVideoStream(track)
-                            .then(() => {
-                                this._updateVideoDeviceId();
-                            }));
+                        this.useVideoStream(track));
                 }
             }
         }

react/features/base/settings/middleware.web.ts

@@ -3,9 +3,14 @@ import { PREJOIN_INITIALIZED } from '../../prejoin/actionTypes';
 import { setPrejoinPageVisibility } from '../../prejoin/actions';
 import { APP_WILL_MOUNT } from '../app/actionTypes';
 import { getJwtName } from '../jwt/functions';
+import { MEDIA_TYPE } from '../media/constants';
 import MiddlewareRegistry from '../redux/MiddlewareRegistry';
+import { TRACK_ADDED } from '../tracks/actionTypes';
+import { ITrack } from '../tracks/types';
 
 import { updateSettings } from './actions';
+import logger from './logger';
+
 
 import './middleware.any';
 
@@ -27,6 +32,9 @@ MiddlewareRegistry.register(store => next => action => {
     case PREJOIN_INITIALIZED:
         _maybeUpdateDisplayName(store);
         break;
+    case TRACK_ADDED:
+        _maybeUpdateDeviceId(store, action.track);
+        break;
     }
 
     return result;
@@ -68,3 +76,32 @@ function _maybeUpdateDisplayName({ dispatch, getState }: IStore) {
         }
     }
 }
+
+/**
+ * Maybe update the camera or mic device id when local track is added or updated.
+ *
+ * @param {Store} store - The redux store.
+ * @param {ITrack} track - The potential local track.
+ * @private
+ * @returns {void}
+ */
+function _maybeUpdateDeviceId({ dispatch, getState }: IStore, track: ITrack) {
+    if (track.local) {
+        const { cameraDeviceId, micDeviceId } = getState()['features/base/settings'];
+        const deviceId = track.jitsiTrack.getDeviceId();
+
+        if (track.mediaType === MEDIA_TYPE.VIDEO && track.videoType === 'camera' && cameraDeviceId !== deviceId) {
+            console.log('NEW CAM', deviceId);
+            dispatch(updateSettings({
+                cameraDeviceId: track.jitsiTrack.getDeviceId()
+            }));
+            logger.info(`switched local video device to: ${deviceId}`);
+        } else if (track.mediaType === MEDIA_TYPE.AUDIO && micDeviceId !== deviceId) {
+            console.log('NEW MIC', deviceId);
+            dispatch(updateSettings({
+                micDeviceId: track.jitsiTrack.getDeviceId()
+            }));
+            logger.info(`switched local audio input device to: ${deviceId}`);
+        }
+    }
+}