@stream-io/video-client 1.13.1 → 1.15.0

package/src/rtc/Subscriber.ts

@@ -1,22 +1,10 @@
-import { StreamSfuClient } from '../StreamSfuClient';
-import { getIceCandidate } from './helpers/iceCandidate';
+import {
+  BasePeerConnection,
+  BasePeerConnectionOpts,
+} from './BasePeerConnection';
 import { PeerType } from '../gen/video/sfu/models/models';
 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;
-  onUnrecoverableError?: () => void;
-  logTag: string;
-};
 
 /**
  * A wrapper around the `RTCPeerConnection` that handles the incoming
@@ -24,138 +12,30 @@ export type SubscriberOpts = {
  *
  * @internal
  */
-export class Subscriber {
-  private readonly logger: Logger;
-  private pc: RTCPeerConnection;
-  private sfuClient: StreamSfuClient;
-  private state: CallState;
-
-  private readonly unregisterOnSubscriberOffer: () => void;
-  private readonly unregisterOnIceRestart: () => void;
-  private readonly onUnrecoverableError?: () => void;
-
-  private isIceRestarting = false;
-
+export class Subscriber extends BasePeerConnection {
   /**
    * Constructs a new `Subscriber` instance.
-   *
-   * @param sfuClient the SFU client to use.
-   * @param dispatcher the dispatcher to use.
-   * @param state the state of the call.
-   * @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,
-    onUnrecoverableError,
-    logTag,
-  }: SubscriberOpts) {
-    this.logger = getLogger(['Subscriber', logTag]);
-    this.sfuClient = sfuClient;
-    this.state = state;
-    this.onUnrecoverableError = onUnrecoverableError;
+  constructor(opts: BasePeerConnectionOpts) {
+    super(PeerType.SUBSCRIBER, opts);
+    this.pc.addEventListener('track', this.handleOnTrack);
 
-    this.pc = this.createPeerConnection(connectionConfig);
-
-    const subscriberOfferConcurrencyTag = Symbol('subscriberOffer');
-    this.unregisterOnSubscriberOffer = dispatcher.on(
-      'subscriberOffer',
-      (subscriberOffer) => {
-        withoutConcurrency(subscriberOfferConcurrencyTag, () => {
-          return this.negotiate(subscriberOffer);
-        }).catch((err) => {
-          this.logger('error', `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('error', `ICERestart failed`, err);
-        this.onUnrecoverableError?.();
+    this.on('subscriberOffer', async (subscriberOffer) => {
+      return this.negotiate(subscriberOffer).catch((err) => {
+        this.logger('error', `Negotiation failed.`, err);
       });
     });
   }
 
-  /**
-   * Creates a new `RTCPeerConnection` instance with the given configuration.
-   *
-   * @param connectionConfig the connection configuration to use.
-   */
-  private createPeerConnection = (connectionConfig?: RTCConfiguration) => {
-    const pc = new RTCPeerConnection(connectionConfig);
-    pc.addEventListener('icecandidate', this.onIceCandidate);
-    pc.addEventListener('track', this.handleOnTrack);
-
-    pc.addEventListener('icecandidateerror', this.onIceCandidateError);
-    pc.addEventListener(
-      'iceconnectionstatechange',
-      this.onIceConnectionStateChange,
-    );
-    pc.addEventListener(
-      'icegatheringstatechange',
-      this.onIceGatheringStateChange,
-    );
-
-    return pc;
-  };
-
-  /**
-   * 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 = () => {
-    this.unregisterOnSubscriberOffer();
-    this.unregisterOnIceRestart();
-
-    this.pc.removeEventListener('icecandidate', this.onIceCandidate);
+  detachEventHandlers() {
+    super.detachEventHandlers();
     this.pc.removeEventListener('track', this.handleOnTrack);
-    this.pc.removeEventListener('icecandidateerror', this.onIceCandidateError);
-    this.pc.removeEventListener(
-      'iceconnectionstatechange',
-      this.onIceConnectionStateChange,
-    );
-    this.pc.removeEventListener(
-      'icegatheringstatechange',
-      this.onIceGatheringStateChange,
-    );
-  };
-
-  /**
-   * Returns the result of the `RTCPeerConnection.getStats()` method
-   * @param selector
-   * @returns
-   */
-  getStats = (selector?: MediaStreamTrack | null | undefined) => {
-    return this.pc.getStats(selector);
-  };
-
-  /**
-   * Sets the SFU client to use.
-   *
-   * @param sfuClient the SFU client to use.
-   */
-  setSfuClient = (sfuClient: StreamSfuClient) => {
-    this.sfuClient = sfuClient;
-  };
+  }
 
   /**
    * Restarts the ICE connection and renegotiates with the SFU.
@@ -239,7 +119,18 @@ export class Subscriber {
       this.logger('error', `Unknown track type: ${rawTrackType}`);
       return;
     }
+
+    // get the previous stream to dispose it later
+    // usually this happens during migration, when the stream is replaced
+    // with a new one but the old one is still in the state
     const previousStream = participantToUpdate[streamKindProp];
+
+    // replace the previous stream with the new one, prevents flickering
+    this.state.updateParticipant(participantToUpdate.sessionId, {
+      [streamKindProp]: primaryStream,
+    });
+
+    // now, dispose the previous stream if it exists
     if (previousStream) {
       this.logger(
         'info',
@@ -250,26 +141,6 @@ export class Subscriber {
         previousStream.removeTrack(t);
       });
     }
-    this.state.updateParticipant(participantToUpdate.sessionId, {
-      [streamKindProp]: primaryStream,
-    });
-  };
-
-  private onIceCandidate = (e: RTCPeerConnectionIceEvent) => {
-    const { candidate } = e;
-    if (!candidate) {
-      this.logger('debug', 'null ice candidate');
-      return;
-    }
-
-    this.sfuClient
-      .iceTrickle({
-        iceCandidate: getIceCandidate(candidate),
-        peerType: PeerType.SUBSCRIBER,
-      })
-      .catch((err) => {
-        this.logger('warn', `ICETrickle failed`, err);
-      });
   };
 
   private negotiate = async (subscriberOffer: SubscriberOffer) => {
@@ -280,16 +151,7 @@ export class Subscriber {
       sdp: subscriberOffer.sdp,
     });
 
-    this.sfuClient.iceTrickleBuffer.subscriberCandidates.subscribe(
-      async (candidate) => {
-        try {
-          const iceCandidate = JSON.parse(candidate.iceCandidate);
-          await this.pc.addIceCandidate(iceCandidate);
-        } catch (e) {
-          this.logger('warn', `ICE candidate error`, [e, candidate]);
-        }
-      },
-    );
+    this.addTrickledIceCandidates();
 
     const answer = await this.pc.createAnswer();
     await this.pc.setLocalDescription(answer);
@@ -301,40 +163,4 @@ export class Subscriber {
 
     this.isIceRestarting = false;
   };
-
-  private onIceConnectionStateChange = () => {
-    const state = this.pc.iceConnectionState;
-    this.logger('debug', `ICE connection state changed`, state);
-
-    if (this.state.callingState === CallingState.RECONNECTING) return;
-
-    // do nothing when ICE is restarting
-    if (this.isIceRestarting) return;
-
-    if (state === 'failed' || state === 'disconnected') {
-      this.logger('debug', `Attempting to restart ICE`);
-      this.restartIce().catch((e) => {
-        this.logger('error', `ICE restart failed`, e);
-        this.onUnrecoverableError?.();
-      });
-    }
-  };
-
-  private onIceGatheringStateChange = () => {
-    this.logger(
-      'debug',
-      `ICE gathering state changed`,
-      this.pc.iceGatheringState,
-    );
-  };
-
-  private onIceCandidateError = (e: Event) => {
-    const errorMessage =
-      e instanceof RTCPeerConnectionIceErrorEvent &&
-      `${e.errorCode}: ${e.errorText}`;
-    const iceState = this.pc.iceConnectionState;
-    const logLevel =
-      iceState === 'connected' || iceState === 'checking' ? 'debug' : 'warn';
-    this.logger(logLevel, `ICE Candidate error`, errorMessage);
-  };
 }

package/src/rtc/TransceiverCache.ts

@@ -0,0 +1,120 @@
+import { PublishOption, TrackType } from '../gen/video/sfu/models/models';
+import { OptimalVideoLayer } from './videoLayers';
+
+type TransceiverId = {
+  publishOption: PublishOption;
+  transceiver: RTCRtpTransceiver;
+};
+type TrackLayersCache = {
+  publishOption: PublishOption;
+  layers: OptimalVideoLayer[];
+};
+
+export class TransceiverCache {
+  private readonly cache: TransceiverId[] = [];
+  private readonly layers: TrackLayersCache[] = [];
+
+  /**
+   * An array maintaining the order how transceivers were added to the peer connection.
+   * This is needed because some browsers (Firefox) don't reliably report
+   * trackId and `mid` parameters.
+   */
+  private readonly transceiverOrder: RTCRtpTransceiver[] = [];
+
+  /**
+   * Adds a transceiver to the cache.
+   */
+  add = (publishOption: PublishOption, transceiver: RTCRtpTransceiver) => {
+    this.cache.push({ publishOption, transceiver });
+    this.transceiverOrder.push(transceiver);
+  };
+
+  /**
+   * Gets the transceiver for the given publish option.
+   */
+  get = (publishOption: PublishOption): RTCRtpTransceiver | undefined => {
+    return this.findTransceiver(publishOption)?.transceiver;
+  };
+
+  /**
+   * Gets the last transceiver for the given track type and publish option id.
+   */
+  getWith = (trackType: TrackType, id: number) => {
+    return this.findTransceiver({ trackType, id })?.transceiver;
+  };
+
+  /**
+   * Checks if the cache has the given publish option.
+   */
+  has = (publishOption: PublishOption): boolean => {
+    return !!this.get(publishOption);
+  };
+
+  /**
+   * Finds the first transceiver that satisfies the given predicate.
+   */
+  find = (
+    predicate: (item: TransceiverId) => boolean,
+  ): TransceiverId | undefined => {
+    return this.cache.find(predicate);
+  };
+
+  /**
+   * Provides all the items in the cache.
+   */
+  items = (): TransceiverId[] => {
+    return this.cache;
+  };
+
+  /**
+   * Init index of the transceiver in the cache.
+   */
+  indexOf = (transceiver: RTCRtpTransceiver): number => {
+    return this.transceiverOrder.indexOf(transceiver);
+  };
+
+  /**
+   * Gets cached video layers for the given track.
+   */
+  getLayers = (
+    publishOption: PublishOption,
+  ): OptimalVideoLayer[] | undefined => {
+    const entry = this.layers.find(
+      (item) =>
+        item.publishOption.id === publishOption.id &&
+        item.publishOption.trackType === publishOption.trackType,
+    );
+    return entry?.layers;
+  };
+
+  /**
+   * Sets the video layers for the given track.
+   */
+  setLayers = (
+    publishOption: PublishOption,
+    layers: OptimalVideoLayer[] = [],
+  ) => {
+    const entry = this.findLayer(publishOption);
+    if (entry) {
+      entry.layers = layers;
+    } else {
+      this.layers.push({ publishOption, layers });
+    }
+  };
+
+  private findTransceiver = (publishOption: Partial<PublishOption>) => {
+    return this.cache.find(
+      (item) =>
+        item.publishOption.id === publishOption.id &&
+        item.publishOption.trackType === publishOption.trackType,
+    );
+  };
+
+  private findLayer = (publishOption: PublishOption) => {
+    return this.layers.find(
+      (item) =>
+        item.publishOption.id === publishOption.id &&
+        item.publishOption.trackType === publishOption.trackType,
+    );
+  };
+}