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 Chrome browser is choppy when another application is 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/device.ts

@@ -939,7 +939,15 @@ class Device extends EventEmitter {
 
  const config: Call.Config = {
  audioHelper: this._audio,
- getUserMedia: this._options.getUserMedia || getUserMedia,
+ getUserMedia: (...args) =>
+ (this._options.getUserMedia || getUserMedia)(...args)
+ .then((gumResponse: any) => {
+ 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);
+ });
+ return Promise.resolve(gumResponse);
+ }),
  isUnifiedPlanDefault: Device._isUnifiedPlanDefault,
  onIgnore: (): void => {
  this._soundcache.get(Device.SoundName.Incoming).stop();

tests/audiohelper.js

@@ -15,7 +15,11 @@ describe('AudioHelper', () => {
  let oldNavigator;
 
  beforeEach(() => {
- audio = new AudioHelper(noop, noop, getUserMedia, { mediaDevices: {} });
+ audio = new AudioHelper(noop, noop, getUserMedia, { mediaDevices: {
+ enumerateDevices: function(){
+ return Promise.resolve();
+ }
+ } });
  });
 
  before(() => {
@@ -505,45 +509,5 @@ describe('AudioHelper', () => {
  })));
  });
  });
-
- describe('mediaDevices:deviceinfochange', () => {
- let audio;
- const wait = () => new Promise(r => setTimeout(r, 0));
- const noop = () => {};
-
- beforeEach(() => {
- audio = new AudioHelper(noop, noop, getUserMedia, {
- mediaDevices,
- setSinkId: () => {}
- });
- audio.speakerDevices = {};
- audio.ringtoneDevices = {
- get: () => ({ size: 1 }),
- set: sinon.stub(),
- };
- audio.speakerDevices = {
- get: () => ({ size: 0 }),
- set: sinon.stub().rejects('foobar'),
- };
- audio._log.warn = sinon.stub();
- audio.isOutputSelectionSupported = true;
- });
-
- it('should set output devices', () => {
- handlers.get('deviceinfochange')();
- wait().then(() => sinon.assert.called(audio.speakerDevices.set));
- });
-
- it('should catch error when setting output devices', () => {
- handlers.get('deviceinfochange')();
- wait().then(() => sinon.assert.called(audio._log.warn));
- });
-
- it('should not set device when isSupported is false', () => {
- audio.isOutputSelectionSupported = false;
- handlers.get('deviceinfochange')();
- wait().then(() => sinon.assert.notCalled(audio.speakerDevices.set));
- });
- });
  });
 });

tests/index.ts

@@ -102,5 +102,3 @@ require('./unit/error');
 require('./unit/log');
 require('./unit/regions');
 require('./unit/uuid');
-
-require('./shims/mediadevices');