[VBLOCKS-3256] Feat: listen for navigator permissions changes

CHANGELOG.md

@@ -3,8 +3,16 @@
 2.11.3 (In Progress)
 ======================
 
+Bug Fixes
+---------
+
 - Fixed an issue where `PreflightTest` throws an error when `RTCIceCandidateStatsReport` is not available. Thanks @phi-line for your [contribution](https://github.com/twilio/twilio-voice.js/pull/280).
 
+Improvements
+------------
+
+- The SDK now updates its internal device list when the microphone permission changes.
+
 2.11.2 (June 26, 2024)
 ======================
 

lib/twilio/audiohelper.ts

@@ -163,11 +163,21 @@ class AudioHelper extends EventEmitter {
    */
   private _mediaDevices: AudioHelper.MediaDevicesLike | null;
 
+  /**
+   * The microphone permission status
+   */
+  private _microphonePermissionStatus: PermissionStatus | null;
+
   /**
    * Called with the new input stream when the active input is changed.
    */
   private _onActiveInputChanged: (stream: MediaStream | null) => Promise<void>;
 
+  /**
+   * Handler for microphone permission status change
+   */
+  private _onMicrophonePermissionStatusChanged: () => void;
+
   /**
    * Internal reference to the processed stream
    */
@@ -275,6 +285,19 @@ class AudioHelper extends EventEmitter {
     if (isEnumerationSupported) {
       this._initializeEnumeration();
     }
+
+    // NOTE (kchoy): Currently microphone permissions are not supported in firefox.
+    // https://github.com/mozilla/standards-positions/issues/19#issuecomment-370158947
+    navigator.permissions.query({ name: 'microphone' }).then((microphonePermissionStatus) => {
+      if (microphonePermissionStatus.state !== 'granted') {
+        const handleStateChange = () => {
+          this._updateAvailableDevices();
+        };
+        microphonePermissionStatus.addEventListener('change', handleStateChange);
+        this._microphonePermissionStatus = microphonePermissionStatus;
+        this._onMicrophonePermissionStatusChanged = handleStateChange;
+      }
+    }).catch((reason) => this._log.warn(`Warning: unable to listen for microphone permission changes. ${reason}`));
   }
 
   /**
@@ -287,6 +310,7 @@ class AudioHelper extends EventEmitter {
     this._destroyProcessedStream();
     this._maybeStopPollingVolume();
     this.removeAllListeners();
+    this._stopMicrophonePermissionListener();
     this._unbind();
   }
 
@@ -799,6 +823,15 @@ class AudioHelper extends EventEmitter {
     });
   }
 
+  /**
+   * Remove event listener for microphone permissions
+   */
+  private _stopMicrophonePermissionListener(): void {
+    if (this._microphonePermissionStatus?.removeEventListener) {
+      this._microphonePermissionStatus.removeEventListener('change', this._onMicrophonePermissionStatusChanged);
+    }
+  }
+
   /**
    * Stop the selected audio stream
    */

tests/audiohelper.js

@@ -7,6 +7,19 @@ function getUserMedia() {
   return Promise.resolve({ id: 'default', getTracks: () => [] });
 }
 
+const defaultNavigator = {
+  permissions: {
+    query: function() {
+      return Promise.resolve('prompt');
+    }
+  },
+  mediaDevices: {
+    enumerateDevices: function(){
+      return Promise.resolve([]);
+    }
+  }
+};
+
 describe('AudioHelper', () => {
   context('when enumerateDevices is not supported', () => {
     const noop = () => {};
@@ -34,7 +47,7 @@ describe('AudioHelper', () => {
         ? navigator
         : undefined;
       HTMLAudioElement = undefined;
-      navigator = { };
+      navigator = defaultNavigator;
     });
 
     after(() => {
@@ -68,6 +81,8 @@ describe('AudioHelper', () => {
     let availableDevices;
     let handlers;
     let mediaDevices;
+    let oldHTMLAudioElement;
+    let oldNavigator;
 
     beforeEach(() => {
       eventObserver = new AudioProcessorEventObserver();
@@ -100,6 +115,23 @@ describe('AudioHelper', () => {
       });
     });
 
+    before(() => {
+      oldHTMLAudioElement = typeof HTMLAudioElement !== 'undefined'
+        ? HTMLAudioElement
+        : undefined;
+      oldNavigator = typeof navigator !== 'undefined'
+        ? navigator
+        : undefined;
+      HTMLAudioElement = undefined;
+      navigator = defaultNavigator
+    });
+
+    after(() => {
+      HTMLAudioElement = oldHTMLAudioElement;
+      navigator = oldNavigator;
+    });
+
+
     describe('constructor', () => {
       it('should set .isOutputSelectionSupported to true', () => {
         assert.equal(audio.isOutputSelectionSupported, true);
@@ -124,20 +156,39 @@ describe('AudioHelper', () => {
       });
     });
 
+    describe('navigator.permissions', () => {
+      it('should listen for microphone state changes', () => {
+        let onChangeHandler = sinon.stub();
+        let microphonePermissionStatus = {
+          state: 'prompt',
+          addEventListener: (eventName, listener) => {
+            if (eventName === 'change') {
+              listener()
+            }
+          }
+        };
+        navigator.permissions.query = () => Promise.resolve(microphonePermissionStatus);
+        audio = new AudioHelper(onActiveOutputsChanged, onActiveInputChanged, {});
+        microphonePermissionStatus.addEventListener('change', onChangeHandler);
+        sinon.assert.calledOnce(onChangeHandler);
+      })
+    })
+
     describe('._destroy', () => {
       it('should properly dispose the audio instance', () => {
         audio._stopDefaultInputDeviceStream = sinon.stub();
         audio._stopSelectedInputDeviceStream = sinon.stub();
         audio._destroyProcessedStream = sinon.stub();
         audio._maybeStopPollingVolume = sinon.stub();
+        audio._stopMicrophonePermissionListener = sinon.stub();
         audio._destroy();
         assert.strictEqual(audio.eventNames().length, 0);
         sinon.assert.calledOnce(audio._stopDefaultInputDeviceStream);
         sinon.assert.calledOnce(audio._stopSelectedInputDeviceStream);
         sinon.assert.calledOnce(audio._destroyProcessedStream);
         sinon.assert.calledOnce(audio._maybeStopPollingVolume);
         sinon.assert.calledOnce(mediaDevices.removeEventListener);
-
+        sinon.assert.calledOnce(audio._stopMicrophonePermissionListener);
       });
     });
 

tests/index.ts

@@ -73,6 +73,11 @@ root.navigator = {
   },
   platform: 'platform',
   userAgent: 'userAgent',
+  permissions: {
+    query: function() {
+      return Promise.resolve('prompt');
+    }
+  }
 };
 
 root.RTCPeerConnection = root.window.RTCPeerConnection = function() { };