fix: local video not recovering afer phone call, notifications

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

@@ -46,6 +46,7 @@ export class AudioSinkManager {
     this.eventBus.audioTrackUpdate.subscribe(this.handleTrackUpdate);
     this.eventBus.deviceChange.subscribe(this.handleAudioDeviceChange);
     this.eventBus.localVideoUnmutedNatively.subscribe(this.unpauseAudioTracks);
+    this.eventBus.localAudioUnmutedNatively.subscribe(this.unpauseAudioTracks);
   }
 
   setListener(listener?: HMSUpdateListener) {
@@ -98,6 +99,7 @@ export class AudioSinkManager {
     this.eventBus.audioTrackUpdate.unsubscribe(this.handleTrackUpdate);
     this.eventBus.deviceChange.unsubscribe(this.handleAudioDeviceChange);
     this.eventBus.localVideoUnmutedNatively.unsubscribe(this.unpauseAudioTracks);
+    this.eventBus.localAudioUnmutedNatively.unsubscribe(this.unpauseAudioTracks);
     this.autoPausedTracks = new Set();
     this.state = { ...INITIAL_STATE };
   }

packages/hms-video-store/src/events/EventBus.ts

@@ -31,6 +31,7 @@ export class EventBus {
     this.eventEmitter,
   );
   readonly localVideoUnmutedNatively = new HMSInternalEvent(HMSEvents.LOCAL_VIDEO_UNMUTED_NATIVELY, this.eventEmitter);
+  readonly localAudioUnmutedNatively = new HMSInternalEvent(HMSEvents.LOCAL_AUDIO_UNMUTED_NATIVELY, this.eventEmitter);
 
   /**
    * Emitter which processes raw RTC stats from rtcStatsUpdate and calls client callback

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

@@ -325,7 +325,7 @@ export class HMSLocalAudioTrack extends HMSAudioTrack {
   };
 
   /** @internal */
-  handleTrackUnmute = () => {
+  handleTrackUnmute = async () => {
     HMSLogger.d(this.TAG, 'unmuted natively');
     const reason = document.visibilityState === 'hidden' ? 'visibility-change' : 'incoming-call';
     this.eventBus.analytics.publish(
@@ -334,7 +334,9 @@ export class HMSLocalAudioTrack extends HMSAudioTrack {
         reason,
       }),
     );
-    this.setEnabled(this.enabled);
+    await this.setEnabled(this.enabled);
+    // whatsapp call doesn't seem to send video unmute natively, so use audio unmute to play video
+    this.eventBus.localAudioUnmutedNatively.publish();
   };
 
   private replaceSenderTrack = async () => {

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

@@ -85,6 +85,7 @@ export class HMSLocalVideoTrack extends HMSVideoTrack {
     this.pluginsManager = new HMSVideoPluginsManager(this, eventBus);
     this.mediaStreamPluginsManager = new HMSMediaStreamPluginsManager(eventBus, room);
     this.setFirstTrackId(this.trackId);
+    this.eventBus.localAudioUnmutedNatively.subscribe(this.handleTrackUnmute);
     if (isBrowser && source === 'regular' && isMobile()) {
       document.addEventListener('visibilitychange', this.handleVisibilityChange);
     }
@@ -261,6 +262,7 @@ export class HMSLocalVideoTrack extends HMSVideoTrack {
    * @internal
    */
   async cleanup() {
+    this.eventBus.localAudioUnmutedNatively.unsubscribe(this.handleTrackUnmute);
     this.removeTrackEventListeners(this.nativeTrack);
     super.cleanup();
     this.transceiver = undefined;
@@ -514,12 +516,12 @@ export class HMSLocalVideoTrack extends HMSVideoTrack {
 
   private addTrackEventListeners(track: MediaStreamTrack) {
     track.addEventListener('mute', this.handleTrackMute);
-    track.addEventListener('unmute', this.handleTrackUnmute);
+    track.addEventListener('unmute', this.handleTrackUnmuteNatively);
   }
 
   private removeTrackEventListeners(track: MediaStreamTrack) {
     track.removeEventListener('mute', this.handleTrackMute);
-    track.removeEventListener('unmute', this.handleTrackUnmute);
+    track.removeEventListener('unmute', this.handleTrackUnmuteNatively);
   }
 
   private handleTrackMute = () => {
@@ -534,18 +536,18 @@ export class HMSLocalVideoTrack extends HMSVideoTrack {
   };
 
   /** @internal */
-  handleTrackUnmute = () => {
+  handleTrackUnmuteNatively = async () => {
     HMSLogger.d(this.TAG, 'unmuted natively');
     this.eventBus.analytics.publish(
       this.sendInterruptionEvent({
         started: false,
         reason: 'incoming-call',
       }),
     );
-    super.handleTrackUnmute();
+    this.handleTrackUnmute();
     this.eventBus.localVideoEnabled.publish({ enabled: this.enabled, track: this });
     this.eventBus.localVideoUnmutedNatively.publish();
-    this.setEnabled(this.enabled);
+    await this.setEnabled(this.enabled);
   };
 
   /**

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

@@ -256,6 +256,7 @@ export class HMSSdk implements HMSInterface {
     this.eventBus.analytics.subscribe(this.sendAnalyticsEvent);
     this.eventBus.deviceChange.subscribe(this.handleDeviceChange);
     this.eventBus.localVideoUnmutedNatively.subscribe(this.unpauseRemoteVideoTracks);
+    this.eventBus.localAudioUnmutedNatively.subscribe(this.unpauseRemoteVideoTracks);
     this.eventBus.audioPluginFailed.subscribe(this.handleAudioPluginError);
   }
 
@@ -456,6 +457,7 @@ export class HMSSdk implements HMSInterface {
             const error = ErrorFactory.TracksErrors.NoDataInTrack(
               `${track.type} track has no data. muted: ${track.nativeTrack.muted}, readyState: ${track.nativeTrack.readyState}`,
             );
+            HMSLogger.e(this.TAG, error);
             this.sendAnalyticsEvent(
               AnalyticsEventFactory.publish({
                 devices: this.deviceManager.getDevices(),
@@ -671,6 +673,7 @@ export class HMSSdk implements HMSInterface {
     this.cleanDeviceManagers();
     this.eventBus.analytics.unsubscribe(this.sendAnalyticsEvent);
     this.eventBus.localVideoUnmutedNatively.unsubscribe(this.unpauseRemoteVideoTracks);
+    this.eventBus.localAudioUnmutedNatively.unsubscribe(this.unpauseRemoteVideoTracks);
     this.analyticsTimer.cleanup();
     DeviceStorageManager.cleanup();
     this.playlistManager.cleanup();
@@ -1343,6 +1346,7 @@ export class HMSSdk implements HMSInterface {
         const error = ErrorFactory.TracksErrors.NoDataInTrack(
           `${track.type} track has no data. muted: ${track.nativeTrack.muted}, readyState: ${track.nativeTrack.readyState}`,
         );
+        HMSLogger.e(this.TAG, error);
         this.sendAnalyticsEvent(
           AnalyticsEventFactory.publish({
             devices: this.deviceManager.getDevices(),

packages/hms-video-store/src/utils/constants.ts

@@ -40,6 +40,7 @@ export const HMSEvents = {
   LOCAL_AUDIO_ENABLED: 'local-audio-enabled',
   LOCAL_VIDEO_ENABLED: 'local-video-enabled',
   LOCAL_VIDEO_UNMUTED_NATIVELY: 'local-video-unmuted-natively',
+  LOCAL_AUDIO_UNMUTED_NATIVELY: 'local-audio-unmuted-natively',
   STATS_UPDATE: 'stats-update', // emitted by HMSWebrtcInternals
   RTC_STATS_UPDATE: 'rtc-stats-update', // emitted by RTCStatsMonitor
   TRACK_DEGRADED: 'track-degraded',

packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -43,7 +43,18 @@ const pollToastKey: Record<string, string> = {};
 
 export function Notifications() {
   const localPeerID = useHMSStore(selectLocalPeerID);
-  const notification = useHMSNotifications();
+  const notification = useHMSNotifications([
+    HMSNotificationTypes.NAME_UPDATED,
+    HMSNotificationTypes.ERROR,
+    HMSNotificationTypes.ROLE_UPDATED,
+    HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
+    HMSNotificationTypes.REMOVED_FROM_ROOM,
+    HMSNotificationTypes.ROOM_ENDED,
+    HMSNotificationTypes.DEVICE_CHANGE_UPDATE,
+    HMSNotificationTypes.POLL_STARTED,
+    HMSNotificationTypes.POLL_STOPPED,
+    HMSNotificationTypes.NEW_MESSAGE,
+  ]);
   const subscribedNotifications = useSubscribedNotifications() || {};
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
@@ -109,6 +120,7 @@ export function Notifications() {
         if (!subscribedNotifications.ERROR) return;
         ToastManager.addToast({
           title: `Error: ${notification.data?.message} - ${notification.data?.description}`,
+          duration: 8000,
         });
         break;
       case HMSNotificationTypes.ROLE_UPDATED: {