@stream-io/video-client 1.5.0-0 → 1.5.0

package/src/rtc/Subscriber.ts

@@ -5,27 +5,23 @@ import { SubscriberOffer } from '../gen/video/sfu/event/events';
 import { Dispatcher } from './Dispatcher';
 import { getLogger } from '../logger';
 import { CallingState, CallState } from '../store';
-import { withoutConcurrency } from '../helpers/concurrency';
-import { toTrackType, trackTypeToParticipantStreamKey } from './helpers/tracks';
-import { Logger } from '../coordinator/connection/types';
 
 export type SubscriberOpts = {
   sfuClient: StreamSfuClient;
   dispatcher: Dispatcher;
   state: CallState;
   connectionConfig?: RTCConfiguration;
+  iceRestartDelay?: number;
   onUnrecoverableError?: () => void;
-  logTag: string;
 };
 
+const logger = getLogger(['Subscriber']);
+
 /**
  * A wrapper around the `RTCPeerConnection` that handles the incoming
  * media streams from the SFU.
- *
- * @internal
  */
 export class Subscriber {
-  private readonly logger: Logger;
   private pc: RTCPeerConnection;
   private sfuClient: StreamSfuClient;
   private state: CallState;
@@ -34,7 +30,9 @@ export class Subscriber {
   private readonly unregisterOnIceRestart: () => void;
   private readonly onUnrecoverableError?: () => void;
 
+  private readonly iceRestartDelay: number;
   private isIceRestarting = false;
+  private iceRestartTimeout?: NodeJS.Timeout;
 
   // workaround for the lack of RTCPeerConnection.getConfiguration() method in react-native-webrtc
   private _connectionConfiguration: RTCConfiguration | undefined;
@@ -58,44 +56,35 @@ export class Subscriber {
    * @param connectionConfig the connection configuration to use.
    * @param iceRestartDelay the delay in milliseconds to wait before restarting ICE when connection goes to `disconnected` state.
    * @param onUnrecoverableError a callback to call when an unrecoverable error occurs.
-   * @param logTag a tag to use for logging.
    */
   constructor({
     sfuClient,
     dispatcher,
     state,
     connectionConfig,
+    iceRestartDelay = 2500,
     onUnrecoverableError,
-    logTag,
   }: SubscriberOpts) {
-    this.logger = getLogger(['Subscriber', logTag]);
     this.sfuClient = sfuClient;
     this.state = state;
+    this.iceRestartDelay = iceRestartDelay;
     this.onUnrecoverableError = onUnrecoverableError;
 
     this.pc = this.createPeerConnection(connectionConfig);
 
-    const subscriberOfferConcurrencyTag = Symbol('subscriberOffer');
     this.unregisterOnSubscriberOffer = dispatcher.on(
       'subscriberOffer',
       (subscriberOffer) => {
-        // TODO: use queue per peer connection, otherwise
-        //  it could happen we consume an offer for a different peer connection
-        withoutConcurrency(subscriberOfferConcurrencyTag, () => {
-          return this.negotiate(subscriberOffer);
-        }).catch((err) => {
-          this.logger('warn', `Negotiation failed.`, err);
+        this.negotiate(subscriberOffer).catch((err) => {
+          logger('warn', `Negotiation failed.`, err);
         });
       },
     );
 
-    const iceRestartConcurrencyTag = Symbol('iceRestart');
     this.unregisterOnIceRestart = dispatcher.on('iceRestart', (iceRestart) => {
-      withoutConcurrency(iceRestartConcurrencyTag, async () => {
-        if (iceRestart.peerType !== PeerType.SUBSCRIBER) return;
-        await this.restartIce();
-      }).catch((err) => {
-        this.logger('warn', `ICERestart failed`, err);
+      if (iceRestart.peerType !== PeerType.SUBSCRIBER) return;
+      this.restartIce().catch((err) => {
+        logger('warn', `ICERestart failed`, err);
         this.onUnrecoverableError?.();
       });
     });
@@ -129,30 +118,10 @@ export class Subscriber {
    * Closes the `RTCPeerConnection` and unsubscribes from the dispatcher.
    */
   close = () => {
-    this.detachEventHandlers();
-    this.pc.close();
-  };
-
-  /**
-   * Detaches the event handlers from the `RTCPeerConnection`.
-   * This is useful when we want to replace the `RTCPeerConnection`
-   * instance with a new one (in case of migration).
-   */
-  detachEventHandlers = () => {
+    clearTimeout(this.iceRestartTimeout);
     this.unregisterOnSubscriberOffer();
     this.unregisterOnIceRestart();
-
-    this.pc.removeEventListener('icecandidate', this.onIceCandidate);
-    this.pc.removeEventListener('track', this.handleOnTrack);
-    this.pc.removeEventListener('icecandidateerror', this.onIceCandidateError);
-    this.pc.removeEventListener(
-      'iceconnectionstatechange',
-      this.onIceConnectionStateChange,
-    );
-    this.pc.removeEventListener(
-      'icegatheringstatechange',
-      this.onIceGatheringStateChange,
-    );
+    this.pc.close();
   };
 
   /**
@@ -173,17 +142,95 @@ export class Subscriber {
     this.sfuClient = sfuClient;
   };
 
+  /**
+   * Migrates the subscriber to a new SFU client.
+   *
+   * @param sfuClient the new SFU client to migrate to.
+   * @param connectionConfig the new connection configuration to use.
+   */
+  migrateTo = (
+    sfuClient: StreamSfuClient,
+    connectionConfig?: RTCConfiguration,
+  ) => {
+    this.setSfuClient(sfuClient);
+
+    // when migrating, we want to keep the previous subscriber open
+    // until the new one is connected
+    const previousPC = this.pc;
+
+    // we keep a record of previously available video tracks
+    // so that we can monitor when they become available on the new
+    // subscriber and close the previous one.
+    const trackIdsToMigrate = new Set<string>();
+    previousPC.getReceivers().forEach((r) => {
+      if (r.track.kind === 'video') {
+        trackIdsToMigrate.add(r.track.id);
+      }
+    });
+
+    // set up a new subscriber peer connection, configured to connect
+    // to the new SFU node
+    const pc = this.createPeerConnection(connectionConfig);
+
+    let migrationTimeoutId: NodeJS.Timeout;
+    const cleanupMigration = () => {
+      previousPC.close();
+      clearTimeout(migrationTimeoutId);
+    };
+
+    // When migrating, we want to keep track of the video tracks
+    // that are migrating to the new subscriber.
+    // Once all of them are available, we can close the previous subscriber.
+    const handleTrackMigration = (e: RTCTrackEvent) => {
+      logger(
+        'debug',
+        `[Migration]: Migrated track: ${e.track.id}, ${e.track.kind}`,
+      );
+      trackIdsToMigrate.delete(e.track.id);
+      if (trackIdsToMigrate.size === 0) {
+        logger('debug', `[Migration]: Migration complete`);
+        pc.removeEventListener('track', handleTrackMigration);
+        cleanupMigration();
+      }
+    };
+
+    // When migrating, we want to keep track of the connection state
+    // of the new subscriber.
+    // Once it is connected, we give it a 2-second grace period to receive
+    // all the video tracks that are migrating from the previous subscriber.
+    // After this threshold, we abruptly close the previous subscriber.
+    const handleConnectionStateChange = () => {
+      if (pc.connectionState === 'connected') {
+        migrationTimeoutId = setTimeout(() => {
+          pc.removeEventListener('track', handleTrackMigration);
+          cleanupMigration();
+        }, 2000);
+
+        pc.removeEventListener(
+          'connectionstatechange',
+          handleConnectionStateChange,
+        );
+      }
+    };
+
+    pc.addEventListener('track', handleTrackMigration);
+    pc.addEventListener('connectionstatechange', handleConnectionStateChange);
+
+    // replace the PeerConnection instance
+    this.pc = pc;
+  };
+
   /**
    * Restarts the ICE connection and renegotiates with the SFU.
    */
   restartIce = async () => {
-    this.logger('debug', 'Restarting ICE connection');
+    logger('debug', 'Restarting ICE connection');
     if (this.pc.signalingState === 'have-remote-offer') {
-      this.logger('debug', 'ICE restart is already in progress');
+      logger('debug', 'ICE restart is already in progress');
       return;
     }
     if (this.pc.connectionState === 'new') {
-      this.logger(
+      logger(
         'debug',
         `ICE connection is not yet established, skipping restart.`,
       );
@@ -205,59 +252,54 @@ export class Subscriber {
   private handleOnTrack = (e: RTCTrackEvent) => {
     const [primaryStream] = e.streams;
     // example: `e3f6aaf8-b03d-4911-be36-83f47d37a76a:TRACK_TYPE_VIDEO`
-    const [trackId, rawTrackType] = primaryStream.id.split(':');
+    const [trackId, trackType] = primaryStream.id.split(':');
     const participantToUpdate = this.state.participants.find(
       (p) => p.trackLookupPrefix === trackId,
     );
-    this.logger(
+    logger(
       'debug',
-      `[onTrack]: Got remote ${rawTrackType} track for userId: ${participantToUpdate?.userId}`,
+      `[onTrack]: Got remote ${trackType} track for userId: ${participantToUpdate?.userId}`,
       e.track.id,
       e.track,
     );
+    if (!participantToUpdate) {
+      logger(
+        'warn',
+        `[onTrack]: Received track for unknown participant: ${trackId}`,
+        e,
+      );
+      return;
+    }
 
-    const trackDebugInfo = `${participantToUpdate?.userId} ${rawTrackType}:${trackId}`;
+    const trackDebugInfo = `${participantToUpdate.userId} ${trackType}:${trackId}`;
     e.track.addEventListener('mute', () => {
-      this.logger('info', `[onTrack]: Track muted: ${trackDebugInfo}`);
+      logger('info', `[onTrack]: Track muted: ${trackDebugInfo}`);
     });
 
     e.track.addEventListener('unmute', () => {
-      this.logger('info', `[onTrack]: Track unmuted: ${trackDebugInfo}`);
+      logger('info', `[onTrack]: Track unmuted: ${trackDebugInfo}`);
     });
 
     e.track.addEventListener('ended', () => {
-      this.logger('info', `[onTrack]: Track ended: ${trackDebugInfo}`);
-      this.state.removeOrphanedTrack(primaryStream.id);
+      logger('info', `[onTrack]: Track ended: ${trackDebugInfo}`);
     });
 
-    const trackType = toTrackType(rawTrackType);
-    if (!trackType) {
-      return this.logger('error', `Unknown track type: ${rawTrackType}`);
-    }
-
-    if (!participantToUpdate) {
-      this.logger(
-        'warn',
-        `[onTrack]: Received track for unknown participant: ${trackId}`,
-        e,
-      );
-      this.state.registerOrphanedTrack({
-        id: primaryStream.id,
-        trackLookupPrefix: trackId,
-        track: primaryStream,
-        trackType,
-      });
-      return;
-    }
+    const streamKindProp = (
+      {
+        TRACK_TYPE_AUDIO: 'audioStream',
+        TRACK_TYPE_VIDEO: 'videoStream',
+        TRACK_TYPE_SCREEN_SHARE: 'screenShareStream',
+        TRACK_TYPE_SCREEN_SHARE_AUDIO: 'screenShareAudioStream',
+      } as const
+    )[trackType];
 
-    const streamKindProp = trackTypeToParticipantStreamKey(trackType);
     if (!streamKindProp) {
-      this.logger('error', `Unknown track type: ${rawTrackType}`);
+      logger('error', `Unknown track type: ${trackType}`);
       return;
     }
     const previousStream = participantToUpdate[streamKindProp];
     if (previousStream) {
-      this.logger(
+      logger(
         'info',
         `[onTrack]: Cleaning up previous remote ${e.track.kind} tracks for userId: ${participantToUpdate.userId}`,
       );
@@ -274,7 +316,7 @@ export class Subscriber {
   private onIceCandidate = (e: RTCPeerConnectionIceEvent) => {
     const { candidate } = e;
     if (!candidate) {
-      this.logger('debug', 'null ice candidate');
+      logger('debug', 'null ice candidate');
       return;
     }
 
@@ -284,12 +326,12 @@ export class Subscriber {
         peerType: PeerType.SUBSCRIBER,
       })
       .catch((err) => {
-        this.logger('warn', `ICETrickle failed`, err);
+        logger('warn', `ICETrickle failed`, err);
       });
   };
 
   private negotiate = async (subscriberOffer: SubscriberOffer) => {
-    this.logger('info', `Received subscriberOffer`, subscriberOffer);
+    logger('info', `Received subscriberOffer`, subscriberOffer);
 
     await this.pc.setRemoteDescription({
       type: 'offer',
@@ -302,7 +344,7 @@ export class Subscriber {
           const iceCandidate = JSON.parse(candidate.iceCandidate);
           await this.pc.addIceCandidate(iceCandidate);
         } catch (e) {
-          this.logger('warn', `ICE candidate error`, [e, candidate]);
+          logger('warn', `ICE candidate error`, [e, candidate]);
         }
       },
     );
@@ -320,28 +362,47 @@ export class Subscriber {
 
   private onIceConnectionStateChange = () => {
     const state = this.pc.iceConnectionState;
-    this.logger('debug', `ICE connection state changed`, state);
-
-    if (this.state.callingState === CallingState.RECONNECTING) return;
+    logger('debug', `ICE connection state changed`, state);
 
     // do nothing when ICE is restarting
     if (this.isIceRestarting) return;
 
-    if (state === 'failed' || state === 'disconnected') {
-      this.logger('debug', `Attempting to restart ICE`);
+    const hasNetworkConnection =
+      this.state.callingState !== CallingState.OFFLINE;
+
+    if (state === 'failed') {
+      logger('debug', `Attempting to restart ICE`);
       this.restartIce().catch((e) => {
-        this.logger('error', `ICE restart failed`, e);
+        logger('error', `ICE restart failed`, e);
         this.onUnrecoverableError?.();
       });
+    } else if (state === 'disconnected' && hasNetworkConnection) {
+      // when in `disconnected` state, the browser may recover automatically,
+      // hence, we delay the ICE restart
+      logger('debug', `Scheduling ICE restart in ${this.iceRestartDelay} ms.`);
+      this.iceRestartTimeout = setTimeout(() => {
+        // check if the state is still `disconnected` or `failed`
+        // as the connection may have recovered (or failed) in the meantime
+        if (
+          this.pc.iceConnectionState === 'disconnected' ||
+          this.pc.iceConnectionState === 'failed'
+        ) {
+          this.restartIce().catch((e) => {
+            logger('error', `ICE restart failed`, e);
+            this.onUnrecoverableError?.();
+          });
+        } else {
+          logger(
+            'debug',
+            `Scheduled ICE restart: connection recovered, canceled.`,
+          );
+        }
+      }, this.iceRestartDelay);
     }
   };
 
   private onIceGatheringStateChange = () => {
-    this.logger(
-      'debug',
-      `ICE gathering state changed`,
-      this.pc.iceGatheringState,
-    );
+    logger('debug', `ICE gathering state changed`, this.pc.iceGatheringState);
   };
 
   private onIceCandidateError = (e: Event) => {
@@ -351,6 +412,6 @@ export class Subscriber {
     const iceState = this.pc.iceConnectionState;
     const logLevel =
       iceState === 'connected' || iceState === 'checking' ? 'debug' : 'warn';
-    this.logger(logLevel, `ICE Candidate error`, errorMessage);
+    logger(logLevel, `ICE Candidate error`, errorMessage);
   };
 }

package/src/rtc/__tests__/Publisher.test.ts

@@ -4,10 +4,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Publisher } from '../Publisher';
 import { CallState } from '../../store';
 import { StreamSfuClient } from '../../StreamSfuClient';
-import { DispatchableMessage, Dispatcher } from '../Dispatcher';
+import { Dispatcher } from '../Dispatcher';
 import { PeerType, TrackType } from '../../gen/video/sfu/models/models';
-import { SfuEvent } from '../../gen/video/sfu/event/events';
 import { IceTrickleBuffer } from '../IceTrickleBuffer';
+import { SfuEvent } from '../../gen/video/sfu/event/events';
 
 vi.mock('../../StreamSfuClient', () => {
   console.log('MOCKING StreamSfuClient');
@@ -40,22 +40,14 @@ describe('Publisher', () => {
     dispatcher = new Dispatcher();
     sfuClient = new StreamSfuClient({
       dispatcher,
-      sessionId: 'session-id-test',
-      credentials: {
-        server: {
-          url: 'https://getstream.io/',
-          ws_endpoint: 'https://getstream.io/ws',
-          edge_name: 'sfu-1',
-        },
-        token: 'token',
-        ice_servers: [],
+      sfuServer: {
+        url: 'https://getstream.io/',
+        ws_endpoint: 'https://getstream.io/ws',
+        edge_name: 'sfu-1',
       },
-      logTag: 'test',
+      token: 'token',
     });
 
-    // @ts-expect-error readonly field
-    sfuClient.iceTrickleBuffer = new IceTrickleBuffer();
-
     // @ts-ignore
     sfuClient['sessionId'] = sessionId;
 
@@ -66,7 +58,7 @@ describe('Publisher', () => {
       state,
       isDtxEnabled: true,
       isRedEnabled: true,
-      logTag: 'test',
+      iceRestartDelay: 100,
     });
   });
 
@@ -218,6 +210,74 @@ describe('Publisher', () => {
     expect(addEventListenerSpy).not.toHaveBeenCalled();
   });
 
+  describe('Publisher migration', () => {
+    it('should update the sfuClient and peer connection configuration', async () => {
+      const newSfuClient = new StreamSfuClient({
+        dispatcher: new Dispatcher(),
+        sfuServer: {
+          url: 'https://getstream.io/',
+          ws_endpoint: 'https://getstream.io/ws',
+          edge_name: 'sfu-1',
+        },
+        token: 'token',
+      });
+
+      const newPeerConnectionConfig = {
+        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
+      };
+
+      vi.spyOn(publisher['pc'], 'setConfiguration');
+      // @ts-ignore
+      publisher['pc'].iceConnectionState = 'connected';
+      // @ts-ignore
+      vi.spyOn(publisher, 'negotiate').mockReturnValue(Promise.resolve());
+      vi.spyOn(publisher, 'isPublishing').mockReturnValue(true);
+
+      await publisher.migrateTo(newSfuClient, newPeerConnectionConfig);
+
+      expect(publisher['sfuClient']).toEqual(newSfuClient);
+      expect(publisher['pc'].setConfiguration).toHaveBeenCalledWith(
+        newPeerConnectionConfig,
+      );
+      expect(publisher['negotiate']).toHaveBeenCalledWith({ iceRestart: true });
+    });
+
+    it('should initiate ICE Restart when there are published tracks', async () => {
+      vi.spyOn(publisher['pc'], 'getTransceivers').mockReturnValue([]);
+      // @ts-ignore
+      sfuClient['iceTrickleBuffer'] = new IceTrickleBuffer();
+      sfuClient.setPublisher = vi.fn().mockResolvedValue({
+        response: {
+          sessionId: 'new-session-id',
+          sdp: 'new-sdp',
+          iceRestart: false,
+        },
+      });
+
+      // @ts-ignore
+      publisher['pc'].iceConnectionState = 'connected';
+      vi.spyOn(publisher, 'isPublishing').mockReturnValue(true);
+      vi.spyOn(publisher, 'getCurrentTrackInfos').mockReturnValue([
+        // @ts-expect-error
+        { layers: [], trackType: TrackType.AUDIO, mid: '0' },
+      ]);
+
+      await publisher.migrateTo(sfuClient, {
+        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
+      });
+
+      expect(publisher['pc'].createOffer).toHaveBeenCalledWith({
+        iceRestart: true,
+      });
+      expect(publisher['pc'].setLocalDescription).toHaveBeenCalled();
+      expect(publisher['pc'].setRemoteDescription).toHaveBeenCalledWith({
+        type: 'answer',
+        sdp: 'new-sdp',
+      });
+      expect(sfuClient.setPublisher).toHaveBeenCalled();
+    });
+  });
+
   describe('Publisher ICE Restart', () => {
     it('should perform ICE restart when iceRestart event is received', () => {
       vi.spyOn(publisher, 'restartIce').mockResolvedValue();
@@ -229,7 +289,7 @@ describe('Publisher', () => {
               peerType: PeerType.PUBLISHER_UNSPECIFIED,
             },
           },
-        }) as DispatchableMessage<'iceRestart'>,
+        }),
       );
       expect(publisher.restartIce).toHaveBeenCalled();
     });
@@ -244,7 +304,7 @@ describe('Publisher', () => {
               peerType: PeerType.SUBSCRIBER,
             },
           },
-        }) as DispatchableMessage<'iceRestart'>,
+        }),
       );
       expect(publisher.restartIce).not.toHaveBeenCalled();
     });
@@ -269,10 +329,27 @@ describe('Publisher', () => {
 
     it(`should perform ICE restart when connection state changes to 'disconnected'`, () => {
       vi.spyOn(publisher, 'restartIce').mockResolvedValue();
+      vi.useFakeTimers();
+
       // @ts-ignore
       publisher['pc'].iceConnectionState = 'disconnected';
       publisher['onIceConnectionStateChange']();
+      vi.runAllTimers();
       expect(publisher.restartIce).toHaveBeenCalled();
     });
+
+    it(`should bail-out from ICE restart once connection recovers before timeout`, () => {
+      vi.spyOn(publisher, 'restartIce').mockResolvedValue();
+      vi.useFakeTimers();
+
+      // @ts-ignore
+      publisher['pc'].iceConnectionState = 'disconnected';
+      publisher['onIceConnectionStateChange']();
+      // @ts-ignore
+      publisher['pc'].iceConnectionState = 'connected';
+
+      vi.runAllTimers();
+      expect(publisher.restartIce).not.toHaveBeenCalled();
+    });
   });
 });