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

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

@@ -1,12 +1,13 @@
 import './mocks/webrtc.mocks';
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { Dispatcher } from '../Dispatcher';
+import { DispatchableMessage, Dispatcher } from '../Dispatcher';
 import { StreamSfuClient } from '../../StreamSfuClient';
 import { Subscriber } from '../Subscriber';
 import { CallState } from '../../store';
 import { SfuEvent } from '../../gen/video/sfu/event/events';
-import { PeerType } from '../../gen/video/sfu/models/models';
+import { PeerType, TrackType } from '../../gen/video/sfu/models/models';
+import { IceTrickleBuffer } from '../IceTrickleBuffer';
 
 vi.mock('../../StreamSfuClient', () => {
   console.log('MOCKING StreamSfuClient');
@@ -25,20 +26,27 @@ describe('Subscriber', () => {
     dispatcher = new Dispatcher();
     sfuClient = new StreamSfuClient({
       dispatcher,
-      sfuServer: {
-        url: 'https://getstream.io/',
-        ws_endpoint: 'https://getstream.io/ws',
-        edge_name: 'sfu-1',
+      sessionId: 'sessionId',
+      logTag: 'logTag',
+      credentials: {
+        server: {
+          url: 'https://getstream.io/',
+          ws_endpoint: 'https://getstream.io/ws',
+          edge_name: 'sfu-1',
+        },
+        token: 'token',
+        ice_servers: [],
       },
-      token: 'token',
     });
+    // @ts-expect-error readonly field
+    sfuClient.iceTrickleBuffer = new IceTrickleBuffer();
 
     subscriber = new Subscriber({
       sfuClient,
       dispatcher,
       state,
       connectionConfig: { iceServers: [] },
-      iceRestartDelay: 100,
+      logTag: 'test',
     });
   });
 
@@ -48,82 +56,6 @@ describe('Subscriber', () => {
     dispatcher.offAll();
   });
 
-  describe('Subscriber migration', () => {
-    it('should update the sfuClient and create a new peer connection', 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 newConnectionConfig = { iceServers: [] };
-
-      const oldPeerConnection = subscriber['pc'];
-      vi.spyOn(oldPeerConnection, 'getReceivers').mockReturnValue([]);
-
-      await subscriber.migrateTo(newSfuClient, newConnectionConfig);
-      const newPeerConnection = subscriber['pc'];
-
-      expect(subscriber['sfuClient']).toBe(newSfuClient);
-      expect(newPeerConnection).not.toBe(oldPeerConnection);
-    });
-
-    it('should close the old peer connection once the new one connects', async () => {
-      let onConnectionStateChange: () => void = () => {};
-      let onTrack: (e: RTCTrackEvent) => void = () => {};
-      // @ts-ignore
-      vi.spyOn(subscriber, 'createPeerConnection').mockImplementation(() => {
-        const pc = new RTCPeerConnection();
-        vi.spyOn(pc, 'addEventListener').mockImplementation((event, cb) => {
-          if (event === 'connectionstatechange') {
-            // @ts-ignore
-            onConnectionStateChange = cb;
-          } else if (event === 'track') {
-            // @ts-ignore
-            onTrack = cb;
-          }
-        });
-        return pc;
-      });
-
-      const oldPeerConnection = subscriber['pc'];
-      vi.spyOn(oldPeerConnection, 'getReceivers').mockReturnValue([]);
-      vi.spyOn(oldPeerConnection, 'close');
-
-      await subscriber.migrateTo(sfuClient, { iceServers: [] });
-
-      const newPeerConnection = subscriber['pc'];
-      vi.spyOn(newPeerConnection, 'removeEventListener');
-      // @ts-ignore
-      newPeerConnection.connectionState = 'connected';
-
-      expect(onConnectionStateChange).toBeDefined();
-      expect(oldPeerConnection.close).not.toHaveBeenCalled();
-      onConnectionStateChange();
-
-      // @ts-ignore
-      onTrack(
-        // @ts-ignore
-        new RTCTrackEvent('video', {
-          track: new MediaStreamTrack(),
-        }),
-      );
-
-      expect(newPeerConnection.removeEventListener).toHaveBeenCalledWith(
-        'connectionstatechange',
-        onConnectionStateChange,
-      );
-      expect(newPeerConnection.removeEventListener).toHaveBeenCalledWith(
-        'track',
-        onTrack,
-      );
-      expect(oldPeerConnection.close).toHaveBeenCalled();
-    });
-  });
-
   describe('Subscriber ICE restart', () => {
     it('should perform ICE restart when iceRestart event is received', () => {
       sfuClient.iceRestart = vi.fn();
@@ -135,7 +67,7 @@ describe('Subscriber', () => {
               peerType: PeerType.SUBSCRIBER,
             },
           },
-        }),
+        }) as DispatchableMessage<'iceRestart'>,
       );
 
       expect(sfuClient.iceRestart).toHaveBeenCalledWith({
@@ -153,7 +85,7 @@ describe('Subscriber', () => {
               peerType: PeerType.PUBLISHER_UNSPECIFIED,
             },
           },
-        }),
+        }) as DispatchableMessage<'iceRestart'>,
       );
 
       expect(sfuClient.iceRestart).not.toHaveBeenCalled();
@@ -187,27 +119,59 @@ describe('Subscriber', () => {
 
     it(`should perform ICE restart when connection state changes to 'disconnected'`, () => {
       vi.spyOn(subscriber, 'restartIce').mockResolvedValue();
-      vi.useFakeTimers();
-
       // @ts-ignore
       subscriber['pc'].iceConnectionState = 'disconnected';
       subscriber['onIceConnectionStateChange']();
-      vi.runAllTimers();
       expect(subscriber.restartIce).toHaveBeenCalled();
     });
+  });
 
-    it(`should bail-out from ICE restart once connection recovers before timeout`, () => {
-      vi.spyOn(subscriber, 'restartIce').mockResolvedValue();
-      vi.useFakeTimers();
+  describe('OnTrack', () => {
+    it('should add unknown tracks to the to the call state', () => {
+      const mediaStream = new MediaStream();
+      const mediaStreamTrack = new MediaStreamTrack();
+      // @ts-ignore - mock
+      mediaStream.id = '123:TRACK_TYPE_VIDEO';
+
+      const registerOrphanedTrackSpy = vi.spyOn(state, 'registerOrphanedTrack');
+      const updateParticipantSpy = vi.spyOn(state, 'updateParticipant');
+
+      const onTrack = subscriber['handleOnTrack'];
+      // @ts-expect-error - incomplete mock
+      onTrack({ streams: [mediaStream], track: mediaStreamTrack });
+
+      expect(registerOrphanedTrackSpy).toHaveBeenCalledWith({
+        id: mediaStream.id,
+        trackLookupPrefix: '123',
+        track: mediaStream,
+        trackType: TrackType.VIDEO,
+      });
+      expect(updateParticipantSpy).not.toHaveBeenCalled();
+    });
 
-      // @ts-ignore
-      subscriber['pc'].iceConnectionState = 'disconnected';
-      subscriber['onIceConnectionStateChange']();
-      // @ts-ignore
-      subscriber['pc'].iceConnectionState = 'connected';
+    it('should assign known tracks to the participant', () => {
+      const mediaStream = new MediaStream();
+      const mediaStreamTrack = new MediaStreamTrack();
+      // @ts-ignore - mock
+      mediaStream.id = '123:TRACK_TYPE_VIDEO';
 
-      vi.runAllTimers();
-      expect(subscriber.restartIce).not.toHaveBeenCalled();
+      const registerOrphanedTrackSpy = vi.spyOn(state, 'registerOrphanedTrack');
+      const updateParticipantSpy = vi.spyOn(state, 'updateParticipant');
+
+      // @ts-expect-error - incomplete mock
+      state.updateOrAddParticipant('session-id', {
+        sessionId: 'session-id',
+        trackLookupPrefix: '123',
+      });
+
+      const onTrack = subscriber['handleOnTrack'];
+      // @ts-expect-error - incomplete mock
+      onTrack({ streams: [mediaStream], track: mediaStreamTrack });
+
+      expect(registerOrphanedTrackSpy).not.toHaveBeenCalled();
+      expect(updateParticipantSpy).toHaveBeenCalledWith('session-id', {
+        videoStream: mediaStream,
+      });
     });
   });
 });

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

@@ -59,7 +59,7 @@ describe('videoLayers', () => {
         height: height / 4,
         maxBitrate: targetBitrate / 4,
         scaleResolutionDownBy: 4,
-        maxFramerate: 20,
+        maxFramerate: 30,
       },
       {
         active: true,
@@ -68,7 +68,7 @@ describe('videoLayers', () => {
         height: height / 2,
         maxBitrate: targetBitrate / 2,
         scaleResolutionDownBy: 2,
-        maxFramerate: 25,
+        maxFramerate: 30,
       },
       {
         active: true,

package/src/rtc/helpers/rtcConfiguration.ts

@@ -0,0 +1,11 @@
+import { ICEServer } from '../../gen/coordinator';
+
+export const toRtcConfiguration = (config: ICEServer[]): RTCConfiguration => {
+  return {
+    iceServers: config.map((ice) => ({
+      urls: ice.urls,
+      username: ice.username,
+      credential: ice.password,
+    })),
+  };
+};

package/src/rtc/helpers/tracks.ts

@@ -1,10 +1,15 @@
 import { TrackType } from '../../gen/video/sfu/models/models';
-import type { StreamVideoParticipant } from '../../types';
 import { TrackMuteType } from '../../types';
+import { ensureExhausted } from '../../helpers/ensureExhausted';
 
 export const trackTypeToParticipantStreamKey = (
   trackType: TrackType,
-): keyof StreamVideoParticipant => {
+):
+  | 'audioStream'
+  | 'videoStream'
+  | 'screenShareStream'
+  | 'screenShareAudioStream'
+  | undefined => {
   switch (trackType) {
     case TrackType.SCREEN_SHARE:
       return 'screenShareStream';
@@ -17,12 +22,13 @@ export const trackTypeToParticipantStreamKey = (
     case TrackType.UNSPECIFIED:
       throw new Error('Track type is unspecified');
     default:
-      const exhaustiveTrackTypeCheck: never = trackType;
-      throw new Error(`Unknown track type: ${exhaustiveTrackTypeCheck}`);
+      ensureExhausted(trackType, 'Unknown track type');
   }
 };
 
-export const muteTypeToTrackType = (muteType: TrackMuteType): TrackType => {
+export const muteTypeToTrackType = (
+  muteType: TrackMuteType,
+): TrackType | undefined => {
   switch (muteType) {
     case 'audio':
       return TrackType.AUDIO;
@@ -33,7 +39,21 @@ export const muteTypeToTrackType = (muteType: TrackMuteType): TrackType => {
     case 'screenshare_audio':
       return TrackType.SCREEN_SHARE_AUDIO;
     default:
-      const exhaustiveMuteTypeCheck: never = muteType;
-      throw new Error(`Unknown mute type: ${exhaustiveMuteTypeCheck}`);
+      ensureExhausted(muteType, 'Unknown mute type');
+  }
+};
+
+export const toTrackType = (trackType: string): TrackType | undefined => {
+  switch (trackType) {
+    case 'TRACK_TYPE_AUDIO':
+      return TrackType.AUDIO;
+    case 'TRACK_TYPE_VIDEO':
+      return TrackType.VIDEO;
+    case 'TRACK_TYPE_SCREEN_SHARE':
+      return TrackType.SCREEN_SHARE;
+    case 'TRACK_TYPE_SCREEN_SHARE_AUDIO':
+      return TrackType.SCREEN_SHARE_AUDIO;
+    default:
+      return undefined;
   }
 };

package/src/rtc/signal.ts

@@ -1,4 +1,3 @@
-import WebSocket from 'isomorphic-ws';
 import { SfuEvent } from '../gen/video/sfu/event/events';
 import { getLogger } from '../logger';
 import { DispatchableMessage, SfuEventKinds } from './Dispatcher';
@@ -6,9 +5,10 @@ import { DispatchableMessage, SfuEventKinds } from './Dispatcher';
 export const createWebSocketSignalChannel = (opts: {
   endpoint: string;
   onMessage: <K extends SfuEventKinds>(message: DispatchableMessage<K>) => void;
+  logTag: string;
 }) => {
-  const logger = getLogger(['sfu-client']);
-  const { endpoint, onMessage } = opts;
+  const { endpoint, onMessage, logTag } = opts;
+  const logger = getLogger(['sfu-client-ws', logTag]);
   const ws = new WebSocket(endpoint);
   ws.binaryType = 'arraybuffer'; // do we need this?
 

package/src/rtc/videoLayers.ts

@@ -1,7 +1,5 @@
-import { getOSInfo } from '../client-details';
 import { ScreenShareSettings } from '../types';
 import { TargetResolutionResponse } from '../gen/shims';
-import { isReactNative } from '../helpers/platforms';
 
 export type OptimalVideoLayer = RTCRtpEncodingParameters & {
   width: number;
@@ -36,8 +34,6 @@ export const findOptimalVideoLayers = (
   const settings = videoTrack.getSettings();
   const { width: w = 0, height: h = 0 } = settings;
 
-  const isRNIos = isReactNative() && getOSInfo()?.name.toLowerCase() === 'ios';
-
   const maxBitrate = getComputedMaxBitrate(targetResolution, w, h);
   let downscaleFactor = 1;
   ['f', 'h', 'q'].forEach((rid) => {
@@ -52,12 +48,7 @@ export const findOptimalVideoLayers = (
       maxBitrate:
         Math.round(maxBitrate / downscaleFactor) || defaultBitratePerRid[rid],
       scaleResolutionDownBy: downscaleFactor,
-      // Simulcast on iOS React-Native requires all encodings to share the same framerate
-      maxFramerate: {
-        f: 30,
-        h: isRNIos ? 30 : 25,
-        q: isRNIos ? 30 : 20,
-      }[rid],
+      maxFramerate: 30,
     });
     downscaleFactor *= 2;
   });

package/src/stats/SfuStatsReporter.ts

@@ -65,6 +65,7 @@ export class SfuStatsReporter {
 
   start = () => {
     if (this.options.reporting_interval_ms <= 0) return;
+    clearInterval(this.intervalId);
     this.intervalId = setInterval(() => {
       this.run().catch((err) => {
         this.logger('warn', 'Failed to report stats', err);

package/src/store/CallState.ts

@@ -11,6 +11,7 @@ import {
   StreamVideoParticipant,
   StreamVideoParticipantPatch,
   StreamVideoParticipantPatches,
+  VisibilityState,
 } from '../types';
 import { CallStatsReport } from '../stats';
 import {
@@ -36,7 +37,13 @@ import {
   UserResponse,
   WSEvent,
 } from '../gen/coordinator';
-import { Pin } from '../gen/video/sfu/models/models';
+import { Timestamp } from '../gen/google/protobuf/timestamp';
+import { ReconnectDetails } from '../gen/video/sfu/event/events';
+import {
+  CallState as SfuCallState,
+  Pin,
+  TrackType,
+} from '../gen/video/sfu/models/models';
 import { Comparator, defaultSortPreset } from '../sorting';
 import { getLogger } from '../logger';
 import { hasScreenShare } from '../helpers/participantUtils';
@@ -105,6 +112,13 @@ const defaultEgress: EgressResponse = {
   rtmps: [],
 };
 
+type OrphanedTrack = {
+  id: string;
+  trackLookupPrefix: string;
+  trackType: TrackType;
+  track: MediaStream;
+};
+
 /**
  * Holds the state of the current call.
  * @react You don't have to use this class directly, as we are exposing the state through Hooks.
@@ -155,6 +169,12 @@ export class CallState {
     CallStatsReport | undefined
   >(undefined);
 
+  // These are tracks that were delivered to the Subscriber's onTrack event
+  // that we couldn't associate with a participant yet.
+  // This happens when the participantJoined event hasn't been received yet.
+  // We keep these tracks around until we can associate them with a participant.
+  private orphanedTracks: OrphanedTrack[] = [];
+
   // Derived state
 
   /**
@@ -427,7 +447,6 @@ export class CallState {
       'call.closed_caption': undefined,
       'call.deleted': undefined,
       'call.permission_request': undefined,
-      'call.recording_failed': undefined,
       'call.recording_ready': undefined,
       'call.transcription_ready': undefined,
       'call.user_muted': undefined,
@@ -470,6 +489,8 @@ export class CallState {
         this.setCurrentValue(this.recordingSubject, true),
       'call.recording_stopped': () =>
         this.setCurrentValue(this.recordingSubject, false),
+      'call.recording_failed': () =>
+        this.setCurrentValue(this.recordingSubject, false),
       'call.rejected': (e) => this.updateFromCallResponse(e.call),
       'call.ring': (e) => this.updateFromCallResponse(e.call),
       'call.missed': (e) => this.updateFromCallResponse(e.call),
@@ -910,7 +931,7 @@ export class CallState {
    * @returns all participants, with all patch applied.
    */
   updateParticipants = (patch: StreamVideoParticipantPatches) => {
-    if (Object.keys(patch).length === 0) return;
+    if (Object.keys(patch).length === 0) return this.participants;
     return this.setParticipants((participants) =>
       participants.map((p) => {
         const thePatch = patch[p.sessionId];
@@ -980,6 +1001,48 @@ export class CallState {
     );
   };
 
+  /**
+   * Adds an orphaned track to the call state.
+   *
+   * @internal
+   *
+   * @param orphanedTrack the orphaned track to add.
+   */
+  registerOrphanedTrack = (orphanedTrack: OrphanedTrack) => {
+    this.orphanedTracks.push(orphanedTrack);
+  };
+
+  /**
+   * Removes an orphaned track from the call state.
+   *
+   * @internal
+   *
+   * @param id the ID of the orphaned track to remove.
+   */
+  removeOrphanedTrack = (id: string) => {
+    this.orphanedTracks = this.orphanedTracks.filter((o) => o.id !== id);
+  };
+
+  /**
+   * Takes all orphaned tracks with the given track lookup prefix.
+   * All orphaned tracks with the given track lookup prefix are removed from the call state.
+   *
+   * @internal
+   *
+   * @param trackLookupPrefix the track lookup prefix to match the orphaned tracks by.
+   */
+  takeOrphanedTracks = (trackLookupPrefix: string): OrphanedTrack[] => {
+    const orphans = this.orphanedTracks.filter(
+      (orphan) => orphan.trackLookupPrefix === trackLookupPrefix,
+    );
+    if (orphans.length > 0) {
+      this.orphanedTracks = this.orphanedTracks.filter(
+        (orphan) => orphan.trackLookupPrefix !== trackLookupPrefix,
+      );
+    }
+    return orphans;
+  };
+
   /**
    * Updates the call state with the data received from the server.
    *
@@ -1011,6 +1074,51 @@ export class CallState {
     this.setCurrentValue(this.thumbnailsSubject, call.thumbnails);
   };
 
+  /**
+   * Updates the call state with the data received from the SFU server.
+   *
+   * @internal
+   *
+   * @param callState the call state from the SFU server.
+   * @param currentSessionId the session ID of the current user.
+   * @param reconnectDetails optional reconnect details.
+   */
+  updateFromSfuCallState = (
+    callState: SfuCallState,
+    currentSessionId: string,
+    reconnectDetails?: ReconnectDetails,
+  ) => {
+    const { participants, participantCount, startedAt, pins } = callState;
+    const localPublishedTracks =
+      reconnectDetails?.announcedTracks.map((t) => t.trackType) ?? [];
+    this.setParticipants(() => {
+      const participantLookup = this.getParticipantLookupBySessionId();
+      return participants.map<StreamVideoParticipant>((p) => {
+        // We need to preserve the local state of the participant
+        // (e.g. videoDimension, visibilityState, pinnedAt, etc.)
+        // as it doesn't exist on the server.
+        const existingParticipant = participantLookup[p.sessionId];
+        const isLocalParticipant = p.sessionId === currentSessionId;
+        return Object.assign({}, existingParticipant, p, {
+          isLocalParticipant,
+          publishedTracks: isLocalParticipant
+            ? localPublishedTracks
+            : p.publishedTracks,
+          viewportVisibilityState:
+            existingParticipant?.viewportVisibilityState ?? {
+              videoTrack: VisibilityState.UNKNOWN,
+              screenShareTrack: VisibilityState.UNKNOWN,
+            },
+        } satisfies Partial<StreamVideoParticipant>);
+      });
+    });
+
+    this.setParticipantCount(participantCount?.total || 0);
+    this.setAnonymousParticipantCount(participantCount?.anonymous || 0);
+    this.setStartedAt(startedAt ? Timestamp.toDate(startedAt) : new Date());
+    this.setServerSidePins(pins);
+  };
+
   private updateFromMemberRemoved = (event: CallMemberRemovedEvent) => {
     this.updateFromCallResponse(event.call);
     this.setCurrentValue(this.membersSubject, (members) =>

package/src/store/__tests__/CallState.test.ts

@@ -1,8 +1,9 @@
+import '../../rtc/__tests__/mocks/webrtc.mocks';
 import { describe, expect, it, vi } from 'vitest';
 import { anyNumber } from 'vitest-mock-extended';
 import { StreamVideoParticipant, VisibilityState } from '../../types';
 import { CallingState, CallState } from '../CallState';
-import { ConnectionQuality } from '../../gen/video/sfu/models/models';
+import { TrackType } from '../../gen/video/sfu/models/models';
 import {
   combineComparators,
   conditional,
@@ -463,40 +464,17 @@ describe('CallState', () => {
     describe('Call Permission Events', () => {
       it('handles call.permissions_updated', () => {
         const state = new CallState();
-        state.setParticipants([
-          {
-            userId: 'test',
-            name: 'test',
-            sessionId: 'test',
-            isDominantSpeaker: false,
-            isSpeaking: false,
-            audioLevel: 0,
-            image: '',
-            publishedTracks: [],
-            connectionQuality: ConnectionQuality.EXCELLENT,
-            roles: [],
-            trackLookupPrefix: '',
-            isLocalParticipant: true,
-          },
-        ]);
+        // @ts-expect-error incomplete data
+        state.setParticipants([{ userId: 'test', isLocalParticipant: true }]);
 
         state.updateFromEvent({
           type: 'call.permissions_updated',
-          created_at: '',
-          call_cid: 'development:12345',
           own_capabilities: [
             OwnCapability.SEND_AUDIO,
             OwnCapability.SEND_VIDEO,
           ],
-          user: {
-            id: 'test',
-            created_at: '',
-            role: '',
-            updated_at: '',
-            custom: {},
-            teams: [],
-            language: 'en',
-          },
+          // @ts-expect-error incomplete data
+          user: { id: 'test' },
         });
 
         expect(state.ownCapabilities).toEqual([
@@ -509,15 +487,8 @@ describe('CallState', () => {
           created_at: '',
           call_cid: 'development:12345',
           own_capabilities: [OwnCapability.SEND_VIDEO],
-          user: {
-            id: 'test',
-            created_at: '',
-            role: '',
-            updated_at: '',
-            custom: {},
-            teams: [],
-            language: 'en',
-          },
+          // @ts-expect-error incomplete data
+          user: { id: 'test' },
         });
         expect(state.ownCapabilities).toEqual([OwnCapability.SEND_VIDEO]);
       });
@@ -679,6 +650,16 @@ describe('CallState', () => {
         expect(state.recording).toBe(false);
       });
 
+      it('handles call.recording_failed events', () => {
+        const state = new CallState();
+        // @ts-expect-error incomplete data
+        state.updateFromEvent({ type: 'call.recording_started' });
+        expect(state.recording).toBe(true);
+        // @ts-expect-error incomplete data
+        state.updateFromEvent({ type: 'call.recording_failed' });
+        expect(state.recording).toBe(false);
+      });
+
       it('handles call.hls_broadcasting_started events', () => {
         const state = new CallState();
         state.updateFromCallResponse({
@@ -871,4 +852,44 @@ describe('CallState', () => {
       });
     });
   });
+
+  describe('orphaned tracks', () => {
+    it('registers orphaned tracks', () => {
+      const state = new CallState();
+      state.registerOrphanedTrack({
+        id: '123:TRACK_TYPE_VIDEO',
+        track: new MediaStream(),
+        trackLookupPrefix: '123',
+        trackType: TrackType.AUDIO,
+      });
+      expect(state['orphanedTracks'].length).toBe(1);
+    });
+
+    it('removes orphaned tracks once assigned', () => {
+      const state = new CallState();
+      state.registerOrphanedTrack({
+        id: '123:TRACK_TYPE_VIDEO',
+        track: new MediaStream(),
+        trackLookupPrefix: '123',
+        trackType: TrackType.VIDEO,
+      });
+      const orphans = state.takeOrphanedTracks('123');
+      expect(orphans.length).toBe(1);
+      expect(state['orphanedTracks'].length).toBe(0);
+    });
+
+    it('removes orphaned tracks', () => {
+      const state = new CallState();
+      const id = '123:TRACK_TYPE_VIDEO';
+      state.registerOrphanedTrack({
+        id,
+        track: new MediaStream(),
+        trackLookupPrefix: '123',
+        trackType: TrackType.VIDEO,
+      });
+      expect(state['orphanedTracks'].length).toBe(1);
+      state.removeOrphanedTrack(id);
+      expect(state['orphanedTracks'].length).toBe(0);
+    });
+  });
 });