fix: microphone not released after leave due to race condition

packages/hms-video-store/src/audio-sink-manager/AudioSinkManager.ts

@@ -39,16 +39,13 @@ export class AudioSinkManager {
   private volume = 100;
   private state = { ...INITIAL_STATE };
   private listener?: HMSUpdateListener;
-  private timer: ReturnType<typeof setInterval> | null = null;
-  private earpieceSelected = false;
 
   constructor(private store: Store, private deviceManager: DeviceManager, private eventBus: EventBus) {
     this.eventBus.audioTrackAdded.subscribe(this.handleTrackAdd);
     this.eventBus.audioTrackRemoved.subscribe(this.handleTrackRemove);
     this.eventBus.audioTrackUpdate.subscribe(this.handleTrackUpdate);
     this.eventBus.deviceChange.subscribe(this.handleAudioDeviceChange);
     this.eventBus.localVideoUnmutedNatively.subscribe(this.unpauseAudioTracks);
-    this.startPollingForDevices();
   }
 
   setListener(listener?: HMSUpdateListener) {
@@ -95,12 +92,7 @@ export class AudioSinkManager {
 
   cleanup() {
     this.audioSink?.remove();
-    this.earpieceSelected = false;
     this.audioSink = undefined;
-    if (this.timer) {
-      clearInterval(this.timer);
-      this.timer = null;
-    }
     this.eventBus.audioTrackAdded.unsubscribe(this.handleTrackAdd);
     this.eventBus.audioTrackRemoved.unsubscribe(this.handleTrackRemove);
     this.eventBus.audioTrackUpdate.unsubscribe(this.handleTrackUpdate);
@@ -185,11 +177,6 @@ export class AudioSinkManager {
   };
 
   private handleAudioDeviceChange = (event: HMSDeviceChangeEvent) => {
-    // this means the initial load
-    if (!event.selection) {
-      HMSLogger.d(this.TAG, 'device change called');
-      this.autoSelectAudioOutput();
-    }
     // if there is no selection that means this is an init request. No need to do anything
     if (event.isUserSelection || event.error || !event.selection || event.type === 'video') {
       return;
@@ -260,50 +247,4 @@ export class AudioSinkManager {
       track.setAudioElement(null);
     }
   };
-
-  private startPollingForDevices = () => {
-    // device change supported, no polling needed
-    if ('ondevicechange' in navigator.mediaDevices) {
-      return;
-    }
-    this.timer = setInterval(() => {
-      (async () => {
-        await this.deviceManager.init(true, false);
-        await this.autoSelectAudioOutput();
-        this.unpauseAudioTracks();
-      })();
-    }, 5000);
-  };
-
-  /**
-   * Mweb is not able to play via call channel by default, this is to switch from media channel to call channel
-   */
-  // eslint-disable-next-line complexity
-  private autoSelectAudioOutput = async () => {
-    if ('ondevicechange' in navigator.mediaDevices) {
-      return;
-    }
-    const { bluetoothDevice, earpiece, speakerPhone, wired } = this.deviceManager.categorizeAudioInputDevices();
-    const localAudioTrack = this.store.getLocalPeer()?.audioTrack;
-    if (localAudioTrack && earpiece) {
-      const manualSelection = this.deviceManager.getManuallySelectedAudioDevice();
-      const externalDeviceID =
-        manualSelection?.deviceId || bluetoothDevice?.deviceId || wired?.deviceId || speakerPhone?.deviceId;
-      HMSLogger.d(this.TAG, 'externalDeviceID', externalDeviceID);
-      // already selected appropriate device
-      if (localAudioTrack.settings.deviceId === externalDeviceID && this.earpieceSelected) {
-        return;
-      }
-      if (!this.earpieceSelected && bluetoothDevice?.deviceId !== externalDeviceID) {
-        await localAudioTrack.setSettings({ deviceId: earpiece?.deviceId }, true);
-        this.earpieceSelected = true;
-      }
-      await localAudioTrack.setSettings(
-        {
-          deviceId: externalDeviceID,
-        },
-        true,
-      );
-    }
-  };
 }

packages/hms-video-store/src/device-manager/DeviceManager.ts

@@ -34,6 +34,8 @@ export class DeviceManager implements HMSDeviceManager {
   private initialized = false;
   private videoInputChanged = false;
   private audioInputChanged = false;
+  private earpieceSelected = false;
+  private timer: ReturnType<typeof setTimeout> | null = null;
 
   constructor(private store: Store, private eventBus: EventBus) {
     const isLocalTrackEnabled = ({ enabled, track }: { enabled: boolean; track: HMSLocalTrack }) =>
@@ -97,6 +99,8 @@ export class DeviceManager implements HMSDeviceManager {
     // do it only on initial load.
     if (!force) {
       await this.updateToActualDefaultDevice();
+      await this.autoSelectAudioOutput();
+      this.startPollingForDevices();
     }
     this.logDevices('Init');
     await this.setOutputDevice();
@@ -124,6 +128,10 @@ export class DeviceManager implements HMSDeviceManager {
 
   cleanup() {
     this.initialized = false;
+    this.earpieceSelected = false;
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
     this.audioInput = [];
     this.audioOutput = [];
     this.videoInput = [];
@@ -210,7 +218,10 @@ export class DeviceManager implements HMSDeviceManager {
         const nonIPhoneDevice = this.audioInput.find(device => !device.label.toLowerCase().includes('iphone'));
         return isIOS() && nonIPhoneDevice ? nonIPhoneDevice?.deviceId : this.getNewAudioInputDevice()?.deviceId;
       };
-      await localPeer.audioTrack.setSettings({ deviceId: getInitialDeviceId() }, true);
+      const deviceIdToUpdate = getInitialDeviceId();
+      if (deviceIdToUpdate) {
+        await localPeer.audioTrack.setSettings({ deviceId: getInitialDeviceId() }, true);
+      }
     }
   };
 
@@ -446,6 +457,57 @@ export class DeviceManager implements HMSDeviceManager {
     return { bluetoothDevice, speakerPhone, wired, earpiece };
   }
 
+  private startPollingForDevices = () => {
+    // device change supported, no polling needed
+    if ('ondevicechange' in navigator.mediaDevices) {
+      return;
+    }
+    this.timer = setTimeout(() => {
+      (async () => {
+        await this.enumerateDevices();
+        await this.autoSelectAudioOutput();
+        this.startPollingForDevices();
+      })();
+    }, 5000);
+  };
+
+  /**
+   * Mweb is not able to play via call channel by default, this is to switch from media channel to call channel
+   */
+  // eslint-disable-next-line complexity
+  private autoSelectAudioOutput = async () => {
+    if ('ondevicechange' in navigator.mediaDevices) {
+      return;
+    }
+    const { bluetoothDevice, earpiece, speakerPhone, wired } = this.categorizeAudioInputDevices();
+    const localAudioTrack = this.store.getLocalPeer()?.audioTrack;
+    if (!localAudioTrack || !earpiece) {
+      return;
+    }
+    const manualSelection = this.getManuallySelectedAudioDevice();
+    const externalDeviceID =
+      manualSelection?.deviceId || bluetoothDevice?.deviceId || wired?.deviceId || speakerPhone?.deviceId;
+    HMSLogger.d(this.TAG, 'externalDeviceID', externalDeviceID);
+    // already selected appropriate device
+    if (localAudioTrack.settings.deviceId === externalDeviceID && this.earpieceSelected) {
+      return;
+    }
+    if (!this.earpieceSelected) {
+      if (bluetoothDevice?.deviceId === externalDeviceID) {
+        this.earpieceSelected = true;
+        return;
+      }
+      await localAudioTrack.setSettings({ deviceId: earpiece?.deviceId }, true);
+      this.earpieceSelected = true;
+    }
+    await localAudioTrack.setSettings(
+      {
+        deviceId: externalDeviceID,
+      },
+      true,
+    );
+  };
+
   // eslint-disable-next-line complexity
   private getAudioOutputDeviceMatchingInput(inputDevice?: MediaDeviceInfo) {
     const blacklist = this.store.getConfig()?.settings?.speakerAutoSelectionBlacklist || [];

packages/hms-video-store/src/media/tracks/HMSLocalAudioTrack.ts

@@ -26,6 +26,12 @@ export class HMSLocalAudioTrack extends HMSAudioTrack {
   private pluginsManager: HMSAudioPluginsManager;
   private processedTrack?: MediaStreamTrack;
   private manuallySelectedDeviceId?: string;
+  /**
+   * This is to keep track of all the tracks created so far and stop and clear them when creating new tracks to release microphone
+   * This is needed because when replaceTrackWith is called before updating native track, there is no way that track is available
+   * for you to stop, which leads to the microphone not released even after leave is called.
+   */
+  private tracksCreated = new Set<MediaStreamTrack>();
 
   audioLevelMonitor?: TrackAudioLevelMonitor;
 
@@ -127,6 +133,7 @@ export class HMSLocalAudioTrack extends HMSAudioTrack {
    * @param track
    */
   private async updateTrack(track: MediaStreamTrack) {
+    track.enabled = this.enabled;
     const localStream = this.stream as HMSLocalStream;
     await localStream.replaceStreamTrack(this.nativeTrack, track);
     // change nativeTrack so plugin can start its work
@@ -144,14 +151,17 @@ export class HMSLocalAudioTrack extends HMSAudioTrack {
      * no audio when the above getAudioTrack throws an error. ex: DeviceInUse error
      */
     prevTrack?.stop();
+    this.tracksCreated.forEach(track => track.stop());
+    this.tracksCreated.clear();
     try {
       const newTrack = await getAudioTrack(settings);
-      newTrack.enabled = this.enabled;
+      this.tracksCreated.add(newTrack);
       HMSLogger.d(this.TAG, 'replaceTrack, Previous track stopped', prevTrack, 'newTrack', newTrack);
       await this.updateTrack(newTrack);
     } catch (e) {
       // Generate a new track from previous settings so there will be audio because previous track is stopped
       const newTrack = await getAudioTrack(this.settings);
+      this.tracksCreated.add(newTrack);
       await this.updateTrack(newTrack);
       if (this.isPublished) {
         this.eventBus.analytics.publish(
@@ -271,6 +281,8 @@ export class HMSLocalAudioTrack extends HMSAudioTrack {
     await this.pluginsManager.closeContext();
     this.transceiver = undefined;
     this.processedTrack?.stop();
+    this.tracksCreated.forEach(track => track.stop());
+    this.tracksCreated.clear();
     this.isPublished = false;
     this.destroyAudioLevelMonitor();
     document.removeEventListener('visibilitychange', this.handleVisibilityChange);

packages/hms-video-store/src/sdk/WakeLockManager.ts

@@ -19,6 +19,7 @@ export class WakeLockManager {
         HMSLogger.w(this.TAG, 'Error while releasing wake lock', `name=${error.name}, message=${error.message}`);
       }
     }
+    document?.removeEventListener('visibilitychange', this.visibilityHandler);
     this.wakeLock = null;
   };
 

packages/roomkit-react/src/Prebuilt/components/Leave/LeaveSessionContent.tsx

@@ -47,7 +47,9 @@ export const LeaveSessionContent = ({
         <Button
           variant="danger"
           css={{ w: '100%' }}
-          onClick={async () => await leaveRoom()}
+          onClick={async () => {
+            await leaveRoom();
+          }}
           id="leaveRoom"
           data-testid="leave_room"
         >