@stream-io/video-client 1.26.1 → 1.27.1

package/dist/index.browser.es.js

@@ -4,7 +4,7 @@ import { ServiceType, stackIntercept, RpcError } from '@protobuf-ts/runtime-rpc'
 import axios from 'axios';
 export { AxiosError } from 'axios';
 import { TwirpFetchTransport, TwirpErrorCode } from '@protobuf-ts/twirp-transport';
-import { ReplaySubject, combineLatest, BehaviorSubject, shareReplay, map, distinctUntilChanged, takeWhile, distinctUntilKeyChanged, fromEventPattern, startWith, concatMap, merge, from, fromEvent, debounceTime, pairwise, of } from 'rxjs';
+import { ReplaySubject, combineLatest, BehaviorSubject, shareReplay, map, distinctUntilChanged, takeWhile, distinctUntilKeyChanged, fromEventPattern, startWith, concatMap, merge, from, fromEvent, tap, debounceTime, pairwise, of } from 'rxjs';
 import { UAParser } from 'ua-parser-js';
 import { parse, write } from 'sdp-transform';
 
@@ -971,6 +971,10 @@ var ErrorCode;
      * @generated from protobuf enum value: ERROR_CODE_CALL_NOT_FOUND = 300;
      */
     ErrorCode[ErrorCode["CALL_NOT_FOUND"] = 300] = "CALL_NOT_FOUND";
+    /**
+     * @generated from protobuf enum value: ERROR_CODE_CALL_PARTICIPANT_LIMIT_REACHED = 301;
+     */
+    ErrorCode[ErrorCode["CALL_PARTICIPANT_LIMIT_REACHED"] = 301] = "CALL_PARTICIPANT_LIMIT_REACHED";
     /**
      * @generated from protobuf enum value: ERROR_CODE_REQUEST_VALIDATION_FAILED = 400;
      */
@@ -1239,6 +1243,24 @@ var AppleThermalState;
      */
     AppleThermalState[AppleThermalState["CRITICAL"] = 4] = "CRITICAL";
 })(AppleThermalState || (AppleThermalState = {}));
+/**
+ * ClientCapability defines a feature that client supports
+ *
+ * @generated from protobuf enum stream.video.sfu.models.ClientCapability
+ */
+var ClientCapability;
+(function (ClientCapability) {
+    /**
+     * @generated from protobuf enum value: CLIENT_CAPABILITY_UNSPECIFIED = 0;
+     */
+    ClientCapability[ClientCapability["UNSPECIFIED"] = 0] = "UNSPECIFIED";
+    /**
+     * Enables SFU pausing inbound video
+     *
+     * @generated from protobuf enum value: CLIENT_CAPABILITY_SUBSCRIBER_VIDEO_PAUSE = 1;
+     */
+    ClientCapability[ClientCapability["SUBSCRIBER_VIDEO_PAUSE"] = 1] = "SUBSCRIBER_VIDEO_PAUSE";
+})(ClientCapability || (ClientCapability = {}));
 // @generated message type with reflection information, may provide speed optimized methods
 class CallState$Type extends MessageType {
     constructor() {
@@ -1909,6 +1931,7 @@ var models = /*#__PURE__*/Object.freeze({
     get CallEndedReason () { return CallEndedReason; },
     CallGrants: CallGrants,
     CallState: CallState$1,
+    get ClientCapability () { return ClientCapability; },
     ClientDetails: ClientDetails,
     Codec: Codec,
     get ConnectionQuality () { return ConnectionQuality; },
@@ -2598,6 +2621,13 @@ class SfuEvent$Type extends MessageType {
                 oneof: 'eventPayload',
                 T: () => ChangePublishOptions,
             },
+            {
+                no: 28,
+                name: 'inbound_state_notification',
+                kind: 'message',
+                oneof: 'eventPayload',
+                T: () => InboundStateNotification,
+            },
         ]);
     }
 }
@@ -2905,6 +2935,17 @@ class JoinRequest$Type extends MessageType {
                 repeat: 2 /*RepeatType.UNPACKED*/,
                 T: () => SubscribeOption,
             },
+            {
+                no: 11,
+                name: 'capabilities',
+                kind: 'enum',
+                repeat: 1 /*RepeatType.PACKED*/,
+                T: () => [
+                    'stream.video.sfu.models.ClientCapability',
+                    ClientCapability,
+                    'CLIENT_CAPABILITY_',
+                ],
+            },
         ]);
     }
 }
@@ -3350,6 +3391,48 @@ class CallEnded$Type extends MessageType {
  * @generated MessageType for protobuf message stream.video.sfu.event.CallEnded
  */
 const CallEnded = new CallEnded$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class InboundStateNotification$Type extends MessageType {
+    constructor() {
+        super('stream.video.sfu.event.InboundStateNotification', [
+            {
+                no: 1,
+                name: 'inbound_video_states',
+                kind: 'message',
+                repeat: 2 /*RepeatType.UNPACKED*/,
+                T: () => InboundVideoState,
+            },
+        ]);
+    }
+}
+/**
+ * @generated MessageType for protobuf message stream.video.sfu.event.InboundStateNotification
+ */
+const InboundStateNotification = new InboundStateNotification$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class InboundVideoState$Type extends MessageType {
+    constructor() {
+        super('stream.video.sfu.event.InboundVideoState', [
+            { no: 1, name: 'user_id', kind: 'scalar', T: 9 /*ScalarType.STRING*/ },
+            { no: 2, name: 'session_id', kind: 'scalar', T: 9 /*ScalarType.STRING*/ },
+            {
+                no: 3,
+                name: 'track_type',
+                kind: 'enum',
+                T: () => [
+                    'stream.video.sfu.models.TrackType',
+                    TrackType,
+                    'TRACK_TYPE_',
+                ],
+            },
+            { no: 4, name: 'paused', kind: 'scalar', T: 8 /*ScalarType.BOOL*/ },
+        ]);
+    }
+}
+/**
+ * @generated MessageType for protobuf message stream.video.sfu.event.InboundVideoState
+ */
+const InboundVideoState = new InboundVideoState$Type();
 
 var events = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -3370,6 +3453,8 @@ var events = /*#__PURE__*/Object.freeze({
     HealthCheckResponse: HealthCheckResponse,
     ICERestart: ICERestart,
     ICETrickle: ICETrickle,
+    InboundStateNotification: InboundStateNotification,
+    InboundVideoState: InboundVideoState,
     JoinRequest: JoinRequest,
     JoinResponse: JoinResponse,
     LeaveCallRequest: LeaveCallRequest,
@@ -3794,6 +3879,7 @@ const sfuEventKinds = {
     participantUpdated: undefined,
     participantMigrationComplete: undefined,
     changePublishOptions: undefined,
+    inboundStateNotification: undefined,
 };
 const isSfuEvent = (eventName) => {
     return Object.prototype.hasOwnProperty.call(sfuEventKinds, eventName);
@@ -3802,12 +3888,12 @@ class Dispatcher {
     constructor() {
         this.logger = getLogger(['Dispatcher']);
         this.subscribers = {};
-        this.dispatch = (message, logTag = '0') => {
+        this.dispatch = (message, tag = '0') => {
             const eventKind = message.eventPayload.oneofKind;
             if (!eventKind)
                 return;
             const payload = message.eventPayload[eventKind];
-            this.logger('debug', `Dispatching ${eventKind}, tag=${logTag}`, payload);
+            this.logger('debug', `Dispatching ${eventKind}, tag=${tag}`, payload);
             const listeners = this.subscribers[eventKind];
             if (!listeners)
                 return;
@@ -4324,6 +4410,24 @@ const hasScreenShareAudio = (p) => p.publishedTracks.includes(TrackType.SCREEN_S
  * @param p the participant.
  */
 const isPinned = (p) => !!p.pin && (p.pin.isLocalPin || p.pin.pinnedAt > 0);
+/**
+ * Check if a participant has a paused track of the specified type.
+ *
+ * @param p the participant to check.
+ * @param videoTrackType the type of video track to check for ('videoTrack' or 'screenShareTrack').
+ */
+const hasPausedTrack = (p, videoTrackType) => {
+    if (!p.pausedTracks)
+        return false;
+    const trackType = videoTrackType === 'videoTrack'
+        ? TrackType.VIDEO
+        : videoTrackType === 'screenShareTrack'
+            ? TrackType.SCREEN_SHARE
+            : undefined;
+    if (!trackType)
+        return false;
+    return p.pausedTracks.includes(trackType);
+};
 
 /**
  * A comparator which sorts participants by the fact that they are the dominant speaker or not.
@@ -4726,17 +4830,17 @@ class CallState {
          *
          * @param sessionId the session ID of the participant to update.
          * @param participant the participant to update or add.
+         * @param patch an optional patch to apply to the participant.
          */
-        this.updateOrAddParticipant = (sessionId, participant) => {
+        this.updateOrAddParticipant = (sessionId, participant, patch) => {
             return this.setParticipants((participants) => {
                 let add = true;
                 const nextParticipants = participants.map((p) => {
                     if (p.sessionId === sessionId) {
                         add = false;
-                        return {
-                            ...p,
-                            ...participant,
-                        };
+                        const updated = { ...p, ...participant };
+                        const thePatch = typeof patch === 'function' ? patch(updated) : patch;
+                        return Object.assign(updated, thePatch);
                     }
                     return p;
                 });
@@ -5810,7 +5914,7 @@ const aggregate = (stats) => {
     return report;
 };
 
-const version = "1.26.1";
+const version = "1.27.1";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -6394,6 +6498,15 @@ class Tracer {
                 return;
             this.buffer.push([tag, this.id, data, Date.now()]);
         };
+        this.traceOnce = (key, tag, data) => {
+            if (this.keys?.has(key))
+                return;
+            this.trace(tag, data);
+            (this.keys ?? (this.keys = new Map())).set(key, true);
+        };
+        this.resetTrace = (key) => {
+            this.keys?.delete(key);
+        };
         this.take = () => {
             const snapshot = this.buffer;
             this.buffer = [];
@@ -6406,6 +6519,7 @@ class Tracer {
         };
         this.dispose = () => {
             this.buffer = [];
+            this.keys?.clear();
         };
         this.id = id;
     }
@@ -6419,7 +6533,7 @@ class BasePeerConnection {
     /**
      * Constructs a new `BasePeerConnection` instance.
      */
-    constructor(peerType, { sfuClient, connectionConfig, state, dispatcher, onReconnectionNeeded, logTag, enableTracing, iceRestartDelay = 2500, }) {
+    constructor(peerType, { sfuClient, connectionConfig, state, dispatcher, onReconnectionNeeded, tag, enableTracing, iceRestartDelay = 2500, }) {
         this.isIceRestarting = false;
         this.isDisposed = false;
         this.trackIdToTrackType = new Map();
@@ -6643,13 +6757,12 @@ class BasePeerConnection {
         this.onReconnectionNeeded = onReconnectionNeeded;
         this.logger = getLogger([
             peerType === PeerType.SUBSCRIBER ? 'Subscriber' : 'Publisher',
-            logTag,
+            tag,
         ]);
         this.pc = this.createPeerConnection(connectionConfig);
         this.stats = new StatsTracer(this.pc, peerType, this.trackIdToTrackType);
         if (enableTracing) {
-            const tag = `${logTag}-${peerType === PeerType.SUBSCRIBER ? 'sub' : 'pub'}`;
-            this.tracer = new Tracer(tag);
+            this.tracer = new Tracer(`${tag}-${peerType === PeerType.SUBSCRIBER ? 'sub' : 'pub'}`);
             this.tracer.trace('create', {
                 url: sfuClient.edgeName,
                 ...connectionConfig,
@@ -6870,9 +6983,8 @@ const computeVideoLayers = (videoTrack, publishOption) => {
     if (isAudioTrackType(publishOption.trackType))
         return;
     const optimalVideoLayers = [];
-    const settings = videoTrack.getSettings();
-    const { width = 0, height = 0 } = settings;
-    const { bitrate, codec, fps, maxSpatialLayers = 3, maxTemporalLayers = 3, videoDimension = { width: 1280, height: 720 }, useSingleLayer, } = publishOption;
+    const { bitrate, codec, fps = 30, maxSpatialLayers = 3, maxTemporalLayers = 3, videoDimension = { width: 1280, height: 720 }, useSingleLayer, } = publishOption;
+    const { width = videoDimension.width, height = videoDimension.height } = videoTrack.getSettings();
     const maxBitrate = getComputedMaxBitrate(videoDimension, width, height, bitrate);
     let downscaleFactor = 1;
     let bitrateFactor = 1;
@@ -6904,7 +7016,7 @@ const computeVideoLayers = (videoTrack, publishOption) => {
     }
     // for simplicity, we start with all layers enabled, then this function
     // will clear/reassign the layers that are not needed
-    return withSimulcastConstraints(settings, optimalVideoLayers, useSingleLayer);
+    return withSimulcastConstraints(width, height, optimalVideoLayers, useSingleLayer);
 };
 /**
  * Computes the maximum bitrate for a given resolution.
@@ -6938,9 +7050,9 @@ const getComputedMaxBitrate = (targetResolution, currentWidth, currentHeight, bi
  *
  * https://chromium.googlesource.com/external/webrtc/+/refs/heads/main/media/engine/simulcast.cc#90
  */
-const withSimulcastConstraints = (settings, optimalVideoLayers, useSingleLayer) => {
+const withSimulcastConstraints = (width, height, optimalVideoLayers, useSingleLayer) => {
     let layers;
-    const size = Math.max(settings.width || 0, settings.height || 0);
+    const size = Math.max(width, height);
     if (size <= 320) {
         // provide only one layer 320x240 (f), the one with the highest quality
         layers = optimalVideoLayers.filter((layer) => layer.rid === 'f');
@@ -7521,8 +7633,8 @@ class Subscriber extends BasePeerConnection {
 }
 
 const createWebSocketSignalChannel = (opts) => {
-    const { endpoint, onMessage, logTag } = opts;
-    const logger = getLogger(['SfuClientWS', logTag]);
+    const { endpoint, onMessage, tag } = opts;
+    const logger = getLogger(['SfuClientWS', tag]);
     logger('debug', 'Creating signaling WS channel:', endpoint);
     const ws = new WebSocket(endpoint);
     ws.binaryType = 'arraybuffer'; // do we need this?
@@ -7624,9 +7736,9 @@ const uninitialized = Symbol('uninitialized');
  */
 function lazy(factory) {
     let value = uninitialized;
-    return () => {
+    return (...args) => {
         if (value === uninitialized) {
-            value = factory();
+            value = factory(...args);
         }
         return value;
     };
@@ -7772,7 +7884,7 @@ class StreamSfuClient {
     /**
      * Constructs a new SFU client.
      */
-    constructor({ dispatcher, credentials, sessionId, logTag, joinResponseTimeout = 5000, onSignalClose, streamClient, enableTracing, }) {
+    constructor({ dispatcher, credentials, sessionId, cid, tag, joinResponseTimeout = 5000, onSignalClose, streamClient, enableTracing, }) {
         /**
          * A buffer for ICE Candidates that are received before
          * the Publisher and Subscriber Peer Connections are ready to handle them.
@@ -7802,7 +7914,7 @@ class StreamSfuClient {
          * A controller to abort the current requests.
          */
         this.abortController = new AbortController();
-        this.createWebSocket = () => {
+        this.createWebSocket = (params) => {
             const eventsToTrace = {
                 callEnded: true,
                 changePublishQuality: true,
@@ -7810,10 +7922,11 @@ class StreamSfuClient {
                 connectionQualityChanged: true,
                 error: true,
                 goAway: true,
+                inboundStateNotification: true,
             };
             this.signalWs = createWebSocketSignalChannel({
-                logTag: this.logTag,
-                endpoint: `${this.credentials.server.ws_endpoint}?tag=${this.logTag}`,
+                tag: this.tag,
+                endpoint: `${this.credentials.server.ws_endpoint}?${new URLSearchParams(params).toString()}`,
                 onMessage: (message) => {
                     this.lastMessageTimestamp = new Date();
                     this.scheduleConnectionCheck();
@@ -7821,7 +7934,7 @@ class StreamSfuClient {
                     if (eventsToTrace[eventKind]) {
                         this.tracer?.trace(eventKind, message);
                     }
-                    this.dispatcher.dispatch(message, this.logTag);
+                    this.dispatcher.dispatch(message, this.tag);
                 },
             });
             this.signalReady = makeSafePromise(Promise.race([
@@ -7936,7 +8049,7 @@ class StreamSfuClient {
             });
             this.migrateAwayTimeout = setTimeout(() => {
                 unsubscribe();
-                task.reject(new Error(`Migration (${this.logTag}) failed to complete in ${timeout}ms`));
+                task.reject(new Error(`Migration (${this.tag}) failed to complete in ${timeout}ms`));
             }, timeout);
             return task.promise;
         };
@@ -8036,10 +8149,10 @@ class StreamSfuClient {
         const { server, token } = credentials;
         this.edgeName = server.edge_name;
         this.joinResponseTimeout = joinResponseTimeout;
-        this.logTag = logTag;
-        this.logger = getLogger(['SfuClient', logTag]);
+        this.tag = tag;
+        this.logger = getLogger(['SfuClient', tag]);
         this.tracer = enableTracing
-            ? new Tracer(`${logTag}-${this.edgeName}`)
+            ? new Tracer(`${tag}-${this.edgeName}`)
             : undefined;
         this.rpc = createSignalClient({
             baseUrl: server.url,
@@ -8068,7 +8181,13 @@ class StreamSfuClient {
                 this.networkAvailableTask?.resolve();
             }
         });
-        this.createWebSocket();
+        this.createWebSocket({
+            attempt: tag,
+            user_id: streamClient.user?.id || '',
+            api_key: streamClient.key,
+            user_session_id: this.sessionId,
+            cid,
+        });
     }
     get isHealthy() {
         return (this.signalWs.readyState === WebSocket.OPEN &&
@@ -8228,6 +8347,36 @@ const watchCallGrantsUpdated = (state) => {
     };
 };
 
+/**
+ * Adds unique values to an array.
+ *
+ * @param arr the array to add to.
+ * @param values the values to add.
+ */
+const pushToIfMissing = (arr, ...values) => {
+    for (const v of values) {
+        if (!arr.includes(v)) {
+            arr.push(v);
+        }
+    }
+    return arr;
+};
+/**
+ * Removes values from an array if they are present.
+ *
+ * @param arr the array to remove from.
+ * @param values the values to remove.
+ */
+const removeFromIfPresent = (arr, ...values) => {
+    for (const v of values) {
+        const index = arr.indexOf(v);
+        if (index !== -1) {
+            arr.splice(index, 1);
+        }
+    }
+    return arr;
+};
+
 const watchConnectionQualityChanged = (dispatcher, state) => {
     return dispatcher.on('connectionQualityChanged', (e) => {
         const { connectionQualityUpdates } = e;
@@ -8294,6 +8443,29 @@ const watchPinsUpdated = (state) => {
         state.setServerSidePins(pins);
     };
 };
+/**
+ * Watches for inbound state notifications and updates the paused tracks
+ *
+ * @param state the call state to update.
+ */
+const watchInboundStateNotification = (state) => {
+    return function onInboundStateNotification(e) {
+        const { inboundVideoStates } = e;
+        const current = state.getParticipantLookupBySessionId();
+        const patches = {};
+        for (const { sessionId, trackType, paused } of inboundVideoStates) {
+            const pausedTracks = [...(current[sessionId]?.pausedTracks ?? [])];
+            if (paused) {
+                pushToIfMissing(pausedTracks, trackType);
+            }
+            else {
+                removeFromIfPresent(pausedTracks, trackType);
+            }
+            patches[sessionId] = { pausedTracks };
+        }
+        state.updateParticipants(patches);
+    };
+};
 
 /**
  * An event handler that handles soft mutes.
@@ -8330,21 +8502,6 @@ const handleRemoteSoftMute = (call) => {
     });
 };
 
-/**
- * Adds unique values to an array.
- *
- * @param arr the array to add to.
- * @param values the values to add.
- */
-const pushToIfMissing = (arr, ...values) => {
-    for (const v of values) {
-        if (!arr.includes(v)) {
-            arr.push(v);
-        }
-    }
-    return arr;
-};
-
 /**
  * An event responder which handles the `participantJoined` event.
  */
@@ -8426,11 +8583,14 @@ const watchTrackUnpublished = (state) => {
         if (e.participant) {
             const orphanedTracks = reconcileOrphanedTracks(state, e.participant);
             const participant = Object.assign(e.participant, orphanedTracks);
-            state.updateOrAddParticipant(sessionId, participant);
+            state.updateOrAddParticipant(sessionId, participant, (p) => ({
+                pausedTracks: p.pausedTracks?.filter((t) => t !== type),
+            }));
         }
         else {
             state.updateParticipant(sessionId, (p) => ({
                 publishedTracks: p.publishedTracks.filter((t) => t !== type),
+                pausedTracks: p.pausedTracks?.filter((t) => t !== type),
             }));
         }
     };
@@ -8522,6 +8682,7 @@ const registerEventHandlers = (call, dispatcher) => {
         watchDominantSpeakerChanged(dispatcher, state),
         call.on('callGrantsUpdated', watchCallGrantsUpdated(state)),
         call.on('pinsUpdated', watchPinsUpdated(state)),
+        call.on('inboundStateNotification', watchInboundStateNotification(state)),
         handleRemoteSoftMute(call),
     ];
     if (call.ringing) {
@@ -9391,8 +9552,9 @@ function canQueryPermissions() {
  *
  * @param permission a BrowserPermission instance.
  * @param kind the kind of devices to enumerate.
+ * @param tracer the tracer to use for tracing the device enumeration.
  */
-const getDevices = (permission, kind) => {
+const getDevices = (permission, kind, tracer) => {
     return from((async () => {
         let devices = await navigator.mediaDevices.enumerateDevices();
         // for privacy reasons, most browsers don't give you device labels
@@ -9401,6 +9563,7 @@ const getDevices = (permission, kind) => {
         if (shouldPromptForBrowserPermission && (await permission.prompt())) {
             devices = await navigator.mediaDevices.enumerateDevices();
         }
+        tracer?.traceOnce('device-enumeration', 'navigator.mediaDevices.enumerateDevices', devices);
         return devices.filter((device) => device.kind === kind &&
             device.label !== '' &&
             device.deviceId !== 'default');
@@ -9451,12 +9614,12 @@ const getVideoBrowserPermission = lazy(() => new BrowserPermission({
     constraints: videoDeviceConstraints,
     queryName: 'camera',
 }));
-const getDeviceChangeObserver = lazy(() => {
+const getDeviceChangeObserver = lazy((tracer) => {
     // 'addEventListener' is not available in React Native, returning
     // an observable that will never fire
     if (!navigator.mediaDevices.addEventListener)
         return from([]);
-    return fromEvent(navigator.mediaDevices, 'devicechange').pipe(map(() => undefined), debounceTime(500));
+    return fromEvent(navigator.mediaDevices, 'devicechange').pipe(tap(() => tracer?.resetTrace('device-enumeration')), map(() => undefined), debounceTime(500));
 });
 /**
  * Prompts the user for a permission to use audio devices (if not already granted
@@ -9464,8 +9627,8 @@ const getDeviceChangeObserver = lazy(() => {
  * if devices are added/removed the list is updated, and if the permission is revoked,
  * the observable errors.
  */
-const getAudioDevices = lazy(() => {
-    return merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getAudioBrowserPermission(), 'audioinput')), shareReplay(1));
+const getAudioDevices = lazy((tracer) => {
+    return merge(getDeviceChangeObserver(tracer), getAudioBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getAudioBrowserPermission(), 'audioinput', tracer)), shareReplay(1));
 });
 /**
  * Prompts the user for a permission to use video devices (if not already granted
@@ -9473,8 +9636,8 @@ const getAudioDevices = lazy(() => {
  * if devices are added/removed the list is updated, and if the permission is revoked,
  * the observable errors.
  */
-const getVideoDevices = lazy(() => {
-    return merge(getDeviceChangeObserver(), getVideoBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getVideoBrowserPermission(), 'videoinput')), shareReplay(1));
+const getVideoDevices = lazy((tracer) => {
+    return merge(getDeviceChangeObserver(tracer), getVideoBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getVideoBrowserPermission(), 'videoinput', tracer)), shareReplay(1));
 });
 /**
  * Prompts the user for a permission to use video devices (if not already granted
@@ -9482,8 +9645,8 @@ const getVideoDevices = lazy(() => {
  * if devices are added/removed the list is updated, and if the permission is revoked,
  * the observable errors.
  */
-const getAudioOutputDevices = lazy(() => {
-    return merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput')), shareReplay(1));
+const getAudioOutputDevices = lazy((tracer) => {
+    return merge(getDeviceChangeObserver(tracer), getAudioBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput', tracer)), shareReplay(1));
 });
 let getUserMediaExecId = 0;
 const getStream = async (constraints, tracer) => {
@@ -9855,6 +10018,7 @@ class InputMediaDeviceManager {
                 entry.stop?.();
                 this.filters = this.filters.filter((f) => f !== entry);
                 await this.applySettingsToStream();
+                this.call.tracer.trace(`unregisterFilter.${TrackType[this.trackType]}`, null);
             }),
         };
     }
@@ -9874,7 +10038,7 @@ class InputMediaDeviceManager {
      */
     async select(deviceId) {
         if (isReactNative()) {
-            throw new Error('This method is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for reference.');
+            throw new Error('This method is not supported in React Native.');
         }
         const prevDeviceId = this.state.selectedDevice;
         if (deviceId === prevDeviceId) {
@@ -10441,7 +10605,7 @@ class CameraManager extends InputMediaDeviceManager {
         }
     }
     getDevices() {
-        return getVideoDevices();
+        return getVideoDevices(this.call.tracer);
     }
     getStream(constraints) {
         constraints.width = this.targetResolution.width;
@@ -10848,6 +11012,7 @@ class MicrophoneManager extends InputMediaDeviceManager {
             .catch((err) => {
             this.logger('warn', 'Failed to unregister noise cancellation', err);
         });
+        this.call.tracer.trace('noiseCancellation.disabled', true);
         await this.call.notifyNoiseCancellationStopped();
     }
     /**
@@ -10892,7 +11057,7 @@ class MicrophoneManager extends InputMediaDeviceManager {
         }
     }
     getDevices() {
-        return getAudioDevices();
+        return getAudioDevices(this.call.tracer);
     }
     getStream(constraints) {
         return getAudioStream(constraints, this.call.tracer);
@@ -11157,7 +11322,7 @@ class SpeakerManager {
         if (isReactNative()) {
             throw new Error('This feature is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for more details');
         }
-        return getAudioOutputDevices();
+        return getAudioOutputDevices(this.call.tracer);
     }
     /**
      * Select a device.
@@ -11255,6 +11420,12 @@ class Call {
          */
         this.leaveCallHooks = new Set();
         this.streamClientEventHandlers = new Map();
+        /**
+         * A list of capabilities that the client supports and are enabled.
+         */
+        this.clientCapabilities = new Set([
+            ClientCapability.SUBSCRIBER_VIDEO_PAUSE,
+        ]);
         /**
          * Sets up the call instance.
          *
@@ -11663,14 +11834,27 @@ class Call {
                 throw new Error(`Illegal State: call.join() shall be called only once`);
             }
             this.state.setCallingState(CallingState.JOINING);
+            // we will count the number of join failures per SFU.
+            // once the number of failures reaches 2, we will piggyback on the `migrating_from`
+            // field to force the coordinator to provide us another SFU
+            const sfuJoinFailures = new Map();
+            const joinData = data;
             maxJoinRetries = Math.max(maxJoinRetries, 1);
             for (let attempt = 0; attempt < maxJoinRetries; attempt++) {
                 try {
                     this.logger('trace', `Joining call (${attempt})`, this.cid);
-                    return await this.doJoin(data);
+                    await this.doJoin(data);
+                    delete joinData.migrating_from;
+                    break;
                 }
                 catch (err) {
                     this.logger('warn', `Failed to join call (${attempt})`, this.cid);
+                    const sfuId = this.credentials?.server.edge_name || '';
+                    const failures = (sfuJoinFailures.get(sfuId) || 0) + 1;
+                    sfuJoinFailures.set(sfuId, failures);
+                    if (failures >= 2) {
+                        joinData.migrating_from = sfuId;
+                    }
                     if (attempt === maxJoinRetries - 1) {
                         // restore the previous call state if the join-flow fails
                         this.state.setCallingState(callingState);
@@ -11720,7 +11904,8 @@ class Call {
             const isWsHealthy = !!previousSfuClient?.isHealthy;
             const sfuClient = performingRejoin || performingMigration || !isWsHealthy
                 ? new StreamSfuClient({
-                    logTag: String(++this.sfuClientTag),
+                    tag: String(this.sfuClientTag++),
+                    cid: this.cid,
                     dispatcher: this.dispatcher,
                     credentials: this.credentials,
                     streamClient: this.streamClient,
@@ -11762,6 +11947,7 @@ class Call {
                         reconnectDetails,
                         preferredPublishOptions,
                         preferredSubscribeOptions,
+                        capabilities: Array.from(this.clientCapabilities),
                     });
                     this.currentPublishOptions = publishOptions;
                     this.fastReconnectDeadlineSeconds = fastReconnectDeadlineSeconds;
@@ -11934,7 +12120,7 @@ class Call {
                 dispatcher: this.dispatcher,
                 state: this.state,
                 connectionConfig,
-                logTag: String(this.sfuClientTag),
+                tag: sfuClient.tag,
                 enableTracing,
                 onReconnectionNeeded: (kind, reason) => {
                     this.reconnect(kind, reason).catch((err) => {
@@ -11956,7 +12142,7 @@ class Call {
                     state: this.state,
                     connectionConfig,
                     publishOptions,
-                    logTag: String(this.sfuClientTag),
+                    tag: sfuClient.tag,
                     enableTracing,
                     onReconnectionNeeded: (kind, reason) => {
                         this.reconnect(kind, reason).catch((err) => {
@@ -12474,9 +12660,12 @@ class Call {
          * @internal
          */
         this.notifyTrackMuteState = async (muted, ...trackTypes) => {
-            if (!this.sfuClient)
-                return;
-            await this.sfuClient.updateMuteStates(trackTypes.map((trackType) => ({ trackType, muted })));
+            const key = `muteState.${this.cid}.${trackTypes.join('-')}`;
+            await withoutConcurrency(key, async () => {
+                if (!this.sfuClient)
+                    return;
+                await this.sfuClient.updateMuteStates(trackTypes.map((trackType) => ({ trackType, muted })));
+            });
         };
         /**
          * Will enhance the reported stats with additional participant-specific information (`callStatsReport$` state [store variable](./StreamVideoClient.md/#readonlystatestore)).
@@ -13120,6 +13309,22 @@ class Call {
         this.setDisconnectionTimeout = (timeoutSeconds) => {
             this.disconnectionTimeoutSeconds = timeoutSeconds;
         };
+        /**
+         * Enables the provided client capabilities.
+         */
+        this.enableClientCapabilities = (...capabilities) => {
+            for (const capability of capabilities) {
+                this.clientCapabilities.add(capability);
+            }
+        };
+        /**
+         * Disables the provided client capabilities.
+         */
+        this.disableClientCapabilities = (...capabilities) => {
+            for (const capability of capabilities) {
+                this.clientCapabilities.delete(capability);
+            }
+        };
         this.type = type;
         this.id = id;
         this.cid = `${type}:${id}`;
@@ -13287,7 +13492,6 @@ class StableWSConnection {
         this.onmessage = (wsID, event) => {
             if (this.wsID !== wsID)
                 return;
-            this._log('onmessage() - onmessage callback', { event, wsID });
             const data = typeof event.data === 'string'
                 ? JSON.parse(event.data)
                 : null;
@@ -13373,7 +13577,6 @@ class StableWSConnection {
             this.totalFailures += 1;
             this._setHealth(false);
             this.isConnecting = false;
-            this.rejectConnectionOpen?.(new Error(`WebSocket error: ${event}`));
             this._log(`onerror() - WS connection resulted into error`, { event });
             this._reconnect();
         };
@@ -14301,7 +14504,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.26.1", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.27.1", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),
@@ -14854,5 +15057,5 @@ class StreamVideoClient {
 }
 StreamVideoClient._instances = new Map();
 
-export { AudioSettingsRequestDefaultDeviceEnum, AudioSettingsResponseDefaultDeviceEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, CreateDeviceRequestPushProviderEnum, DebounceType, DynascaleManager, ErrorFromResponse, FrameRecordingSettingsRequestModeEnum, FrameRecordingSettingsRequestQualityEnum, FrameRecordingSettingsResponseModeEnum, InputMediaDeviceManager, InputMediaDeviceManagerState, LayoutSettingsRequestNameEnum, MicrophoneManager, MicrophoneManagerState, NoiseCancellationSettingsModeEnum, OwnCapability, RNSpeechDetector, RTMPBroadcastRequestQualityEnum, RTMPSettingsRequestQualityEnum, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, ScreenShareManager, ScreenShareState, events as SfuEvents, models as SfuModels, SpeakerManager, SpeakerState, StartClosedCaptionsRequestLanguageEnum, StartTranscriptionRequestLanguageEnum, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoWriteableStateStore, TranscriptionSettingsRequestClosedCaptionModeEnum, TranscriptionSettingsRequestLanguageEnum, TranscriptionSettingsRequestModeEnum, TranscriptionSettingsResponseClosedCaptionModeEnum, TranscriptionSettingsResponseLanguageEnum, TranscriptionSettingsResponseModeEnum, VideoSettingsRequestCameraFacingEnum, VideoSettingsResponseCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, deviceIds$, disposeOfMediaStream, dominantSpeaker, getAudioBrowserPermission, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceState, getLogLevel, getLogger, getScreenShareStream, getSdkInfo, getVideoBrowserPermission, getVideoDevices, getVideoStream, getWebRTCInfo, hasAudio, hasScreenShare, hasScreenShareAudio, hasVideo, isPinned, livestreamOrAudioRoomSortPreset, logLevels, logToConsole, name, noopComparator, paginatedLayoutSortPreset, pinned, publishingAudio, publishingVideo, reactionType, resolveDeviceId, role, screenSharing, setDeviceInfo, setLogLevel, setLogger, setOSInfo, setPowerState, setSdkInfo, setThermalState, setWebRTCInfo, speakerLayoutSortPreset, speaking };
+export { AudioSettingsRequestDefaultDeviceEnum, AudioSettingsResponseDefaultDeviceEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, CreateDeviceRequestPushProviderEnum, DebounceType, DynascaleManager, ErrorFromResponse, FrameRecordingSettingsRequestModeEnum, FrameRecordingSettingsRequestQualityEnum, FrameRecordingSettingsResponseModeEnum, InputMediaDeviceManager, InputMediaDeviceManagerState, LayoutSettingsRequestNameEnum, MicrophoneManager, MicrophoneManagerState, NoiseCancellationSettingsModeEnum, OwnCapability, RNSpeechDetector, RTMPBroadcastRequestQualityEnum, RTMPSettingsRequestQualityEnum, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, ScreenShareManager, ScreenShareState, events as SfuEvents, models as SfuModels, SpeakerManager, SpeakerState, StartClosedCaptionsRequestLanguageEnum, StartTranscriptionRequestLanguageEnum, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoWriteableStateStore, TranscriptionSettingsRequestClosedCaptionModeEnum, TranscriptionSettingsRequestLanguageEnum, TranscriptionSettingsRequestModeEnum, TranscriptionSettingsResponseClosedCaptionModeEnum, TranscriptionSettingsResponseLanguageEnum, TranscriptionSettingsResponseModeEnum, VideoSettingsRequestCameraFacingEnum, VideoSettingsResponseCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, deviceIds$, disposeOfMediaStream, dominantSpeaker, getAudioBrowserPermission, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceState, getLogLevel, getLogger, getScreenShareStream, getSdkInfo, getVideoBrowserPermission, getVideoDevices, getVideoStream, getWebRTCInfo, hasAudio, hasPausedTrack, hasScreenShare, hasScreenShareAudio, hasVideo, isPinned, livestreamOrAudioRoomSortPreset, logLevels, logToConsole, name, noopComparator, paginatedLayoutSortPreset, pinned, publishingAudio, publishingVideo, reactionType, resolveDeviceId, role, screenSharing, setDeviceInfo, setLogLevel, setLogger, setOSInfo, setPowerState, setSdkInfo, setThermalState, setWebRTCInfo, speakerLayoutSortPreset, speaking };
 //# sourceMappingURL=index.browser.es.js.map