VBLOCKS-2214 | Remove unnecessary enumerateDevices calls

CHANGELOG.md

@@ -6,6 +6,7 @@
 Changes
 -------
 
+- Fixed an [issue](https://github.com/twilio/twilio-voice.js/issues/197) where audio in the Chrome browser is choppy when another application is also using the audio devices.
 - Added missing documentation for the following events:
   - `call.on('ringing', handler)`
   - `call.on('warning', handler)`

lib/twilio/audiohelper.ts

@@ -8,7 +8,6 @@ import { InvalidArgumentError, NotSupportedError } from './errors';
 import Log from './log';
 import OutputDeviceCollection from './outputdevicecollection';
 import MediaDeviceInfoShim from './shims/mediadeviceinfo';
-import getMediaDevicesInstance from './shims/mediadevices';
 import { average, difference, isFirefox } from './util';
 
 /**
@@ -176,11 +175,11 @@ class AudioHelper extends EventEmitter {
     }, options);
 
     this._getUserMedia = getUserMedia;
-    this._mediaDevices = options.mediaDevices || getMediaDevicesInstance() as AudioHelper.MediaDevicesLike;
+    this._mediaDevices = options.mediaDevices || navigator.mediaDevices;
     this._onActiveInputChanged = onActiveInputChanged;
     this._enumerateDevices = typeof options.enumerateDevices === 'function'
       ? options.enumerateDevices
-      : this._mediaDevices && this._mediaDevices.enumerateDevices;
+      : this._mediaDevices && this._mediaDevices.enumerateDevices.bind(this._mediaDevices);
 
     const isAudioContextSupported: boolean = !!(options.AudioContext || options.audioContext);
     const isEnumerationSupported: boolean = !!this._enumerateDevices;
@@ -308,10 +307,41 @@ class AudioHelper extends EventEmitter {
 
     if (this._mediaDevices.removeEventListener) {
       this._mediaDevices.removeEventListener('devicechange', this._updateAvailableDevices);
-      this._mediaDevices.removeEventListener('deviceinfochange', this._updateAvailableDevices);
     }
   }
 
+  /**
+   * Update the available input and output devices
+   * @private
+   */
+  _updateAvailableDevices = (): Promise<void> => {
+    if (!this._mediaDevices || !this._enumerateDevices) {
+      return Promise.reject('Enumeration not supported');
+    }
+
+    return this._enumerateDevices().then((devices: MediaDeviceInfo[]) => {
+      this._updateDevices(devices.filter((d: MediaDeviceInfo) => d.kind === 'audiooutput'),
+        this.availableOutputDevices,
+        this._removeLostOutput);
+
+      this._updateDevices(devices.filter((d: MediaDeviceInfo) => d.kind === 'audioinput'),
+        this.availableInputDevices,
+        this._removeLostInput);
+
+      const defaultDevice = this.availableOutputDevices.get('default')
+        || Array.from(this.availableOutputDevices.values())[0];
+
+      [this.speakerDevices, this.ringtoneDevices].forEach(outputDevices => {
+        if (!outputDevices.get().size && this.availableOutputDevices.size && this.isOutputSelectionSupported) {
+          outputDevices.set(defaultDevice.deviceId)
+            .catch((reason) => {
+              this._log.warn(`Unable to set audio output devices. ${reason}`);
+            });
+        }
+      });
+    });
+  }
+
   /**
    * Enable or disable the disconnect sound.
    * @param doEnable Passing `true` will enable the sound and `false` will disable the sound.
@@ -426,7 +456,6 @@ class AudioHelper extends EventEmitter {
 
     if (this._mediaDevices.addEventListener) {
       this._mediaDevices.addEventListener('devicechange', this._updateAvailableDevices);
-      this._mediaDevices.addEventListener('deviceinfochange', this._updateAvailableDevices);
     }
 
     this._updateAvailableDevices().then(() => {
@@ -542,37 +571,6 @@ class AudioHelper extends EventEmitter {
     });
   }
 
-  /**
-   * Update the available input and output devices
-   */
-  private _updateAvailableDevices = (): Promise<void> => {
-    if (!this._mediaDevices || !this._enumerateDevices) {
-      return Promise.reject('Enumeration not supported');
-    }
-
-    return this._enumerateDevices().then((devices: MediaDeviceInfo[]) => {
-      this._updateDevices(devices.filter((d: MediaDeviceInfo) => d.kind === 'audiooutput'),
-        this.availableOutputDevices,
-        this._removeLostOutput);
-
-      this._updateDevices(devices.filter((d: MediaDeviceInfo) => d.kind === 'audioinput'),
-        this.availableInputDevices,
-        this._removeLostInput);
-
-      const defaultDevice = this.availableOutputDevices.get('default')
-        || Array.from(this.availableOutputDevices.values())[0];
-
-      [this.speakerDevices, this.ringtoneDevices].forEach(outputDevices => {
-        if (!outputDevices.get().size && this.availableOutputDevices.size && this.isOutputSelectionSupported) {
-          outputDevices.set(defaultDevice.deviceId)
-            .catch((reason) => {
-              this._log.warn(`Unable to set audio output devices. ${reason}`);
-            });
-        }
-      });
-    });
-  }
-
   /**
    * Update a set of devices.
    * @param updatedDevices - An updated list of available Devices
@@ -680,7 +678,6 @@ namespace AudioHelper {
    * that were lost as a result of this deviceChange event.
    * @example `device.audio.on('deviceChange', lostActiveDevices => { })`
    * @event
-   * @private
    */
   declare function deviceChangeEvent(lostActiveDevices: MediaDeviceInfo[]): void;
 

lib/twilio/call.ts

@@ -669,6 +669,10 @@ class Call extends EventEmitter {
         data: { audioConstraints },
       }, this);
 
+      if (this._options.onGetUserMedia) {
+        this._options.onGetUserMedia();
+      }
+
       connect();
     }, (error: Record<string, any>) => {
       let twilioError;
@@ -1914,6 +1918,11 @@ namespace Call {
      */
     offerSdp?: string | null;
 
+    /**
+     * Called after a successful getUserMedia call
+     */
+    onGetUserMedia?: () => void;
+
     /**
      * Whether this is a preflight call or not
      */

lib/twilio/device.ts

@@ -969,6 +969,7 @@ class Device extends EventEmitter {
       getInputStream: (): MediaStream | null => this._options.fileInputStream || this._callInputStream,
       getSinkIds: (): string[] => this._callSinkIds,
       maxAverageBitrate: this._options.maxAverageBitrate,
+      onGetUserMedia: () => this._onGetUserMedia(),
       preflight: this._options.preflight,
       rtcConstraints: this._options.rtcConstraints,
       shouldPlayDisconnect: () => this._audio?.disconnect(),
@@ -1088,10 +1089,20 @@ class Device extends EventEmitter {
     }
   }
 
+  /**
+   * Called after a successful getUserMedia call
+   */
+  private _onGetUserMedia = () => {
+    this._audio?._updateAvailableDevices().catch(error => {
+      // Ignore error, we don't want to break the call flow
+      this._log.warn('Unable to updateAvailableDevices after gUM call', error);
+    });
+  }
+
   /**
    * Called when a 'close' event is received from the signaling stream.
    */
-   private _onSignalingClose = () => {
+  private _onSignalingClose = () => {
     this._stream = null;
     this._streamConnectedPromise = null;
   }