@stream-io/video-client 1.49.0 → 1.51.0

package/src/helpers/__tests__/TrackSubscriptionManager.test.ts

@@ -0,0 +1,310 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { TrackSubscriptionManager } from '../TrackSubscriptionManager';
+import { CallState } from '../../store';
+import { Tracer } from '../../stats';
+import { DebounceType } from '../../types';
+import { TrackType } from '../../gen/video/sfu/models/models';
+import type { StreamSfuClient } from '../../StreamSfuClient';
+
+describe('TrackSubscriptionManager', () => {
+  let state: CallState;
+  let tracer: Tracer;
+  let manager: TrackSubscriptionManager;
+  let updateSubscriptions: ReturnType<typeof vi.fn>;
+  let sfuClient: Pick<StreamSfuClient, 'updateSubscriptions'>;
+
+  const addParticipant = (
+    sessionId: string,
+    overrides: Partial<{
+      userId: string;
+      publishedTracks: TrackType[];
+      videoDimension: { width: number; height: number };
+      screenShareDimension: { width: number; height: number };
+      isLocalParticipant: boolean;
+    }> = {},
+  ) => {
+    state.updateOrAddParticipant(
+      sessionId,
+      fromPartial({
+        sessionId,
+        userId: overrides.userId ?? `user-${sessionId}`,
+        publishedTracks: overrides.publishedTracks ?? [],
+        videoDimension: overrides.videoDimension,
+        screenShareDimension: overrides.screenShareDimension,
+        isLocalParticipant: overrides.isLocalParticipant,
+      }),
+    );
+  };
+
+  beforeEach(() => {
+    state = new CallState();
+    tracer = new Tracer('test');
+    manager = new TrackSubscriptionManager(state, tracer);
+    updateSubscriptions = vi.fn().mockResolvedValue(undefined);
+    sfuClient = { updateSubscriptions };
+    manager.setSfuClient(sfuClient as StreamSfuClient);
+  });
+
+  // ---------------------------------------------------------------------
+  // subscriptions getter
+  // ---------------------------------------------------------------------
+
+  it('subscriptions returns empty for a call with no remote participants', () => {
+    expect(manager.subscriptions).toEqual([]);
+  });
+
+  it('subscriptions returns one VIDEO entry per published remote video track, skipping the local participant', () => {
+    addParticipant('local', {
+      isLocalParticipant: true,
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 640, height: 480 },
+    });
+    addParticipant('remote-a', {
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 320, height: 240 },
+    });
+    addParticipant('remote-b', {
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 1280, height: 720 },
+    });
+
+    const subs = manager.subscriptions;
+    expect(subs).toHaveLength(2);
+    expect(subs.every((s) => s.sessionId !== 'local')).toBe(true);
+    expect(subs.map((s) => s.trackType)).toEqual([
+      TrackType.VIDEO,
+      TrackType.VIDEO,
+    ]);
+    expect(subs.find((s) => s.sessionId === 'remote-a')?.dimension).toEqual({
+      width: 320,
+      height: 240,
+    });
+  });
+
+  it('subscriptions includes SCREEN_SHARE + SCREEN_SHARE_AUDIO entries when published', () => {
+    addParticipant('presenter', {
+      publishedTracks: [
+        TrackType.VIDEO,
+        TrackType.SCREEN_SHARE,
+        TrackType.SCREEN_SHARE_AUDIO,
+      ],
+      videoDimension: { width: 320, height: 240 },
+      screenShareDimension: { width: 1920, height: 1080 },
+    });
+
+    const subs = manager.subscriptions;
+    expect(subs).toHaveLength(3);
+    const trackTypes = new Set(subs.map((s) => s.trackType));
+    expect(trackTypes.has(TrackType.VIDEO)).toBe(true);
+    expect(trackTypes.has(TrackType.SCREEN_SHARE)).toBe(true);
+    expect(trackTypes.has(TrackType.SCREEN_SHARE_AUDIO)).toBe(true);
+  });
+
+  // ---------------------------------------------------------------------
+  // setOverrides
+  // ---------------------------------------------------------------------
+
+  it('applies a global override with a preferred dimension to every remote video subscription', () => {
+    addParticipant('a', {
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 320, height: 240 },
+    });
+    addParticipant('b', {
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 320, height: 240 },
+    });
+
+    manager.setOverrides({
+      enabled: true,
+      dimension: { width: 1280, height: 720 },
+    });
+
+    const subs = manager.subscriptions;
+    expect(subs).toHaveLength(2);
+    expect(subs.every((s) => s.dimension?.width === 1280)).toBe(true);
+    expect(subs.every((s) => s.dimension?.height === 720)).toBe(true);
+  });
+
+  it('applies a per-session override only to listed participants', () => {
+    addParticipant('a', {
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 320, height: 240 },
+    });
+    addParticipant('b', {
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 320, height: 240 },
+    });
+
+    manager.setOverrides(
+      { enabled: true, dimension: { width: 1280, height: 720 } },
+      ['a'],
+    );
+
+    const subs = manager.subscriptions;
+    const a = subs.find((s) => s.sessionId === 'a');
+    const b = subs.find((s) => s.sessionId === 'b');
+    expect(a?.dimension).toEqual({ width: 1280, height: 720 });
+    expect(b?.dimension).toEqual({ width: 320, height: 240 });
+  });
+
+  it('drops video from the subscription list when the override sets enabled=false globally', () => {
+    addParticipant('a', {
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 320, height: 240 },
+    });
+
+    manager.setOverrides({ enabled: false });
+
+    expect(manager.subscriptions).toEqual([]);
+  });
+
+  // ---------------------------------------------------------------------
+  // apply(): debouncing + SFU push
+  // ---------------------------------------------------------------------
+
+  it('apply() debounces rapid calls into one SFU RPC with the exact subscription payload', () => {
+    vi.useFakeTimers();
+    addParticipant('a', {
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 320, height: 240 },
+    });
+
+    manager.apply(DebounceType.FAST);
+    manager.apply(DebounceType.FAST);
+    manager.apply(DebounceType.FAST);
+
+    expect(updateSubscriptions).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(DebounceType.FAST);
+    expect(updateSubscriptions).toHaveBeenCalledTimes(1);
+    const [payload] = updateSubscriptions.mock.calls[0];
+    expect(payload).toEqual([
+      {
+        userId: 'user-a',
+        sessionId: 'a',
+        trackType: TrackType.VIDEO,
+        dimension: { width: 320, height: 240 },
+      },
+    ]);
+    vi.useRealTimers();
+  });
+
+  it('apply(0) fires synchronously - no timer involved - with the exact subscription payload', () => {
+    addParticipant('a', {
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 320, height: 240 },
+    });
+
+    // DebounceType is a numeric enum; the implementation uses a truthy
+    // check, so `0` takes the synchronous branch.
+    manager.apply(0 as DebounceType);
+
+    expect(updateSubscriptions).toHaveBeenCalledTimes(1);
+    const [payload] = updateSubscriptions.mock.calls[0];
+    expect(payload).toEqual([
+      {
+        userId: 'user-a',
+        sessionId: 'a',
+        trackType: TrackType.VIDEO,
+        dimension: { width: 320, height: 240 },
+      },
+    ]);
+  });
+
+  it('apply() with DebounceType.SLOW (default) fires after 1200ms', () => {
+    vi.useFakeTimers();
+    addParticipant('a', {
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 320, height: 240 },
+    });
+
+    manager.apply();
+    expect(updateSubscriptions).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(DebounceType.SLOW);
+    expect(updateSubscriptions).toHaveBeenCalledTimes(1);
+    vi.useRealTimers();
+  });
+
+  // ---------------------------------------------------------------------
+  // dispose() cancels pending timeout
+  // ---------------------------------------------------------------------
+
+  it('dispose() cancels a pending debounced push: no RPC fires after dispose', () => {
+    vi.useFakeTimers();
+    addParticipant('a', {
+      publishedTracks: [TrackType.VIDEO],
+      videoDimension: { width: 320, height: 240 },
+    });
+
+    manager.apply(DebounceType.FAST);
+    manager.dispose();
+    vi.advanceTimersByTime(DebounceType.FAST * 2);
+
+    expect(updateSubscriptions).not.toHaveBeenCalled();
+    vi.useRealTimers();
+  });
+
+  // ---------------------------------------------------------------------
+  // incomingVideoSettings$
+  // ---------------------------------------------------------------------
+
+  it('incomingVideoSettings$ reflects global + per-session overrides', () => {
+    let latest: unknown;
+    const sub = manager.incomingVideoSettings$.subscribe((v) => {
+      latest = v;
+    });
+
+    manager.setOverrides({
+      enabled: true,
+      dimension: { width: 1280, height: 720 },
+    });
+    manager.setOverrides({ enabled: false }, ['muted-session']);
+
+    expect(latest).toMatchObject({
+      enabled: true,
+      preferredResolution: { width: 1280, height: 720 },
+      participants: {
+        'muted-session': { enabled: false, preferredResolution: undefined },
+      },
+    });
+    // isParticipantVideoEnabled helper honors per-session + global precedence.
+    expect(
+      (
+        latest as { isParticipantVideoEnabled: (id: string) => boolean }
+      ).isParticipantVideoEnabled('muted-session'),
+    ).toBe(false);
+    expect(
+      (
+        latest as { isParticipantVideoEnabled: (id: string) => boolean }
+      ).isParticipantVideoEnabled('other-session'),
+    ).toBe(true);
+
+    sub.unsubscribe();
+  });
+
+  it('incomingVideoSettings$ replays the latest value to a late subscriber (shareReplay(1))', () => {
+    // Set state BEFORE any subscriber attaches.
+    manager.setOverrides({
+      enabled: true,
+      dimension: { width: 1280, height: 720 },
+    });
+    manager.setOverrides({ enabled: false }, ['muted-session']);
+
+    let latest: unknown;
+    const sub = manager.incomingVideoSettings$.subscribe((v) => {
+      latest = v;
+    });
+
+    // The late subscriber must receive the buffered value synchronously
+    // on attach without needing a fresh setOverrides call.
+    expect(latest).toMatchObject({
+      enabled: true,
+      preferredResolution: { width: 1280, height: 720 },
+      participants: {
+        'muted-session': { enabled: false, preferredResolution: undefined },
+      },
+    });
+
+    sub.unsubscribe();
+  });
+});

package/src/helpers/__tests__/ViewportTracker.test.ts

@@ -0,0 +1,83 @@
+/**
+ * @vitest-environment happy-dom
+ */
+
+import '../../rtc/__tests__/mocks/webrtc.mocks';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Call } from '../../Call';
+import { StreamClient } from '../../coordinator/connection/client';
+import { StreamVideoWriteableStateStore } from '../../store';
+import { noopComparator } from '../../sorting';
+import { VisibilityState } from '../../types';
+import { ViewportTracker } from '../ViewportTracker';
+
+describe('ViewportTracker', () => {
+  let call: Call;
+  let viewportTracker: ViewportTracker;
+
+  beforeEach(() => {
+    call = new Call({
+      id: 'id',
+      type: 'default',
+      streamClient: new StreamClient('api-key', {
+        devicePersistence: { enabled: false },
+      }),
+      clientStore: new StreamVideoWriteableStateStore(),
+    });
+    call.setSortParticipantsBy(noopComparator());
+    viewportTracker = call.viewportTracker!;
+  });
+
+  it('is constructed by Call and exposed as call.viewportTracker', () => {
+    expect(viewportTracker).toBeInstanceOf(ViewportTracker);
+  });
+
+  it('updates participant viewportVisibilityState as visibility changes', () => {
+    let visibilityHandler:
+      | ((entry: IntersectionObserverEntry) => void)
+      | undefined;
+    vi.spyOn(viewportTracker, 'observe').mockImplementation((_el, handler) => {
+      visibilityHandler = handler;
+      return vi.fn();
+    });
+
+    // @ts-expect-error incomplete data
+    call.state.updateOrAddParticipant('session-id', {
+      userId: 'user-id',
+      sessionId: 'session-id',
+      publishedTracks: [],
+    });
+
+    const element = document.createElement('div');
+    const untrack = viewportTracker.trackElementVisibility(
+      element,
+      'session-id',
+      'videoTrack',
+    );
+
+    expect(visibilityHandler).toBeDefined();
+    expect(viewportTracker.observe).toHaveBeenCalledWith(
+      element,
+      expect.any(Function),
+    );
+
+    visibilityHandler!({ isIntersecting: true } as IntersectionObserverEntry);
+    expect(
+      call.state.findParticipantBySessionId('session-id')
+        ?.viewportVisibilityState?.videoTrack,
+    ).toBe(VisibilityState.VISIBLE);
+
+    visibilityHandler!({ isIntersecting: false } as IntersectionObserverEntry);
+    expect(
+      call.state.findParticipantBySessionId('session-id')
+        ?.viewportVisibilityState?.videoTrack,
+    ).toBe(VisibilityState.INVISIBLE);
+
+    untrack();
+    expect(
+      call.state.findParticipantBySessionId('session-id')
+        ?.viewportVisibilityState?.videoTrack,
+    ).toBe(VisibilityState.UNKNOWN);
+  });
+});

package/src/helpers/__tests__/browsers.test.ts

@@ -1,5 +1,11 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { isChrome, isFirefox, isSafari, isSupportedBrowser } from '../browsers';
+import {
+  isChrome,
+  isFirefox,
+  isSafari,
+  isSupportedBrowser,
+  isWebKit,
+} from '../browsers';
 import { getClientDetails } from '../client-details';
 import { ClientDetails } from '../../gen/video/sfu/models/models';
 
@@ -31,6 +37,84 @@ describe('browsers', () => {
     });
   });
 
+  describe('isWebKit', () => {
+    it('should return false for an empty user agent', () => {
+      expect(isWebKit()).toBe(false);
+    });
+
+    it('should return true for Safari on macOS', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15';
+      expect(isWebKit()).toBe(true);
+    });
+
+    it('should return true for Safari on iOS', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1';
+      expect(isWebKit()).toBe(true);
+    });
+
+    it('should return true for the default iOS WKWebView (no "Safari" token)', () => {
+      // The key case isSafari misses: default WKWebView UA omits the
+      // Safari token unless the host sets `applicationNameForUserAgent`.
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148';
+      expect(isWebKit()).toBe(true);
+    });
+
+    it('should return false for Chrome on macOS', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';
+      expect(isWebKit()).toBe(false);
+    });
+
+    it('should return true for Chrome on iOS (CriOS) — still WKWebView underneath', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/120.0.0.0 Mobile/15E148 Safari/604.1';
+      expect(isWebKit()).toBe(true);
+    });
+
+    it('should return true for Edge on iOS (EdgiOS) — still WKWebView underneath', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 EdgiOS/120.0.0.0 Mobile/15E148 Safari/604.1';
+      expect(isWebKit()).toBe(true);
+    });
+
+    it('should return true for Opera on iOS (OPiOS) — still WKWebView underneath', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 OPiOS/16.0.0 Mobile/15E148 Safari/9537.53';
+      expect(isWebKit()).toBe(true);
+    });
+
+    it('should return true for Firefox on iOS (FxiOS) — still WKWebView underneath', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/120.0 Mobile/15E148 Safari/605.1.15';
+      expect(isWebKit()).toBe(true);
+    });
+
+    it('should return false for Firefox on desktop (no AppleWebKit token)', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0';
+      expect(isWebKit()).toBe(false);
+    });
+
+    it('should return false for Android Chrome', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36';
+      expect(isWebKit()).toBe(false);
+    });
+  });
+
   describe('isFirefox', () => {
     it('should return false if navigator is undefined', () => {
       expect(isFirefox()).toBe(false);

package/src/helpers/browsers.ts

@@ -8,6 +8,30 @@ export const isSafari = () => {
   return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');
 };
 
+/**
+ * Checks whether the current runtime is a WebKit-engine browser.
+ *
+ * Returns true for desktop Safari, iOS Safari, bare iOS WKWebView hosts
+ * (in-app browsers, React Native WebView, Tauri-on-macOS, etc.), and for
+ * Chromium / Gecko-branded iOS browsers (`CriOS`, `EdgiOS`, `OPiOS`,
+ * `FxiOS`) since Apple forces every iOS browser onto WKWebView and they
+ * share the underlying WebKit quirks.
+ *
+ * Returns false for desktop Chromium-based browsers (which reuse the
+ * `AppleWebKit/` token in their UA) and Android.
+ */
+export const isWebKit = () => {
+  if (typeof navigator === 'undefined') return false;
+  const ua = navigator.userAgent || '';
+  if (!/AppleWebKit\//.test(ua)) return false;
+  // Desktop Chromium reuses the AppleWebKit/ token. The `Chrome/` and
+  // `Chromium/` markers are only present on desktop Chromium builds
+  // (their iOS counterparts use `CriOS/` instead). `Android` rules out
+  // the mobile Blink stack.
+  const regExp = /Chrome\/|Chromium\/|Android/;
+  return !regExp.test(ua);
+};
+
 /**
  * Checks whether the current browser is Firefox.
  */

package/src/helpers/concurrency.ts

@@ -3,8 +3,10 @@ interface PendingPromise {
   onContinued: () => void;
 }
 
+type TagKey = string | symbol | object;
+
 type AsyncWrapper<P extends unknown[], T> = (
-  tag: string | symbol,
+  tag: TagKey,
   cb: (...args: P) => Promise<T>,
 ) => {
   cb: () => Promise<T>;
@@ -41,13 +43,13 @@ export const withoutConcurrency = createRunner(wrapWithContinuationTracking);
  */
 export const withCancellation = createRunner(wrapWithCancellation);
 
-const pendingPromises = new Map<string | symbol, PendingPromise>();
+const pendingPromises = new Map<TagKey, PendingPromise>();
 
-export function hasPending(tag: string | symbol) {
+export function hasPending(tag: TagKey) {
   return pendingPromises.has(tag);
 }
 
-export async function settled(tag: string | symbol) {
+export async function settled(tag: TagKey) {
   let pending: PendingPromise | undefined;
   while ((pending = pendingPromises.get(tag))) {
     await pending.promise;
@@ -66,7 +68,7 @@ export async function settled(tag: string | symbol) {
  * is defined by the wrapper.
  */
 function createRunner<P extends unknown[], T>(wrapper: AsyncWrapper<P, T>) {
-  return function run(tag: string | symbol, cb: (...args: P) => Promise<T>) {
+  return function run(tag: TagKey, cb: (...args: P) => Promise<T>) {
     const { cb: wrapped, onContinued } = wrapper(tag, cb);
     const pending = pendingPromises.get(tag);
     pending?.onContinued();
@@ -83,10 +85,7 @@ function createRunner<P extends unknown[], T>(wrapper: AsyncWrapper<P, T>) {
  * if the function is the last in the queue, it cleans up the whole chain
  * of promises after finishing.
  */
-function wrapWithContinuationTracking<T>(
-  tag: string | symbol,
-  cb: () => Promise<T>,
-) {
+function wrapWithContinuationTracking<T>(tag: TagKey, cb: () => Promise<T>) {
   let hasContinuation = false;
   const wrapped = () =>
     cb().finally(() => {
@@ -108,7 +107,7 @@ function wrapWithContinuationTracking<T>(
  *    of promises after finishing.
  */
 function wrapWithCancellation<T>(
-  tag: string | symbol,
+  tag: TagKey,
   cb: (signal: AbortSignal) => Promise<T | 'canceled'>,
 ) {
   const ac = new AbortController();

package/src/rtc/BasePeerConnection.ts

@@ -42,7 +42,7 @@ export abstract class BasePeerConnection {
   private iceRestartTimeout?: NodeJS.Timeout;
   private preConnectStuckTimeout?: NodeJS.Timeout;
   protected isIceRestarting = false;
-  private isDisposed = false;
+  protected isDisposed = false;
 
   protected trackIdToTrackType = new Map<string, TrackType>();
 
@@ -115,7 +115,7 @@ export abstract class BasePeerConnection {
   /**
    * Disposes the `RTCPeerConnection` instance.
    */
-  dispose() {
+  async dispose(): Promise<void> {
     clearTimeout(this.iceRestartTimeout);
     this.iceRestartTimeout = undefined;
     clearTimeout(this.preConnectStuckTimeout);
@@ -141,6 +141,10 @@ export abstract class BasePeerConnection {
       this.onIceConnectionStateChange,
     );
     pc.removeEventListener('icegatheringstatechange', this.onIceGatherChange);
+    pc.removeEventListener(
+      'connectionstatechange',
+      this.onConnectionStateChange,
+    );
     this.unsubscribeIceTrickle?.();
     this.subscriptions.forEach((unsubscribe) => unsubscribe());
     this.subscriptions = [];
@@ -183,7 +187,7 @@ export abstract class BasePeerConnection {
     const getTag = () => this.tag;
     this.subscriptions.push(
       this.dispatcher.on(event, getTag, (e) => {
-        const lockKey = `pc.${this.lock}.${event}`;
+        const lockKey = this.eventLockKey(event);
         withoutConcurrency(lockKey, async () => fn(e)).catch((err) => {
           if (this.isDisposed) return;
           this.logger.warn(`Error handling ${event}`, err);
@@ -192,6 +196,14 @@ export abstract class BasePeerConnection {
     );
   };
 
+  /**
+   * Returns the per-event `withoutConcurrency` tag used to serialize the
+   * dispatcher handler for `event` on this peer connection.
+   */
+  protected eventLockKey = (event: keyof AllSfuEvents): string => {
+    return `pc.${this.lock}.${event}`;
+  };
+
   /**
    * Appends the trickled ICE candidates to the `RTCPeerConnection`.
    */