@stream-io/video-client 1.48.0 → 1.50.0

package/dist/index.es.js

@@ -1399,6 +1399,35 @@ var ClientCapability;
      */
     ClientCapability[ClientCapability["SUBSCRIBER_VIDEO_PAUSE"] = 1] = "SUBSCRIBER_VIDEO_PAUSE";
 })(ClientCapability || (ClientCapability = {}));
+/**
+ * DegradationPreference represents the RTCDegradationPreference from WebRTC.
+ * See https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpSender/setParameters#degradationpreference
+ *
+ * @generated from protobuf enum stream.video.sfu.models.DegradationPreference
+ */
+var DegradationPreference;
+(function (DegradationPreference) {
+    /**
+     * @generated from protobuf enum value: DEGRADATION_PREFERENCE_UNSPECIFIED = 0;
+     */
+    DegradationPreference[DegradationPreference["UNSPECIFIED"] = 0] = "UNSPECIFIED";
+    /**
+     * @generated from protobuf enum value: DEGRADATION_PREFERENCE_BALANCED = 1;
+     */
+    DegradationPreference[DegradationPreference["BALANCED"] = 1] = "BALANCED";
+    /**
+     * @generated from protobuf enum value: DEGRADATION_PREFERENCE_MAINTAIN_FRAMERATE = 2;
+     */
+    DegradationPreference[DegradationPreference["MAINTAIN_FRAMERATE"] = 2] = "MAINTAIN_FRAMERATE";
+    /**
+     * @generated from protobuf enum value: DEGRADATION_PREFERENCE_MAINTAIN_RESOLUTION = 3;
+     */
+    DegradationPreference[DegradationPreference["MAINTAIN_RESOLUTION"] = 3] = "MAINTAIN_RESOLUTION";
+    /**
+     * @generated from protobuf enum value: DEGRADATION_PREFERENCE_MAINTAIN_FRAMERATE_AND_RESOLUTION = 4;
+     */
+    DegradationPreference[DegradationPreference["MAINTAIN_FRAMERATE_AND_RESOLUTION"] = 4] = "MAINTAIN_FRAMERATE_AND_RESOLUTION";
+})(DegradationPreference || (DegradationPreference = {}));
 // @generated message type with reflection information, may provide speed optimized methods
 class CallState$Type extends MessageType {
     constructor() {
@@ -1668,6 +1697,16 @@ class PublishOption$Type extends MessageType {
                 repeat: 2 /*RepeatType.UNPACKED*/,
                 T: () => AudioBitrate,
             },
+            {
+                no: 11,
+                name: 'degradation_preference',
+                kind: 'enum',
+                T: () => [
+                    'stream.video.sfu.models.DegradationPreference',
+                    DegradationPreference,
+                    'DEGRADATION_PREFERENCE_',
+                ],
+            },
         ]);
     }
 }
@@ -2114,6 +2153,7 @@ var models = /*#__PURE__*/Object.freeze({
     ClientDetails: ClientDetails,
     Codec: Codec,
     get ConnectionQuality () { return ConnectionQuality; },
+    get DegradationPreference () { return DegradationPreference; },
     Device: Device,
     Error: Error$2,
     get ErrorCode () { return ErrorCode; },
@@ -3501,6 +3541,16 @@ class VideoSender$Type extends MessageType {
                 kind: 'scalar',
                 T: 5 /*ScalarType.INT32*/,
             },
+            {
+                no: 6,
+                name: 'degradation_preference',
+                kind: 'enum',
+                T: () => [
+                    'stream.video.sfu.models.DegradationPreference',
+                    DegradationPreference,
+                    'DEGRADATION_PREFERENCE_',
+                ],
+            },
         ]);
     }
 }
@@ -3866,6 +3916,18 @@ const createSignalClient = (options) => {
 };
 
 const sleep = (m) => new Promise((r) => setTimeout(r, m));
+const timeboxed = async (promises, ms) => {
+    let timerId;
+    const timeout = new Promise((_, reject) => {
+        timerId = setTimeout(() => reject(new Error('timebox error')), ms);
+    });
+    try {
+        return await Promise.race([Promise.all(promises), timeout]);
+    }
+    finally {
+        clearTimeout(timerId);
+    }
+};
 function isFunction(value) {
     return (value &&
         (Object.prototype.toString.call(value) === '[object Function]' ||
@@ -4007,8 +4069,6 @@ const retryable = async (rpc, signal, maxRetries = Number.POSITIVE_INFINITY) =>
     do {
         if (attempt > 0)
             await sleep(retryInterval(attempt));
-        if (signal?.aborted)
-            throw new Error(signal.reason);
         try {
             result = await rpc({ attempt });
         }
@@ -4406,6 +4466,21 @@ class Dispatcher {
     }
 }
 
+/**
+ * NegotiationError is thrown when there is an error during the negotiation process.
+ * It extends the built-in Error class and includes an SfuError object for more details.
+ */
+class NegotiationError extends Error {
+    /**
+     * Creates an instance of NegotiationError.
+     */
+    constructor(error) {
+        super(error.message);
+        this.name = 'NegotiationError';
+        this.error = error;
+    }
+}
+
 /**
  * A buffer for ICE Candidates. Used for ICE Trickle:
  * - https://bloggeek.me/webrtcglossary/trickle-ice/
@@ -4592,6 +4667,20 @@ const setCurrentValue = (subject, update) => {
     subject.next(next);
     return next;
 };
+/**
+ * Updates the value of the provided Subject asynchronously.
+ * Locks the subject to prevent concurrent updates.
+ *
+ * @param subject the subject to update.
+ * @param update the update to apply to the subject.
+ */
+const setCurrentValueAsync = async (subject, update) => {
+    return withoutConcurrency(subject, async () => {
+        const next = await update(getCurrentValue(subject));
+        subject.next(next);
+        return next;
+    });
+};
 /**
  * Updates the value of the provided Subject and returns the previous value
  * and a function to roll back the update.
@@ -4646,6 +4735,7 @@ var rxUtils = /*#__PURE__*/Object.freeze({
     createSubscription: createSubscription,
     getCurrentValue: getCurrentValue,
     setCurrentValue: setCurrentValue,
+    setCurrentValueAsync: setCurrentValueAsync,
     updateValue: updateValue
 });
 
@@ -6223,21 +6313,6 @@ class CallState {
     }
 }
 
-/**
- * NegotiationError is thrown when there is an error during the negotiation process.
- * It extends the built-in Error class and includes an SfuError object for more details.
- */
-class NegotiationError extends Error {
-    /**
-     * Creates an instance of NegotiationError.
-     */
-    constructor(error) {
-        super(error.message);
-        this.name = 'NegotiationError';
-        this.error = error;
-    }
-}
-
 /**
  * Flatten the stats report into an array of stats objects.
  *
@@ -6285,7 +6360,7 @@ const getSdkVersion = (sdk) => {
     return sdk ? `${sdk.major}.${sdk.minor}.${sdk.patch}` : '0.0.0-development';
 };
 
-const version = "1.48.0";
+const version = "1.50.0";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -6438,6 +6513,31 @@ const isSafari = () => {
         return false;
     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.
+ */
+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.
  */
@@ -6481,7 +6581,8 @@ var browsers = /*#__PURE__*/Object.freeze({
     isChrome: isChrome,
     isFirefox: isFirefox,
     isSafari: isSafari,
-    isSupportedBrowser: isSupportedBrowser
+    isSupportedBrowser: isSupportedBrowser,
+    isWebKit: isWebKit
 });
 
 /**
@@ -7307,6 +7408,30 @@ class Tracer {
     }
 }
 
+/**
+ * Canonical reasons the SDK uses to trigger a reconnection. Free-form strings
+ * are still accepted at the callback boundary (e.g. when forwarding an SFU
+ * error message), but only the members below influence reconnect-loop
+ * behavior. In particular, `Call.reconnect` programmatically inspects
+ * `ICE_NEVER_CONNECTED` to drive the unsupported-network detector — pass a
+ * canonical member when you want the SDK to react to the reason; pass a
+ * free-form string when the value is purely diagnostic.
+ */
+const ReconnectReason = {
+    /** ICE never reached `connected`/`completed`, escalate to REJOIN. */
+    ICE_NEVER_CONNECTED: 'ice_never_connected',
+    /** RTCPeerConnection.connectionState became `failed`. */
+    CONNECTION_FAILED: 'connection_failed',
+    /** `restartIce()` rejected. */
+    RESTART_ICE_FAILED: 'restart_ice_failed',
+    /** SFU `goAway` event, migrate to a new SFU. */
+    GO_AWAY: 'go_away',
+    /** Network came back online after going offline. */
+    NETWORK_BACK_ONLINE: 'network_back_online',
+    /** SFU error event with no descriptive message. */
+    SFU_ERROR: 'sfu_error',
+};
+
 /**
  * A base class for the `Publisher` and `Subscriber` classes.
  * @internal
@@ -7315,7 +7440,8 @@ class BasePeerConnection {
     /**
      * Constructs a new `BasePeerConnection` instance.
      */
-    constructor(peerType, { sfuClient, connectionConfig, state, dispatcher, onReconnectionNeeded, tag, enableTracing, clientPublishOptions, iceRestartDelay = 2500, }) {
+    constructor(peerType, { sfuClient, connectionConfig, state, dispatcher, onReconnectionNeeded, onIceConnected, tag, enableTracing, clientPublishOptions, iceRestartDelay = 2500, }) {
+        this.iceHasEverConnected = false;
         this.isIceRestarting = false;
         this.isDisposed = false;
         this.trackIdToTrackType = new Map();
@@ -7338,13 +7464,12 @@ class BasePeerConnection {
          */
         this.tryRestartIce = () => {
             this.restartIce().catch((e) => {
-                const reason = 'restartICE() failed, initiating reconnect';
-                this.logger.error(reason, e);
+                this.logger.error('restartICE() failed, initiating reconnect', e);
                 const strategy = e instanceof NegotiationError &&
                     e.error.code === ErrorCode.PARTICIPANT_SIGNAL_LOST
                     ? WebsocketReconnectStrategy.FAST
                     : WebsocketReconnectStrategy.REJOIN;
-                this.onReconnectionNeeded?.(strategy, reason, this.peerType);
+                this.onReconnectionNeeded?.(strategy, ReconnectReason.RESTART_ICE_FAILED, this.peerType);
             });
         };
         /**
@@ -7413,6 +7538,17 @@ class BasePeerConnection {
             const connectionState = this.pc.connectionState;
             return !failedStates.has(iceState) && !failedStates.has(connectionState);
         };
+        /**
+         * Returns true only when the peer connection is currently fully established
+         * (ICE `connected`/`completed` AND connection state `connected`).
+         * Transient states like `disconnected`, `checking`, or `new` return false.
+         */
+        this.isStable = () => {
+            const iceState = this.pc.iceConnectionState;
+            const connectionState = this.pc.connectionState;
+            return ((iceState === 'connected' || iceState === 'completed') &&
+                connectionState === 'connected');
+        };
         /**
          * Handles the ICECandidate event and
          * Initiates an ICE Trickle process with the SFU.
@@ -7462,7 +7598,7 @@ class BasePeerConnection {
             }
             // we can't recover from a failed connection state (contrary to ICE)
             if (state === 'failed') {
-                this.onReconnectionNeeded?.(WebsocketReconnectStrategy.REJOIN, 'Connection failed', this.peerType);
+                this.onReconnectionNeeded?.(WebsocketReconnectStrategy.REJOIN, ReconnectReason.CONNECTION_FAILED, this.peerType);
                 return;
             }
             this.handleConnectionStateUpdate(state);
@@ -7484,6 +7620,41 @@ class BasePeerConnection {
             // do nothing when ICE is restarting
             if (this.isIceRestarting)
                 return;
+            // Pre-connect handling: ICE has never reached `connected`/`completed`.
+            // Restart is futile here (the data plane was never established), but
+            // these two terminal-ish states need different treatment:
+            // - `failed` is terminal, escalate to REJOIN so a new SFU/credentials
+            //   /PC configuration gets a chance, and let `Call.reconnect` count
+            //   this toward the unsupported-network budget.
+            // - `disconnected` is transient, the browser may yet move back to
+            //   `checking`/`connected`. Don't restart, don't escalate; wait it
+            //   out. If it ultimately fails, ICE will transition to `failed` and
+            //   the branch above will take over.
+            if (!this.iceHasEverConnected) {
+                if (state === 'failed') {
+                    this.logger.info('ICE failed before connected, escalating to REJOIN');
+                    clearTimeout(this.preConnectStuckTimeout);
+                    this.preConnectStuckTimeout = undefined;
+                    this.onReconnectionNeeded?.(WebsocketReconnectStrategy.REJOIN, ReconnectReason.ICE_NEVER_CONNECTED, this.peerType);
+                    return;
+                }
+                if (state === 'disconnected') {
+                    this.logger.info('ICE disconnected before connected, wait to recover');
+                    // Watchdog: if the browser stays in `disconnected` without ever
+                    // reaching `connected` or transitioning to `failed`, escalate to
+                    // REJOIN ourselves so we don't wait silently forever. Rare but
+                    // observed on flaky mobile networks.
+                    clearTimeout(this.preConnectStuckTimeout);
+                    this.preConnectStuckTimeout = setTimeout(() => {
+                        if (!this.iceHasEverConnected &&
+                            this.pc.iceConnectionState === 'disconnected') {
+                            this.logger.info('ICE stuck in pre-connect disconnected, escalating to REJOIN');
+                            this.onReconnectionNeeded?.(WebsocketReconnectStrategy.REJOIN, ReconnectReason.ICE_NEVER_CONNECTED, this.peerType);
+                        }
+                    }, this.iceRestartDelay * 2);
+                    return;
+                }
+            }
             switch (state) {
                 case 'failed':
                     // in the `failed` state, we try to restart ICE immediately
@@ -7503,12 +7674,24 @@ class BasePeerConnection {
                     }, this.iceRestartDelay);
                     break;
                 case 'connected':
-                    // in the `connected` state, we clear the ice restart timeout if it exists
+                case 'completed':
+                    // Fire `onIceConnected` exactly once per peer-connection lifetime —
+                    // the first time ICE reaches `connected`/`completed` end-to-end.
+                    // Used by `Call` to reset the unsupported-network failure counter
+                    // only after WebRTC has actually recovered, not merely on SFU join.
+                    if (!this.iceHasEverConnected) {
+                        this.iceHasEverConnected = true;
+                        this.onIceConnected?.(this.peerType);
+                    }
+                    // clear any scheduled restartICE since the connection is healthy
                     if (this.iceRestartTimeout) {
                         this.logger.info('connected connection, canceling restartICE');
                         clearTimeout(this.iceRestartTimeout);
                         this.iceRestartTimeout = undefined;
                     }
+                    // clear the pre-connect watchdog if it was armed
+                    clearTimeout(this.preConnectStuckTimeout);
+                    this.preConnectStuckTimeout = undefined;
                     break;
             }
         };
@@ -7541,6 +7724,7 @@ class BasePeerConnection {
         this.clientPublishOptions = clientPublishOptions;
         this.tag = tag;
         this.onReconnectionNeeded = onReconnectionNeeded;
+        this.onIceConnected = onIceConnected;
         this.logger = videoLoggerSystem.getLogger(peerType === PeerType.SUBSCRIBER ? 'Subscriber' : 'Publisher', { tags: [tag] });
         this.pc = this.createPeerConnection(connectionConfig);
         this.stats = new StatsTracer(this.pc, peerType, this.trackIdToTrackType);
@@ -7559,7 +7743,10 @@ class BasePeerConnection {
     dispose() {
         clearTimeout(this.iceRestartTimeout);
         this.iceRestartTimeout = undefined;
+        clearTimeout(this.preConnectStuckTimeout);
+        this.preConnectStuckTimeout = undefined;
         this.onReconnectionNeeded = undefined;
+        this.onIceConnected = undefined;
         this.isDisposed = true;
         this.detachEventHandlers();
         this.pc.close();
@@ -7871,6 +8058,24 @@ const withSimulcastConstraints = (width, height, optimalVideoLayers, useSingleLa
     }));
 };
 
+const toRTCDegradationPreference = (preference) => {
+    switch (preference) {
+        case DegradationPreference.BALANCED:
+            return 'balanced';
+        case DegradationPreference.MAINTAIN_FRAMERATE:
+            return 'maintain-framerate';
+        case DegradationPreference.MAINTAIN_RESOLUTION:
+            return 'maintain-resolution';
+        case DegradationPreference.MAINTAIN_FRAMERATE_AND_RESOLUTION:
+            // @ts-expect-error not in the typedefs yet
+            return 'maintain-framerate-and-resolution';
+        case DegradationPreference.UNSPECIFIED:
+            return undefined;
+        default:
+            ensureExhausted(preference, 'Unknown degradation preference');
+    }
+};
+
 /**
  * The `Publisher` is responsible for publishing/unpublishing media streams to/from the SFU
  *
@@ -7932,7 +8137,9 @@ class Publisher extends BasePeerConnection {
                 sendEncodings,
             });
             const params = transceiver.sender.getParameters();
-            params.degradationPreference = 'maintain-framerate';
+            params.degradationPreference =
+                toRTCDegradationPreference(publishOption.degradationPreference) ??
+                    'maintain-framerate';
             await transceiver.sender.setParameters(params);
             const trackType = publishOption.trackType;
             this.logger.debug(`Added ${TrackType[trackType]} transceiver`);
@@ -8029,6 +8236,40 @@ class Publisher extends BasePeerConnection {
             }
             return false;
         };
+        /**
+         * Re-arms the encoder for the given track type by detaching and
+         * reattaching the currently published track on each matching sender.
+         *
+         * Workaround for a WebKit / iOS Safari quirk: after a system audio
+         * session interruption (Siri, PSTN call), the `RTCRtpSender` encoder
+         * can stop producing RTP packets even though the underlying
+         * `MediaStreamTrack` is `live` and `track.muted === false`.
+         * `replaceTrack(null)` followed by `replaceTrack(track)` resets the
+         * sender's encoder pipeline without renegotiation, restoring packet
+         * flow with the same SSRC.
+         *
+         * No-op when nothing is published for the given track type.
+         *
+         * @param trackType the track type to refresh.
+         */
+        this.refreshTrack = async (trackType) => {
+            for (const item of this.transceiverCache.items()) {
+                if (item.publishOption.trackType !== trackType)
+                    continue;
+                const { sender } = item.transceiver;
+                const track = sender.track;
+                if (!track || track.readyState !== 'live')
+                    continue;
+                try {
+                    await sender.replaceTrack(null);
+                    await sender.replaceTrack(track);
+                    this.logger.debug(`Refreshed ${TrackType[trackType]} sender`);
+                }
+                catch (err) {
+                    this.logger.warn(`Failed to refresh ${TrackType[trackType]}`, err);
+                }
+            }
+        };
         /**
          * Stops the cloned track that is being published to the SFU.
          */
@@ -8106,6 +8347,12 @@ class Publisher extends BasePeerConnection {
                     changed = true;
                 }
             }
+            const degradationPreference = toRTCDegradationPreference(videoSender.degradationPreference);
+            if (degradationPreference &&
+                params.degradationPreference !== degradationPreference) {
+                params.degradationPreference = degradationPreference;
+                changed = true;
+            }
             const activeEncoders = params.encodings.filter((e) => e.active);
             if (!changed) {
                 return this.logger.info(`${tag} no change:`, activeEncoders);
@@ -8213,7 +8460,8 @@ class Publisher extends BasePeerConnection {
             const trackInfos = [];
             for (const publishOption of this.publishOptions) {
                 const bundle = this.transceiverCache.get(publishOption);
-                if (!bundle || !bundle.transceiver.sender.track)
+                const track = bundle?.transceiver.sender.track;
+                if (!bundle || !track || track.readyState !== 'live')
                     continue;
                 trackInfos.push(this.toTrackInfo(bundle, sdp));
             }
@@ -8285,6 +8533,36 @@ class Publisher extends BasePeerConnection {
     }
 }
 
+/**
+ * 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;
+};
+
 /**
  * A wrapper around the `RTCPeerConnection` that handles the incoming
  * media streams from the SFU.
@@ -8326,27 +8604,34 @@ class Subscriber extends BasePeerConnection {
             }
         };
         this.handleOnTrack = (e) => {
-            const [primaryStream] = e.streams;
+            const { streams, track } = e;
+            const [primaryStream] = streams;
             // example: `e3f6aaf8-b03d-4911-be36-83f47d37a76a:TRACK_TYPE_VIDEO`
             const [trackId, rawTrackType] = primaryStream.id.split(':');
             const participantToUpdate = this.state.participants.find((p) => p.trackLookupPrefix === trackId);
-            this.logger.debug(`[onTrack]: Got remote ${rawTrackType} track for userId: ${participantToUpdate?.userId}`, e.track.id, e.track);
+            this.logger.debug(`[onTrack]: Got remote ${rawTrackType} track for userId: ${participantToUpdate?.userId}`, track.id, track);
+            const trackType = toTrackType(rawTrackType);
+            if (!trackType) {
+                return this.logger.error(`Unknown track type: ${rawTrackType}`);
+            }
             const trackDebugInfo = `${participantToUpdate?.userId} ${rawTrackType}:${trackId}`;
-            e.track.addEventListener('mute', () => {
+            track.addEventListener('mute', () => {
                 this.logger.info(`[onTrack]: Track muted: ${trackDebugInfo}`);
+                this.setRemoteTrackInterrupted(trackId, trackType, true);
             });
-            e.track.addEventListener('unmute', () => {
+            track.addEventListener('unmute', () => {
                 this.logger.info(`[onTrack]: Track unmuted: ${trackDebugInfo}`);
+                this.setRemoteTrackInterrupted(trackId, trackType, false);
             });
-            e.track.addEventListener('ended', () => {
+            track.addEventListener('ended', () => {
                 this.logger.info(`[onTrack]: Track ended: ${trackDebugInfo}`);
+                this.setRemoteTrackInterrupted(trackId, trackType, false);
                 this.state.removeOrphanedTrack(primaryStream.id);
             });
-            const trackType = toTrackType(rawTrackType);
-            if (!trackType) {
-                return this.logger.error(`Unknown track type: ${rawTrackType}`);
+            if (track.muted) {
+                this.setRemoteTrackInterrupted(trackId, trackType, true);
             }
-            this.trackIdToTrackType.set(e.track.id, trackType);
+            this.trackIdToTrackType.set(track.id, trackType);
             if (!participantToUpdate) {
                 this.logger.warn(`[onTrack]: Received track for unknown participant: ${trackId}`, e);
                 this.state.registerOrphanedTrack({
@@ -8372,13 +8657,30 @@ class Subscriber extends BasePeerConnection {
             });
             // now, dispose the previous stream if it exists
             if (previousStream) {
-                this.logger.info(`[onTrack]: Cleaning up previous remote ${e.track.kind} tracks for userId: ${participantToUpdate.userId}`);
+                this.logger.info(`[onTrack]: Cleaning up previous remote ${track.kind} tracks for userId: ${participantToUpdate.userId}`);
                 previousStream.getTracks().forEach((t) => {
                     t.stop();
                     previousStream.removeTrack(t);
                 });
             }
         };
+        this.setRemoteTrackInterrupted = (trackId, trackType, interrupted) => {
+            if (trackType !== TrackType.AUDIO)
+                return;
+            const target = this.state.participants.find((p) => p.trackLookupPrefix === trackId);
+            if (!target)
+                return;
+            this.state.updateParticipant(target.sessionId, (p) => {
+                const current = p.interruptedTracks ?? [];
+                const has = current.includes(trackType);
+                if (interrupted === has)
+                    return {};
+                const next = interrupted
+                    ? pushToIfMissing([...current], trackType)
+                    : removeFromIfPresent([...current], trackType);
+                return { interruptedTracks: next };
+            });
+        };
         this.negotiate = async (subscriberOffer) => {
             await this.pc.setRemoteDescription({
                 type: 'offer',
@@ -8558,6 +8860,20 @@ class SfuJoinError extends Error {
     }
 }
 
+/**
+ * Creates a fresh `joinResponseTask` with a no-op rejection handler attached
+ * to the underlying promise. The handler marks the rejection path as handled
+ * so a teardown-time reject (e.g., from `close()` during disposal) does not
+ * surface as an `UnhandledPromiseRejection`. Explicit awaiters of
+ * `StreamSfuClient.joinTask` still observe the rejection through their own
+ * `then`/`catch` chain. `.catch()` returns a new promise; the original is
+ * unchanged.
+ */
+const makeJoinResponseTask = () => {
+    const task = promiseWithResolvers();
+    task.promise.catch(() => { }); // see the comment above
+    return task;
+};
 /**
  * The client used for exchanging information with the SFU.
  */
@@ -8589,9 +8905,10 @@ class StreamSfuClient {
         this.subscriptionsConcurrencyTag = Symbol('subscriptionsConcurrencyTag');
         /**
          * Promise that resolves when the JoinResponse is received.
-         * Rejects after a certain threshold if the response is not received.
+         * Rejects after a certain threshold if the response is not received,
+         * or when the SFU client is disposed before a join completes.
          */
-        this.joinResponseTask = promiseWithResolvers();
+        this.joinResponseTask = makeJoinResponseTask();
         /**
          * A controller to abort the current requests.
          */
@@ -8661,14 +8978,21 @@ class StreamSfuClient {
         };
         this.close = (code = StreamSfuClient.NORMAL_CLOSURE, reason) => {
             this.isClosingClean = code !== StreamSfuClient.ERROR_CONNECTION_UNHEALTHY;
-            if (this.signalWs.readyState === WebSocket.OPEN) {
+            // Close the WebSocket whether it has fully opened (`OPEN`) or is still
+            // mid-handshake (`CONNECTING`). The WebSocket spec aborts the handshake
+            // when `close()` is called on a CONNECTING socket. Without this, an
+            // SFU socket that opens just after teardown would dispatch events into
+            // a Call instance that has already moved on.
+            const ws = this.signalWs;
+            if (ws.readyState === WebSocket.OPEN ||
+                ws.readyState === WebSocket.CONNECTING) {
                 this.logger.debug(`Closing SFU WS connection: ${code} - ${reason}`);
-                this.signalWs.close(code, `js-client: ${reason}`);
-                this.signalWs.removeEventListener('close', this.handleWebSocketClose);
+                ws.close(code, `js-client: ${reason}`);
+                ws.removeEventListener('close', this.handleWebSocketClose);
             }
-            this.dispose();
+            this.dispose(reason);
         };
-        this.dispose = () => {
+        this.dispose = (reason) => {
             this.logger.debug('Disposing SFU client');
             this.unsubscribeIceTrickle();
             this.unsubscribeNetworkChanged();
@@ -8677,6 +9001,13 @@ class StreamSfuClient {
             clearTimeout(this.migrateAwayTimeout);
             this.abortController.abort();
             this.migrationTask?.resolve();
+            // Settle a pending `joinResponseTask` so `leaveAndClose`, `join()`, and
+            // any other awaiters (`await this.joinTask`) don't hang indefinitely
+            // when the SFU client is torn down before the SFU sent a JoinResponse.
+            if (!this.joinResponseTask.isResolved() &&
+                !this.joinResponseTask.isRejected()) {
+                this.joinResponseTask.reject(new Error(`SFU client disposed before join completed${reason ? `: ${reason}` : ''}`));
+            }
             this.iceTrickleBuffer.dispose();
         };
         this.getTrace = () => {
@@ -8685,8 +9016,24 @@ class StreamSfuClient {
         this.leaveAndClose = async (reason) => {
             try {
                 this.isLeaving = true;
-                await this.joinTask;
-                await this.notifyLeave(reason);
+                // Best-effort: give an in-flight join a short grace period to complete
+                // so we can send a graceful `leaveCallRequest`. Bounded so we never hang
+                // here if the SFU is unresponsive. If the task settles either way during
+                // the wait, the re-check below decides whether to notify.
+                if (!this.joinResponseTask.isResolved() &&
+                    !this.joinResponseTask.isRejected()) {
+                    await Promise.race([
+                        // swallow rejection — we re-check `isResolved()` below to decide
+                        this.joinResponseTask.promise.catch(() => { }),
+                        sleep(StreamSfuClient.LEAVE_NOTIFY_GRACE_MS),
+                    ]);
+                }
+                if (this.joinResponseTask.isResolved()) {
+                    await this.notifyLeave(reason);
+                }
+                else {
+                    this.logger.debug('[leaveAndClose] join not completed within grace period, skipping notifyLeave');
+                }
             }
             catch (err) {
                 this.logger.debug('Error notifying SFU about leaving call', err);
@@ -8755,9 +9102,9 @@ class StreamSfuClient {
                 this.joinResponseTask.isRejected()) {
                 // we need to lock the RPC requests until we receive a JoinResponse.
                 // that's why we have this primitive lock mechanism.
-                // the client starts with already initialized joinResponseTask,
+                // the client starts with an already initialized joinResponseTask,
                 // and this code creates a new one for the next join request.
-                this.joinResponseTask = promiseWithResolvers();
+                this.joinResponseTask = makeJoinResponseTask();
             }
             // capture a reference to the current joinResponseTask as it might
             // be replaced with a new one in case a second join request is made
@@ -8930,6 +9277,12 @@ StreamSfuClient.DISPOSE_OLD_SOCKET = 4100;
  * The close code used when the client fails to join the call (on the SFU).
  */
 StreamSfuClient.JOIN_FAILED = 4101;
+/**
+ * Best-effort grace period in `leaveAndClose` for an in-flight join to
+ * complete before we give up and close without sending `leaveCallRequest`.
+ * Bounded so a stuck join can never hang the leave path.
+ */
+StreamSfuClient.LEAVE_NOTIFY_GRACE_MS = 1000;
 
 /**
  * Event handler that watched the delivery of `call.accepted`.
@@ -9050,36 +9403,6 @@ 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;
@@ -9412,140 +9735,54 @@ const registerRingingCallEventHandlers = (call) => {
     };
 };
 
-const DEFAULT_THRESHOLD = 0.35;
-class ViewportTracker {
-    constructor() {
+const toBindingKey = (sessionId, trackType = 'audioTrack') => `${sessionId}/${trackType}`;
+/**
+ * Tracks audio element bindings and periodically warns about
+ * remote participants whose audio streams have no bound element.
+ */
+class AudioBindingsWatchdog {
+    constructor(state, tracer) {
+        this.bindings = new Map();
+        this.enabled = true;
+        this.logger = videoLoggerSystem.getLogger('AudioBindingsWatchdog');
         /**
-         * @private
+         * Registers an audio element binding for the given session and track type.
+         * Warns if a different element is already bound to the same key.
          */
-        this.elementHandlerMap = new Map();
+        this.register = (element, sessionId, trackType) => {
+            const key = toBindingKey(sessionId, trackType);
+            const existing = this.bindings.get(key);
+            if (existing && existing !== element) {
+                this.logger.warn(`Audio element already bound to ${sessionId} and ${trackType}`);
+                this.tracer.trace('audioBinding.alreadyBoundWarning', trackType);
+            }
+            this.bindings.set(key, element);
+        };
         /**
-         * @private
+         * Removes the audio element binding for the given session and track type.
          */
-        this.observer = null;
-        // in React children render before viewport is set, add
-        // them to the queue and observe them once the observer is ready
+        this.unregister = (sessionId, trackType) => {
+            this.bindings.delete(toBindingKey(sessionId, trackType));
+        };
         /**
-         * @private
+         * Enables or disables the watchdog.
+         * When disabled, the periodic check stops but bindings are still tracked.
          */
-        this.queueSet = new Set();
+        this.setEnabled = (enabled) => {
+            this.enabled = enabled;
+            if (enabled) {
+                this.start();
+            }
+            else {
+                this.stop();
+            }
+        };
         /**
-         * Method to set scrollable viewport as root for the IntersectionObserver, returns
-         * cleanup function to be invoked upon disposing of the DOM element to prevent memory leaks
-         *
-         * @param viewportElement
-         * @param options
-         * @returns Unobserve
-         */
-        this.setViewport = (viewportElement, options) => {
-            const cleanup = () => {
-                this.observer?.disconnect();
-                this.observer = null;
-                this.elementHandlerMap.clear();
-            };
-            this.observer = new IntersectionObserver((entries) => {
-                entries.forEach((entry) => {
-                    const handler = this.elementHandlerMap.get(entry.target);
-                    handler?.(entry);
-                });
-            }, {
-                root: viewportElement,
-                ...options,
-                threshold: options?.threshold ?? DEFAULT_THRESHOLD,
-            });
-            if (this.queueSet.size) {
-                this.queueSet.forEach(([queueElement, queueHandler]) => {
-                    // check if element which requested observation is
-                    // a child of a viewport element, skip if isn't
-                    if (!viewportElement.contains(queueElement))
-                        return;
-                    this.observer.observe(queueElement);
-                    this.elementHandlerMap.set(queueElement, queueHandler);
-                });
-                this.queueSet.clear();
-            }
-            return cleanup;
-        };
-        /**
-         * Method to set element to observe and handler to be triggered whenever IntersectionObserver
-         * detects a possible change in element's visibility within specified viewport, returns
-         * cleanup function to be invoked upon disposing of the DOM element to prevent memory leaks
-         *
-         * @param element
-         * @param handler
-         * @returns Unobserve
-         */
-        this.observe = (element, handler) => {
-            const queueItem = [element, handler];
-            const cleanup = () => {
-                this.elementHandlerMap.delete(element);
-                this.observer?.unobserve(element);
-                this.queueSet.delete(queueItem);
-            };
-            if (this.elementHandlerMap.has(element))
-                return cleanup;
-            if (!this.observer) {
-                this.queueSet.add(queueItem);
-                return cleanup;
-            }
-            if (this.observer.root.contains(element)) {
-                this.elementHandlerMap.set(element, handler);
-                this.observer.observe(element);
-            }
-            return cleanup;
-        };
-    }
-}
-
-const toBindingKey = (sessionId, trackType = 'audioTrack') => `${sessionId}/${trackType}`;
-/**
- * Tracks audio element bindings and periodically warns about
- * remote participants whose audio streams have no bound element.
- */
-class AudioBindingsWatchdog {
-    constructor(state, tracer) {
-        this.state = state;
-        this.tracer = tracer;
-        this.bindings = new Map();
-        this.enabled = true;
-        this.logger = videoLoggerSystem.getLogger('AudioBindingsWatchdog');
-        /**
-         * Registers an audio element binding for the given session and track type.
-         * Warns if a different element is already bound to the same key.
-         */
-        this.register = (audioElement, sessionId, trackType) => {
-            const key = toBindingKey(sessionId, trackType);
-            const existing = this.bindings.get(key);
-            if (existing && existing !== audioElement) {
-                this.logger.warn(`Audio element already bound to ${sessionId} and ${trackType}`);
-                this.tracer.trace('audioBinding.alreadyBoundWarning', trackType);
-            }
-            this.bindings.set(key, audioElement);
-        };
-        /**
-         * Removes the audio element binding for the given session and track type.
-         */
-        this.unregister = (sessionId, trackType) => {
-            this.bindings.delete(toBindingKey(sessionId, trackType));
-        };
-        /**
-         * Enables or disables the watchdog.
-         * When disabled, the periodic check stops but bindings are still tracked.
-         */
-        this.setEnabled = (enabled) => {
-            this.enabled = enabled;
-            if (enabled) {
-                this.start();
-            }
-            else {
-                this.stop();
-            }
-        };
-        /**
-         * Stops the watchdog and unsubscribes from callingState changes.
+         * Stops the watchdog and unsubscribes from callingState changes.
          */
         this.dispose = () => {
             this.stop();
+            this.bindings.clear();
             this.unsubscribeCallingState();
         };
         this.start = () => {
@@ -9577,6 +9814,8 @@ class AudioBindingsWatchdog {
         this.stop = () => {
             clearInterval(this.watchdogInterval);
         };
+        this.tracer = tracer;
+        this.state = state;
         this.unsubscribeCallingState = createSubscription(state.callingState$, (callingState) => {
             if (!this.enabled)
                 return;
@@ -9590,61 +9829,97 @@ class AudioBindingsWatchdog {
     }
 }
 
-const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
-    videoTrack: VisibilityState.UNKNOWN,
-    screenShareTrack: VisibilityState.UNKNOWN,
-};
-const globalOverrideKey = Symbol('globalOverrideKey');
 /**
- * A manager class that handles dynascale related tasks like:
- *
- * - binding video elements to session ids
- * - binding audio elements to session ids
- * - tracking element visibility
- * - updating subscriptions based on viewport visibility
- * - updating subscriptions based on video element dimensions
- * - updating subscriptions based on published tracks
+ * Tracks audio elements that the browser's autoplay policy has blocked.
  */
-class DynascaleManager {
-    /**
-     * Creates a new DynascaleManager instance.
-     */
-    constructor(callState, speaker, tracer) {
+class BlockedAudioTracker {
+    constructor(tracer) {
+        this.logger = videoLoggerSystem.getLogger('BlockedAudioTracker');
+        this.blockedElementsSubject = new BehaviorSubject(new Set());
         /**
-         * The viewport tracker instance.
+         * Whether the browser's autoplay policy is blocking audio playback.
+         * Will be `true` when at least one audio element is currently blocked.
+         * Use {@link resumeAudio} within a user gesture to unblock.
          */
-        this.viewportTracker = new ViewportTracker();
-        this.logger = videoLoggerSystem.getLogger('DynascaleManager');
-        this.useWebAudio = false;
-        this.pendingSubscriptionsUpdate = null;
+        this.autoplayBlocked$ = this.blockedElementsSubject.pipe(map((elements) => elements.size > 0), distinctUntilChanged());
         /**
-         * Audio elements that were blocked by the browser's autoplay policy.
-         * These can be retried by calling `resumeAudio()` from a user gesture.
+         * Registers an audio element as blocked by the browser's autoplay policy.
          */
-        this.blockedAudioElementsSubject = new BehaviorSubject(new Set());
-        /**
-         * Whether the browser's autoplay policy is blocking audio playback.
-         * Will be `true` when the browser blocks autoplay (e.g., no prior user interaction).
-         * Use `resumeAudio()` within a user gesture to unblock.
-         */
-        this.autoplayBlocked$ = this.blockedAudioElementsSubject.pipe(map((elements) => elements.size > 0), distinctUntilChanged());
-        this.addBlockedAudioElement = (audioElement) => {
-            setCurrentValue(this.blockedAudioElementsSubject, (elements) => {
-                const next = new Set(elements);
-                next.add(audioElement);
-                return next;
+        this.markBlocked = (audioElement, blocked) => {
+            setCurrentValue(this.blockedElementsSubject, (elements) => {
+                if (blocked)
+                    elements.add(audioElement);
+                else
+                    elements.delete(audioElement);
+                return elements;
             });
         };
-        this.removeBlockedAudioElement = (audioElement) => {
-            setCurrentValue(this.blockedAudioElementsSubject, (elements) => {
-                const nextElements = new Set(elements);
-                nextElements.delete(audioElement);
-                return nextElements;
+        /**
+         * Returns whether the given audio element is currently flagged as blocked
+         * by the browser's autoplay policy.
+         */
+        this.isBlocked = (audioElement) => {
+            return this.blockedElementsSubject.getValue().has(audioElement);
+        };
+        /**
+         * Plays all audio elements blocked by the browser's autoplay policy.
+         * Must be called from within a user gesture (e.g., click handler).
+         */
+        this.resumeAudio = async () => {
+            this.tracer.trace('resumeAudio', null);
+            await setCurrentValueAsync(this.blockedElementsSubject, async (elements) => {
+                await Promise.all(Array.from(elements, async (element) => {
+                    try {
+                        if (element.srcObject)
+                            await timeboxed([element.play()], 2000);
+                        elements.delete(element);
+                    }
+                    catch (err) {
+                        this.logger.warn(`Can't resume audio for element`, element, err);
+                    }
+                }));
+                return elements;
             });
         };
-        this.videoTrackSubscriptionOverridesSubject = new BehaviorSubject({});
-        this.videoTrackSubscriptionOverrides$ = this.videoTrackSubscriptionOverridesSubject.asObservable();
-        this.incomingVideoSettings$ = this.videoTrackSubscriptionOverrides$.pipe(map((overrides) => {
+        this.tracer = tracer;
+    }
+}
+
+/** Symbol key for the "applies to all participants" override slot. */
+const globalOverrideKey = Symbol('globalOverrideKey');
+/**
+ * Owns the SFU-side video-subscription machinery for a `Call`:
+ *
+ * - Holds the per-session / global override state in a
+ *   `BehaviorSubject<VideoTrackSubscriptionOverrides>`.
+ * - Derives the SFU subscription list from `CallState` participants +
+ *   current overrides via the `subscriptions` getter.
+ * - Debounces and pushes the list to the SFU through
+ *   `sfuClient.updateSubscriptions`.
+ * - Exposes `incomingVideoSettings$`: a consumer-friendly projection of
+ *   the override state for React hooks.
+ *
+ * Owned by `DynascaleManager` as `readonly trackSubscriptionManager`.
+ * `DynascaleManager.bindVideoElement` triggers `apply()` on every
+ * dimension / visibility change.
+ */
+class TrackSubscriptionManager {
+    /**
+     * Constructs new TrackSubscriptionManager instance.
+     *
+     * @param callState the call state.
+     * @param tracer the tracer to use.
+     */
+    constructor(callState, tracer) {
+        this.logger = videoLoggerSystem.getLogger('TrackSubscriptionManager');
+        this.pendingUpdate = null;
+        this.overridesSubject = new BehaviorSubject({});
+        this.overrides$ = this.overridesSubject.asObservable();
+        /**
+         * Consumer-friendly projection of the override state. Used by the
+         * `useIncomingVideoSettings()` React hook.
+         */
+        this.incomingVideoSettings$ = this.overrides$.pipe(map((overrides) => {
             const { [globalOverrideKey]: globalSettings, ...participants } = overrides;
             return {
                 enabled: globalSettings?.enabled !== false,
@@ -9666,106 +9941,255 @@ class DynascaleManager {
             };
         }), shareReplay(1));
         /**
-         * Disposes the allocated resources and closes the audio context if it was created.
+         * Sets the SFU client used by `apply()` to push subscription updates.
+         * Called by the owner on call join; cleared on leave.
          */
-        this.dispose = async () => {
-            if (this.pendingSubscriptionsUpdate) {
-                clearTimeout(this.pendingSubscriptionsUpdate);
-            }
-            this.audioBindingsWatchdog?.dispose();
-            setCurrentValue(this.blockedAudioElementsSubject, new Set());
-            const context = this.audioContext;
-            if (context && context.state !== 'closed') {
-                document.removeEventListener('click', this.resumeAudioContext);
-                await context.close();
-                this.audioContext = undefined;
+        this.setSfuClient = (sfuClient) => {
+            this.sfuClient = sfuClient;
+        };
+        /**
+         * Cancels any pending debounced subscription push. Idempotent.
+         */
+        this.dispose = () => {
+            if (this.pendingUpdate) {
+                clearTimeout(this.pendingUpdate);
+                this.pendingUpdate = null;
             }
         };
-        this.setVideoTrackSubscriptionOverrides = (override, sessionIds) => {
-            this.tracer.trace('setVideoTrackSubscriptionOverrides', [
-                override,
-                sessionIds,
-            ]);
+        /**
+         * Sets video-subscription overrides. Called by
+         * `Call.setIncomingVideoEnabled` and
+         * `Call.setPreferredIncomingVideoResolution`.
+         *
+         * - `sessionIds` omitted → applies `override` globally (or clears the
+         *   global override if `override` is `undefined`).
+         * - `sessionIds` provided → applies `override` to each listed session.
+         */
+        this.setOverrides = (override, sessionIds) => {
+            this.tracer.trace('setOverrides', [override, sessionIds]);
             if (!sessionIds) {
-                return setCurrentValue(this.videoTrackSubscriptionOverridesSubject, override ? { [globalOverrideKey]: override } : {});
+                return setCurrentValue(this.overridesSubject, override ? { [globalOverrideKey]: override } : {});
             }
-            return setCurrentValue(this.videoTrackSubscriptionOverridesSubject, (overrides) => ({
+            return setCurrentValue(this.overridesSubject, (overrides) => ({
                 ...overrides,
                 ...Object.fromEntries(sessionIds.map((id) => [id, override])),
             }));
         };
-        this.applyTrackSubscriptions = (debounceType = DebounceType.SLOW) => {
-            if (this.pendingSubscriptionsUpdate) {
-                clearTimeout(this.pendingSubscriptionsUpdate);
+        /**
+         * Pushes `subscriptions` to the SFU. Debounced by `debounceType`
+         * (SLOW by default). Multiple rapid calls coalesce into one RPC.
+         * Passing `0` fires synchronously.
+         */
+        this.apply = (debounceType = DebounceType.SLOW) => {
+            if (this.pendingUpdate) {
+                clearTimeout(this.pendingUpdate);
             }
             const updateSubscriptions = () => {
-                this.pendingSubscriptionsUpdate = null;
+                this.pendingUpdate = null;
                 this.sfuClient
-                    ?.updateSubscriptions(this.trackSubscriptions)
+                    ?.updateSubscriptions(this.subscriptions)
                     .catch((err) => {
                     this.logger.debug(`Failed to update track subscriptions`, err);
                 });
             };
             if (debounceType) {
-                this.pendingSubscriptionsUpdate = setTimeout(updateSubscriptions, debounceType);
+                this.pendingUpdate = setTimeout(updateSubscriptions, debounceType);
             }
             else {
                 updateSubscriptions();
             }
         };
-        /**
-         * Will begin tracking the given element for visibility changes within the
-         * configured viewport element (`call.setViewport`).
-         *
-         * @param element the element to track.
-         * @param sessionId the session id.
-         * @param trackType the kind of video.
-         * @returns Untrack.
-         */
-        this.trackElementVisibility = (element, sessionId, trackType) => {
-            const cleanup = this.viewportTracker.observe(element, (entry) => {
-                this.callState.updateParticipant(sessionId, (participant) => {
-                    const previousVisibilityState = participant.viewportVisibilityState ??
-                        DEFAULT_VIEWPORT_VISIBILITY_STATE;
-                    // observer triggers when the element is "moved" to be a fullscreen element
-                    // keep it VISIBLE if that happens to prevent fullscreen with placeholder
-                    const isVisible = entry.isIntersecting || document.fullscreenElement === element
-                        ? VisibilityState.VISIBLE
-                        : VisibilityState.INVISIBLE;
-                    return {
-                        ...participant,
-                        viewportVisibilityState: {
-                            ...previousVisibilityState,
-                            [trackType]: isVisible,
-                        },
-                    };
+        this.tracer = tracer;
+        this.callState = callState;
+    }
+    /**
+     * The current SFU subscription list, computed from `CallState`
+     * participants and the override state. Used by:
+     *
+     * - `apply()` to push to the SFU each time the set changes.
+     * - `Call.getReconnectDetails` to include the subscription list in
+     *   the reconnect payload.
+     */
+    get subscriptions() {
+        const subscriptions = [];
+        // Use getParticipantsSnapshot() to bypass the observable pipeline
+        // and avoid stale data caused by shareReplay with no active subscribers
+        const participants = this.callState.getParticipantsSnapshot();
+        const overrides = this.overridesSubject.getValue();
+        for (const p of participants) {
+            if (p.isLocalParticipant)
+                continue;
+            // NOTE: audio tracks don't have to be requested explicitly
+            // as the SFU will implicitly subscribe us to all of them,
+            // once they become available.
+            if (p.videoDimension && hasVideo(p)) {
+                const override = overrides[p.sessionId] ?? overrides[globalOverrideKey];
+                if (override?.enabled !== false) {
+                    subscriptions.push({
+                        userId: p.userId,
+                        sessionId: p.sessionId,
+                        trackType: TrackType.VIDEO,
+                        dimension: override?.dimension ?? p.videoDimension,
+                    });
+                }
+            }
+            if (p.screenShareDimension && hasScreenShare(p)) {
+                subscriptions.push({
+                    userId: p.userId,
+                    sessionId: p.sessionId,
+                    trackType: TrackType.SCREEN_SHARE,
+                    dimension: p.screenShareDimension,
+                });
+            }
+            if (hasScreenShareAudio(p)) {
+                subscriptions.push({
+                    userId: p.userId,
+                    sessionId: p.sessionId,
+                    trackType: TrackType.SCREEN_SHARE_AUDIO,
                 });
+            }
+        }
+        return subscriptions;
+    }
+    get overrides() {
+        return getCurrentValue(this.overrides$);
+    }
+}
+
+/**
+ * Watches a single audio or video element and attempts to recover playback
+ * after the element transitions to a paused or suspended state unexpectedly.
+ */
+class MediaPlaybackWatchdog {
+    constructor(opts) {
+        this.logger = videoLoggerSystem.getLogger('MediaPlaybackWatchdog');
+        this.controller = new AbortController();
+        this.attempt = 0;
+        this.disposed = false;
+        this.attach = () => {
+            if (this.disposed)
+                return;
+            const { signal } = this.controller;
+            this.element.addEventListener('pause', this.onPauseOrSuspend, { signal });
+            this.element.addEventListener('suspend', this.onPauseOrSuspend, { signal });
+            this.element.addEventListener('playing', this.onPlaying, { signal });
+        };
+        this.dispose = () => {
+            if (this.disposed)
+                return;
+            this.disposed = true;
+            this.controller.abort();
+            if (this.pendingTimer)
+                clearTimeout(this.pendingTimer);
+            this.pendingTimer = undefined;
+        };
+        this.onPlaying = () => {
+            if (this.attempt > 0) {
+                this.tracer.trace('mediaPlayback.recover.success', {
+                    kind: this.kind,
+                    attempts: this.attempt,
+                });
+            }
+            this.attempt = 0;
+            if (this.pendingTimer)
+                clearTimeout(this.pendingTimer);
+            this.pendingTimer = undefined;
+        };
+        this.onPauseOrSuspend = (event) => {
+            if (this.disposed)
+                return;
+            this.tracer.trace('mediaPlayback.paused', {
+                kind: this.kind,
+                reason: event.type,
             });
-            return () => {
-                cleanup();
-                // reset visibility state to UNKNOWN upon cleanup
-                // so that the layouts that are not actively observed
-                // can still function normally (runtime layout switching)
-                this.callState.updateParticipant(sessionId, (participant) => {
-                    const previousVisibilityState = participant.viewportVisibilityState ??
-                        DEFAULT_VIEWPORT_VISIBILITY_STATE;
-                    return {
-                        ...participant,
-                        viewportVisibilityState: {
-                            ...previousVisibilityState,
-                            [trackType]: VisibilityState.UNKNOWN,
-                        },
-                    };
+            this.scheduleRecovery();
+        };
+        this.scheduleRecovery = () => {
+            if (this.disposed || this.pendingTimer)
+                return;
+            const skipReason = this.computeSkipReason();
+            if (skipReason) {
+                this.tracer.trace('mediaPlayback.recover.skipped', {
+                    kind: this.kind,
+                    reason: skipReason,
                 });
-            };
+                return;
+            }
+            const delay = this.attempt === 0 ? 0 : retryInterval(this.attempt);
+            this.pendingTimer = setTimeout(this.attemptPlay, delay);
+        };
+        this.computeSkipReason = () => {
+            if (this.disposed)
+                return 'disposed';
+            if (!this.element.srcObject)
+                return 'noSrc';
+            if (this.element.ended)
+                return 'ended';
+            if (this.isBlocked())
+                return 'blocked';
+            const HAVE_CURRENT_DATA = 2;
+            if (this.element.readyState < HAVE_CURRENT_DATA)
+                return 'notReady';
+            if (!this.element.paused)
+                return 'notPaused';
+        };
+        this.attemptPlay = async () => {
+            this.pendingTimer = undefined;
+            if (this.disposed)
+                return;
+            this.attempt += 1;
+            this.tracer.trace('mediaPlayback.recover.attempt', {
+                kind: this.kind,
+                attempt: this.attempt,
+            });
+            try {
+                await timeboxed([this.element.play()], 2000);
+            }
+            catch (err) {
+                if (this.disposed)
+                    return;
+                this.logger.warn(`Failed to recover ${this.kind} playback`, err);
+                if (this.attempt >= 10) {
+                    this.tracer.trace('mediaPlayback.recover.giveUp', {
+                        kind: this.kind,
+                        attempts: this.attempt,
+                    });
+                    return;
+                }
+                this.scheduleRecovery();
+            }
         };
+        this.element = opts.element;
+        this.kind = opts.kind;
+        this.tracer = opts.tracer;
+        this.isBlocked = opts.isBlocked ?? (() => false);
+        this.attach();
+    }
+}
+
+/**
+ * A manager class that handles dynascale related tasks like:
+ *
+ * - binding video elements to session ids
+ * - binding audio elements to session ids
+ */
+class DynascaleManager {
+    /**
+     * Creates a new DynascaleManager instance.
+     */
+    constructor(callState, speaker, tracer, trackSubscriptionManager, blockedAudioTracker) {
+        this.logger = videoLoggerSystem.getLogger('DynascaleManager');
+        this.useWebAudio = false;
         /**
-         * Sets the viewport element to track bound video elements for visibility.
-         *
-         * @param element the viewport element.
+         * Closes the audio context if it was created.
          */
-        this.setViewport = (element) => {
-            return this.viewportTracker.setViewport(element);
+        this.dispose = async () => {
+            const context = this.audioContext;
+            if (context && context.state !== 'closed') {
+                document.removeEventListener('click', this.resumeAudioContext);
+                await context.close();
+                this.audioContext = undefined;
+            }
         };
         /**
          * Sets whether to use WebAudio API for audio playback.
@@ -9810,7 +10234,7 @@ class DynascaleManager {
                 this.callState.updateParticipantTracks(trackType, {
                     [sessionId]: { dimension },
                 });
-                this.applyTrackSubscriptions(debounceType);
+                this.trackSubscriptionManager.apply(debounceType);
             };
             const participant$ = this.callState.participants$.pipe(map((ps) => ps.find((p) => p.sessionId === sessionId)), takeWhile((participant) => !!participant), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
             /**
@@ -9899,6 +10323,11 @@ class DynascaleManager {
             // without prior user interaction:
             // https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
             videoElement.muted = true;
+            const playbackWatchdog = new MediaPlaybackWatchdog({
+                element: videoElement,
+                kind: 'video',
+                tracer: this.tracer,
+            });
             const trackKey = isVideoTrack ? 'videoStream' : 'screenShareStream';
             const streamSubscription = participant$
                 .pipe(distinctUntilKeyChanged(trackKey))
@@ -9908,14 +10337,14 @@ class DynascaleManager {
                     return;
                 videoElement.srcObject = source ?? null;
                 if (isSafari() || isFirefox()) {
-                    setTimeout(() => {
+                    setTimeout(async () => {
                         videoElement.srcObject = source ?? null;
-                        videoElement.play().catch((e) => {
+                        try {
+                            await timeboxed([videoElement.play()], 2000);
+                        }
+                        catch (e) {
                             this.logger.warn(`Failed to play stream`, e);
-                        });
-                        // we add extra delay until we attempt to force-play
-                        // the participant's media stream in Firefox and Safari,
-                        // as they seem to have some timing issues
+                        }
                     }, 25);
                 }
             });
@@ -9925,6 +10354,7 @@ class DynascaleManager {
                 publishedTracksSubscription?.unsubscribe();
                 streamSubscription.unsubscribe();
                 resizeObserver?.disconnect();
+                playbackWatchdog.dispose();
             };
         };
         /**
@@ -9942,7 +10372,6 @@ class DynascaleManager {
             const participant = this.callState.findParticipantBySessionId(sessionId);
             if (!participant || participant.isLocalParticipant)
                 return;
-            this.audioBindingsWatchdog?.register(audioElement, sessionId, trackType);
             const participant$ = this.callState.participants$.pipe(map((ps) => ps.find((p) => p.sessionId === sessionId)), takeWhile((p) => !!p), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
             const updateSinkId = (deviceId, audioContext) => {
                 if (!deviceId)
@@ -9961,6 +10390,7 @@ class DynascaleManager {
             };
             let sourceNode = undefined;
             let gainNode = undefined;
+            let audioWatchdog = undefined;
             const isAudioTrack = trackType === 'audioTrack';
             const trackKey = isAudioTrack ? 'audioStream' : 'screenShareAudioStream';
             const updateMediaStreamSubscription = participant$
@@ -9971,8 +10401,10 @@ class DynascaleManager {
                     return;
                 setTimeout(() => {
                     audioElement.srcObject = source ?? null;
+                    audioWatchdog?.dispose();
+                    audioWatchdog = undefined;
                     if (!source) {
-                        this.removeBlockedAudioElement(audioElement);
+                        this.blockedAudioTracker.markBlocked(audioElement, false);
                         return;
                     }
                     // Safari has a special quirk that prevents playing audio until the user
@@ -10000,10 +10432,16 @@ class DynascaleManager {
                             this.tracer.trace('audioPlaybackError', e.message);
                             if (e.name === 'NotAllowedError') {
                                 this.tracer.trace('audioPlaybackBlocked', null);
-                                this.addBlockedAudioElement(audioElement);
+                                this.blockedAudioTracker.markBlocked(audioElement, true);
                             }
                             this.logger.warn(`Failed to play audio stream`, e);
                         });
+                        audioWatchdog = new MediaPlaybackWatchdog({
+                            element: audioElement,
+                            kind: 'audio',
+                            tracer: this.tracer,
+                            isBlocked: () => this.blockedAudioTracker.isBlocked(audioElement),
+                        });
                     }
                     const { selectedDevice } = this.speaker.state;
                     if (selectedDevice)
@@ -10027,38 +10465,17 @@ class DynascaleManager {
             });
             audioElement.autoplay = true;
             return () => {
-                this.audioBindingsWatchdog?.unregister(sessionId, trackType);
-                this.removeBlockedAudioElement(audioElement);
+                this.blockedAudioTracker.markBlocked(audioElement, false);
                 sinkIdSubscription?.unsubscribe();
                 volumeSubscription.unsubscribe();
                 updateMediaStreamSubscription.unsubscribe();
                 audioElement.srcObject = null;
                 sourceNode?.disconnect();
                 gainNode?.disconnect();
+                audioWatchdog?.dispose();
+                audioWatchdog = undefined;
             };
         };
-        /**
-         * Plays all audio elements blocked by the browser's autoplay policy.
-         * Must be called from within a user gesture (e.g., click handler).
-         *
-         * @returns a promise that resolves when all blocked elements have been retried.
-         */
-        this.resumeAudio = async () => {
-            this.tracer.trace('resumeAudio', null);
-            const blocked = new Set();
-            await Promise.all(Array.from(getCurrentValue(this.blockedAudioElementsSubject), async (el) => {
-                try {
-                    if (el.srcObject) {
-                        await el.play();
-                    }
-                }
-                catch {
-                    this.logger.warn(`Can't resume audio for element: `, el);
-                    blocked.add(el);
-                }
-            }));
-            setCurrentValue(this.blockedAudioElementsSubject, blocked);
-        };
         this.getOrCreateAudioContext = () => {
             if (!this.useWebAudio)
                 return;
@@ -10111,57 +10528,124 @@ class DynascaleManager {
         this.callState = callState;
         this.speaker = speaker;
         this.tracer = tracer;
-        if (!isReactNative()) {
-            this.audioBindingsWatchdog = new AudioBindingsWatchdog(callState, tracer);
-        }
-    }
-    setSfuClient(sfuClient) {
-        this.sfuClient = sfuClient;
+        this.trackSubscriptionManager = trackSubscriptionManager;
+        this.blockedAudioTracker = blockedAudioTracker;
     }
-    get trackSubscriptions() {
-        const subscriptions = [];
-        // Use getParticipantsSnapshot() to bypass the observable pipeline
-        // and avoid stale data caused by shareReplay with no active subscribers
-        const participants = this.callState.getParticipantsSnapshot();
-        const videoTrackSubscriptionOverrides = this.videoTrackSubscriptionOverridesSubject.getValue();
-        for (const p of participants) {
-            if (p.isLocalParticipant)
-                continue;
-            // NOTE: audio tracks don't have to be requested explicitly
-            // as the SFU will implicitly subscribe us to all of them,
-            // once they become available.
-            if (p.videoDimension && hasVideo(p)) {
-                const override = videoTrackSubscriptionOverrides[p.sessionId] ??
-                    videoTrackSubscriptionOverrides[globalOverrideKey];
-                if (override?.enabled !== false) {
-                    subscriptions.push({
-                        userId: p.userId,
-                        sessionId: p.sessionId,
-                        trackType: TrackType.VIDEO,
-                        dimension: override?.dimension ?? p.videoDimension,
-                    });
-                }
-            }
-            if (p.screenShareDimension && hasScreenShare(p)) {
-                subscriptions.push({
-                    userId: p.userId,
-                    sessionId: p.sessionId,
-                    trackType: TrackType.SCREEN_SHARE,
-                    dimension: p.screenShareDimension,
+}
+
+const DEFAULT_THRESHOLD = 0.35;
+const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
+    videoTrack: VisibilityState.UNKNOWN,
+    screenShareTrack: VisibilityState.UNKNOWN,
+};
+class ViewportTracker {
+    constructor(callState) {
+        this.elementHandlerMap = new Map();
+        this.observer = null;
+        // in React children render before viewport is set, add
+        // them to the queue and observe them once the observer is ready
+        this.queueSet = new Set();
+        /**
+         * Method to set scrollable viewport as root for the IntersectionObserver, returns
+         * cleanup function to be invoked upon disposing of the DOM element to prevent memory leaks
+         */
+        this.setViewport = (viewportElement, options) => {
+            const cleanup = () => {
+                this.observer?.disconnect();
+                this.observer = null;
+                this.elementHandlerMap.clear();
+            };
+            this.observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    const handler = this.elementHandlerMap.get(entry.target);
+                    handler?.(entry);
                 });
-            }
-            if (hasScreenShareAudio(p)) {
-                subscriptions.push({
-                    userId: p.userId,
-                    sessionId: p.sessionId,
-                    trackType: TrackType.SCREEN_SHARE_AUDIO,
+            }, {
+                root: viewportElement,
+                ...options,
+                threshold: options?.threshold ?? DEFAULT_THRESHOLD,
+            });
+            if (this.queueSet.size) {
+                this.queueSet.forEach(([queueElement, queueHandler]) => {
+                    // check if element which requested observation is
+                    // a child of a viewport element, skip if isn't
+                    if (!viewportElement.contains(queueElement))
+                        return;
+                    this.observer.observe(queueElement);
+                    this.elementHandlerMap.set(queueElement, queueHandler);
                 });
+                this.queueSet.clear();
             }
-        }
-        return subscriptions;
-    }
-    get videoTrackSubscriptionOverrides() {
-        return getCurrentValue(this.videoTrackSubscriptionOverrides$);
+            return cleanup;
+        };
+        /**
+         * Method to set element to observe and handler to be triggered whenever IntersectionObserver
+         * detects a possible change in element's visibility within specified viewport, returns
+         * cleanup function to be invoked upon disposing of the DOM element to prevent memory leaks
+         */
+        this.observe = (element, handler) => {
+            const queueItem = [element, handler];
+            const cleanup = () => {
+                this.elementHandlerMap.delete(element);
+                this.observer?.unobserve(element);
+                this.queueSet.delete(queueItem);
+            };
+            if (this.elementHandlerMap.has(element))
+                return cleanup;
+            if (!this.observer) {
+                this.queueSet.add(queueItem);
+                return cleanup;
+            }
+            if (this.observer.root.contains(element)) {
+                this.elementHandlerMap.set(element, handler);
+                this.observer.observe(element);
+            }
+            return cleanup;
+        };
+        /**
+         * Tracks the given element for visibility changes and mirrors the result
+         * into `participant.viewportVisibilityState[trackType]` in `CallState`.
+         * Returns a function that unobserves the element and resets the visibility
+         * state back to `UNKNOWN`.
+         */
+        this.trackElementVisibility = (element, sessionId, trackType) => {
+            const cleanup = this.observe(element, (entry) => {
+                this.callState.updateParticipant(sessionId, (participant) => {
+                    const previousVisibilityState = participant.viewportVisibilityState ??
+                        DEFAULT_VIEWPORT_VISIBILITY_STATE;
+                    // observer triggers when the element is "moved" to be a fullscreen element
+                    // keep it VISIBLE if that happens to prevent fullscreen with placeholder
+                    const isVisible = entry.isIntersecting || document.fullscreenElement === element
+                        ? VisibilityState.VISIBLE
+                        : VisibilityState.INVISIBLE;
+                    return {
+                        ...participant,
+                        viewportVisibilityState: {
+                            ...previousVisibilityState,
+                            [trackType]: isVisible,
+                        },
+                    };
+                });
+            });
+            return () => {
+                cleanup();
+                // reset visibility state to UNKNOWN upon cleanup
+                // so that the layouts that are not actively observed
+                // can still function normally (runtime layout switching)
+                this.callState.updateParticipant(sessionId, (participant) => {
+                    const previousVisibilityState = participant.viewportVisibilityState ??
+                        DEFAULT_VIEWPORT_VISIBILITY_STATE;
+                    return {
+                        ...participant,
+                        viewportVisibilityState: {
+                            ...previousVisibilityState,
+                            [trackType]: VisibilityState.UNKNOWN,
+                        },
+                    };
+                });
+            };
+        };
+        this.callState = callState;
     }
 }
 
@@ -10325,6 +10809,50 @@ const CallTypes = new CallTypesRegistry([
     }),
 ]);
 
+/**
+ * A generic sliding-window rate limiter.
+ *
+ * Allows at most `maxAttempts` registrations inside a rolling `windowMs`.
+ * Attempts spaced further apart than `windowMs` are always allowed.
+ */
+class SlidingWindowRateLimiter {
+    constructor(maxAttempts, windowMs) {
+        this.timestamps = [];
+        /**
+         * Attempts to register a new event at `now`. Returns `true` if the attempt
+         * fits inside the budget (and records it), or `false` if the budget is
+         * exhausted (in which case no timestamp is recorded).
+         */
+        this.tryRegister = (now = Date.now()) => {
+            this.prune(now);
+            if (this.timestamps.length >= this.maxAttempts)
+                return false;
+            this.timestamps.push(now);
+            return true;
+        };
+        /**
+         * Clears the attempt history.
+         */
+        this.reset = () => {
+            this.timestamps = [];
+        };
+        /**
+         * Updates the budget and window size. Existing timestamps are kept; they
+         * will be pruned by the next `tryRegister` call.
+         */
+        this.setLimits = (maxAttempts, windowMs) => {
+            this.maxAttempts = maxAttempts;
+            this.windowMs = windowMs;
+        };
+        this.prune = (now) => {
+            const cutoff = now - this.windowMs;
+            this.timestamps = this.timestamps.filter((t) => t >= cutoff);
+        };
+        this.maxAttempts = maxAttempts;
+        this.windowMs = windowMs;
+    }
+}
+
 /**
  * Deactivates MediaStream (stops and removes tracks) to be later garbage collected
  *
@@ -10706,7 +11234,6 @@ const getScreenShareStream = async (options, tracer) => {
     const tag = `navigator.mediaDevices.getDisplayMedia.${getDisplayMediaExecId++}.`;
     try {
         const constraints = {
-            // @ts-expect-error - not present in types yet
             systemAudio: 'include',
             ...options,
             video: typeof options?.video === 'boolean'
@@ -10721,6 +11248,8 @@ const getScreenShareStream = async (options, tracer) => {
                 ? options.audio
                 : {
                     channelCount: { ideal: 2 },
+                    // @ts-expect-error not yet present in the types
+                    restrictOwnAudio: true,
                     echoCancellation: false,
                     autoGainControl: false,
                     noiseSuppression: false,
@@ -10834,6 +11363,7 @@ class DeviceManager {
          */
         this.stopOnLeave = true;
         this.subscriptions = [];
+        this.currentStreamCleanups = [];
         this.areSubscriptionsSetUp = false;
         this.isTrackStoppedDueToTrackEnd = false;
         this.filters = [];
@@ -10845,10 +11375,30 @@ class DeviceManager {
          * @internal
          */
         this.dispose = () => {
+            this.runCurrentStreamCleanups();
             this.subscriptions.forEach((s) => s());
             this.subscriptions = [];
             this.areSubscriptionsSetUp = false;
         };
+        this.runCurrentStreamCleanups = () => {
+            this.currentStreamCleanups.forEach((c) => c());
+            this.currentStreamCleanups = [];
+        };
+        this.setLocalInterrupted = (interrupted) => {
+            const localParticipant = this.call.state.localParticipant;
+            if (!localParticipant)
+                return;
+            this.call.state.updateParticipant(localParticipant.sessionId, (p) => {
+                const current = p.interruptedTracks ?? [];
+                const has = current.includes(this.trackType);
+                if (interrupted === has)
+                    return {};
+                const next = interrupted
+                    ? pushToIfMissing([...current], this.trackType)
+                    : removeFromIfPresent([...current], this.trackType);
+                return { interruptedTracks: next };
+            });
+        };
         this.call = call;
         this.state = state;
         this.trackType = trackType;
@@ -11072,7 +11622,9 @@ class DeviceManager {
                 // @ts-expect-error called to dispose the stream in RN
                 mediaStream.release();
             }
+            this.runCurrentStreamCleanups();
             this.state.setMediaStream(undefined, undefined);
+            this.setLocalInterrupted(false);
             this.filters.forEach((entry) => entry.stop?.());
         }
     }
@@ -11108,13 +11660,17 @@ class DeviceManager {
     async unmuteStream() {
         this.logger.debug('Starting stream');
         let stream;
-        let rootStream;
+        let rootStreamPromise;
         if (this.state.mediaStream &&
             this.getTracks().every((t) => t.readyState === 'live')) {
             stream = this.state.mediaStream;
             this.enableTracks();
         }
         else {
+            // We are about to compose a fresh filter chain and acquire a new
+            // root stream. Drop any listeners bound to the previous root stream
+            // before chainWith below registers new ones for the new chain.
+            this.runCurrentStreamCleanups();
             const defaultConstraints = this.state.defaultConstraints;
             const constraints = {
                 ...defaultConstraints,
@@ -11170,7 +11726,7 @@ class DeviceManager {
                         });
                     };
                     parentTrack.addEventListener('ended', handleParentTrackEnded);
-                    this.subscriptions.push(() => {
+                    this.currentStreamCleanups.push(() => {
                         parentTrack.removeEventListener('ended', handleParentTrackEnded);
                     });
                 });
@@ -11178,7 +11734,7 @@ class DeviceManager {
             };
             // the rootStream represents the stream coming from the actual device
             // e.g. camera or microphone stream
-            rootStream = this.getStream(constraints);
+            rootStreamPromise = this.getStream(constraints);
             // we publish the last MediaStream of the chain
             stream = await this.filters.reduce((parent, entry) => parent
                 .then((inputStream) => {
@@ -11188,43 +11744,71 @@ class DeviceManager {
             })
                 .then(chainWith(parent), (error) => {
                 this.logger.warn('Filter failed to start and will be ignored', error);
-                return parent;
-            }), rootStream);
-        }
-        if (this.call.state.callingState === CallingState.JOINED) {
-            await this.publishStream(stream);
-        }
-        if (this.state.mediaStream !== stream) {
-            this.state.setMediaStream(stream, await rootStream);
-            const handleTrackEnded = async () => {
-                await this.statusChangeSettled();
-                if (this.enabled) {
-                    this.isTrackStoppedDueToTrackEnd = true;
-                    setTimeout(() => {
-                        this.isTrackStoppedDueToTrackEnd = false;
-                    }, 2000);
-                    await this.disable();
-                }
-            };
-            const createTrackMuteHandler = (muted) => () => {
-                if (!isMobile() || this.trackType !== TrackType.VIDEO)
-                    return;
-                this.call.notifyTrackMuteState(muted, this.trackType).catch((err) => {
-                    this.logger.warn('Error while notifying track mute state', err);
-                });
-            };
-            stream.getTracks().forEach((track) => {
-                const muteHandler = createTrackMuteHandler(true);
-                const unmuteHandler = createTrackMuteHandler(false);
-                track.addEventListener('mute', muteHandler);
-                track.addEventListener('unmute', unmuteHandler);
-                track.addEventListener('ended', handleTrackEnded);
-                this.subscriptions.push(() => {
-                    track.removeEventListener('mute', muteHandler);
-                    track.removeEventListener('unmute', unmuteHandler);
-                    track.removeEventListener('ended', handleTrackEnded);
+                return parent;
+            }), rootStreamPromise);
+        }
+        if (this.call.state.callingState === CallingState.JOINED) {
+            await this.publishStream(stream);
+        }
+        if (this.state.mediaStream !== stream) {
+            const rootStream = await rootStreamPromise;
+            this.state.setMediaStream(stream, rootStream);
+            if (rootStream) {
+                const handleTrackEnded = async () => {
+                    this.setLocalInterrupted(false);
+                    await this.statusChangeSettled();
+                    if (this.enabled) {
+                        this.isTrackStoppedDueToTrackEnd = true;
+                        setTimeout(() => {
+                            this.isTrackStoppedDueToTrackEnd = false;
+                        }, 2000);
+                        await this.disable();
+                    }
+                };
+                const createTrackMuteHandler = (muted) => () => {
+                    this.setLocalInterrupted(muted);
+                    // WebKit's RTCRtpSender encoder can stay stalled after an iOS /
+                    // macOS audio session interruption even though the track is
+                    // unmuted. Re-arm the sender on every unmute for any WebKit
+                    // runtime (Safari + plain iOS WKWebViews). Skipped when the
+                    // page is hidden because the encoder won't resume until
+                    // foreground anyway.
+                    if (!muted && isWebKit() && document.visibilityState !== 'hidden') {
+                        this.call.refreshPublishedTrack(this.trackType).catch((err) => {
+                            this.logger.warn('Failed to refresh track on system unmute', err);
+                        });
+                    }
+                    // report all tracks on mobile, and only Video on desktop browsers
+                    if (isMobile() || this.trackType == TrackType.VIDEO) {
+                        this.call.tracer.trace('navigator.mediaDevices.muteStateUpdated', {
+                            trackType: TrackType[this.trackType],
+                            muted,
+                        });
+                        this.call
+                            .notifyTrackMuteState(muted, this.trackType)
+                            .catch((err) => {
+                            this.logger.warn('Error while notifying track mute state', err);
+                        });
+                    }
+                };
+                rootStream.getTracks().forEach((track) => {
+                    const muteHandler = createTrackMuteHandler(true);
+                    const unmuteHandler = createTrackMuteHandler(false);
+                    track.addEventListener('mute', muteHandler);
+                    track.addEventListener('unmute', unmuteHandler);
+                    track.addEventListener('ended', handleTrackEnded);
+                    this.currentStreamCleanups.push(() => {
+                        track.removeEventListener('mute', muteHandler);
+                        track.removeEventListener('unmute', unmuteHandler);
+                        track.removeEventListener('ended', handleTrackEnded);
+                    });
                 });
-            });
+                const initialMuted = rootStream.getTracks().some((t) => t.muted);
+                this.setLocalInterrupted(initialMuted);
+            }
+            else {
+                this.setLocalInterrupted(false);
+            }
         }
     }
     get mediaDeviceKind() {
@@ -11365,13 +11949,19 @@ class DeviceManagerState {
         this.statusSubject = new BehaviorSubject(undefined);
         this.optimisticStatusSubject = new BehaviorSubject(undefined);
         this.mediaStreamSubject = new BehaviorSubject(undefined);
+        this.rootMediaStreamSubject = new BehaviorSubject(undefined);
         this.selectedDeviceSubject = new BehaviorSubject(undefined);
         this.defaultConstraintsSubject = new BehaviorSubject(undefined);
         /**
          * An Observable that emits the current media stream, or `undefined` if the device is currently disabled.
-         *
          */
         this.mediaStream$ = this.mediaStreamSubject.asObservable();
+        /**
+         * An Observable that emits the raw device media stream (before any filters are applied),
+         * or `undefined` if the device is currently disabled. When no filters are active, this
+         * emits the same stream as `mediaStream$`.
+         */
+        this.rootMediaStream$ = this.rootMediaStreamSubject.asObservable();
         /**
          * An Observable that emits the currently selected device
          */
@@ -11427,6 +12017,14 @@ class DeviceManagerState {
     get mediaStream() {
         return getCurrentValue(this.mediaStream$);
     }
+    /**
+     * The raw device media stream (before any filters are applied), or `undefined`
+     * if the device is currently disabled. When no filters are active, this is the
+     * same as `mediaStream`.
+     */
+    get rootMediaStream() {
+        return getCurrentValue(this.rootMediaStream$);
+    }
     /**
      * @internal
      * @param status
@@ -11451,6 +12049,7 @@ class DeviceManagerState {
      */
     setMediaStream(stream, rootStream) {
         setCurrentValue(this.mediaStreamSubject, stream);
+        setCurrentValue(this.rootMediaStreamSubject, rootStream);
         if (rootStream) {
             this.setDevice(this.getDeviceIdFromStream(rootStream));
         }
@@ -12702,6 +13301,16 @@ class Call {
         this.fastReconnectDeadlineSeconds = 0;
         this.disconnectionTimeoutSeconds = 0;
         this.lastOfflineTimestamp = 0;
+        // (10 attempts per rolling 120 s window).
+        this.rejoinRateLimiter = new SlidingWindowRateLimiter(10, 120000);
+        // "Network doesn't support WebRTC" detector: counts peer-connection
+        // failures where ICE never reached `connected`/`completed`.
+        this.maxIceFailuresWithoutConnect = 2;
+        this.iceFailuresWithoutConnect = 0;
+        // Consecutive-negotiation-failure detector: stops the reconnect loop when
+        // the SFU keeps failing to negotiate SDP for us.
+        this.maxConsecutiveNegotiationFailures = 3;
+        this.consecutiveNegotiationFailures = 0;
         // maintain the order of publishing tracks to restore them after a reconnection
         // it shouldn't contain duplicates
         this.trackPublishOrder = [];
@@ -12999,11 +13608,26 @@ class Call {
                 this.publisher = undefined;
                 await this.sfuClient?.leaveAndClose(leaveReason);
                 this.sfuClient = undefined;
-                this.dynascaleManager.setSfuClient(undefined);
-                await this.dynascaleManager.dispose();
+                this.trackSubscriptionManager.setSfuClient(undefined);
+                this.trackSubscriptionManager.dispose();
+                this.audioBindingsWatchdog?.dispose();
+                await this.dynascaleManager?.dispose();
                 this.state.setCallingState(CallingState.LEFT);
                 this.state.setParticipants([]);
                 this.state.dispose();
+                // Reset reconnect-related accumulators so a future `call.join()` on the
+                // same instance starts with a fresh budget. The `Call` may be reused
+                // (see `Call.test.ts` "can reuse call instance") so this is required.
+                // Strategy/reason/attempts must also be cleared: when `leave()` is
+                // reached via `giveUpAndLeave()` the success-path reset at the end of
+                // `joinFlow` never runs, leaving stale values that would make the next
+                // fresh `join()` send a stale `ReconnectDetails` to the SFU.
+                this.rejoinRateLimiter.reset();
+                this.iceFailuresWithoutConnect = 0;
+                this.consecutiveNegotiationFailures = 0;
+                this.reconnectStrategy = WebsocketReconnectStrategy.UNSPECIFIED;
+                this.reconnectReason = '';
+                this.reconnectAttempts = 0;
                 // Call all leave call hooks, e.g. to clean up global event handlers
                 this.leaveCallHooks.forEach((hook) => hook());
                 this.initialized = false;
@@ -13297,7 +13921,7 @@ class Call {
                 : previousSfuClient;
             this.sfuClient = sfuClient;
             this.unifiedSessionId ?? (this.unifiedSessionId = sfuClient.sessionId);
-            this.dynascaleManager.setSfuClient(sfuClient);
+            this.trackSubscriptionManager.setSfuClient(sfuClient);
             const clientDetails = await getClientDetails();
             // we don't need to send JoinRequest if we are re-using an existing healthy SFU client
             if (previousSfuClient !== sfuClient) {
@@ -13354,9 +13978,20 @@ class Call {
             // when performing fast reconnect, or when we reuse the same SFU client,
             // (ws remained healthy), we just need to restore the ICE connection
             if (performingFastReconnect) {
-                // the SFU automatically issues an ICE restart on the subscriber
-                // we don't have to do it ourselves
-                await this.restoreICE(sfuClient, { includeSubscriber: false });
+                // The SFU automatically issues an ICE restart on the subscriber,
+                // so we only need to decide about the publisher. If the publisher's
+                // peer connection is still stable (ICE still connected end-to-end),
+                // the signal WebSocket drop was the only problem — the new WS alone
+                // is enough, and restarting ICE would add unnecessary SDP/ICE churn.
+                const publisherIsStable = this.publisher?.isStable() ?? true;
+                const includePublisher = !!this.publisher?.isPublishing() && !publisherIsStable;
+                if (!includePublisher && this.publisher?.isPublishing()) {
+                    this.logger.info('[Reconnect] FAST: skipping publisher ICE restart, publisher PC is stable');
+                }
+                await this.restoreICE(sfuClient, {
+                    includeSubscriber: false,
+                    includePublisher,
+                });
             }
             else {
                 const connectionConfig = toRtcConfiguration(this.credentials.ice_servers);
@@ -13399,6 +14034,15 @@ class Call {
             // reset the reconnect strategy to unspecified after a successful reconnection
             this.reconnectStrategy = WebsocketReconnectStrategy.UNSPECIFIED;
             this.reconnectReason = '';
+            // A successful SFU join handshake resets the consecutive-negotiation
+            // counter (negotiation just succeeded). It does NOT reset
+            // `iceFailuresWithoutConnect` or the rolling `rejoinRateLimiter`;
+            // those track WebRTC-level health and rejoin frequency, which are not
+            // proven by the SFU handshake alone. ICE-failures-without-connect is
+            // cleared via the `onIceConnected` callback when the peer connection
+            // actually reaches `connected`/`completed` end-to-end. The rejoin
+            // rolling window decays naturally as old timestamps age out.
+            this.consecutiveNegotiationFailures = 0;
             this.logger.info(`Joined call ${this.cid}`);
         };
         /**
@@ -13412,7 +14056,7 @@ class Call {
             return {
                 strategy,
                 announcedTracks,
-                subscriptions: this.dynascaleManager.trackSubscriptions,
+                subscriptions: this.trackSubscriptionManager.subscriptions,
                 reconnectAttempt: this.reconnectAttempts,
                 fromSfuId: migratingFromSfuId || '',
                 previousSessionId: performingRejoin ? previousSessionId || '' : '',
@@ -13516,6 +14160,12 @@ class Call {
                         this.logger.warn(message, err);
                     });
                 },
+                onIceConnected: () => {
+                    // ICE has reached `connected`/`completed` end-to-end on at least
+                    // one peer connection, WebRTC is actually working, so the
+                    // "ICE never connected" failure budget can be cleared.
+                    this.iceFailuresWithoutConnect = 0;
+                },
             };
             this.subscriber = new Subscriber(basePeerConnectionOptions);
             // anonymous users can't publish anything hence, there is no need
@@ -13621,7 +14271,9 @@ class Call {
          * @internal
          *
          * @param strategy the reconnection strategy to use.
-         * @param reason the reason for the reconnection.
+         * @param reason the reason for the reconnection. Pass a `ReconnectReason.*`
+         *   constant when the SDK should react to it (e.g.
+         *   `ICE_NEVER_CONNECTED` increments the unsupported-network counter).
          */
         this.reconnect = async (strategy, reason) => {
             if (this.state.callingState === CallingState.RECONNECTING ||
@@ -13642,6 +14294,30 @@ class Call {
                         this.state.setCallingState(CallingState.RECONNECTING_FAILED);
                     }
                 };
+                const giveUpAndLeave = async (message) => {
+                    this.logger.warn(`[Reconnect] Giving up: ${message}. Leaving the call.`);
+                    // If we're mid-iteration, the state can be JOINING; `Call.leave` would
+                    // then wait for JOINED before proceeding, but no more attempts will run
+                    // so JOINED never comes. Transition to RECONNECTING so `leave()` proceeds.
+                    if (this.state.callingState === CallingState.JOINING) {
+                        this.state.setCallingState(CallingState.RECONNECTING);
+                    }
+                    try {
+                        await this.leave({ message });
+                    }
+                    catch (err) {
+                        this.logger.warn(`[Reconnect] leave() failed after ${message}`, err);
+                    }
+                };
+                // Count this entry into reconnect if it was triggered by a peer
+                // connection that never reached `connected`/`completed`.
+                if (reason === ReconnectReason.ICE_NEVER_CONNECTED) {
+                    this.iceFailuresWithoutConnect++;
+                    if (this.iceFailuresWithoutConnect >= this.maxIceFailuresWithoutConnect) {
+                        await giveUpAndLeave('webrtc_unsupported_network');
+                        return;
+                    }
+                }
                 let attempt = 0;
                 do {
                     const reconnectingTime = Date.now() - reconnectStartTime;
@@ -13652,6 +14328,16 @@ class Call {
                         await markAsReconnectingFailed();
                         return;
                     }
+                    // Rejoin rate limit: bound the number of REJOIN (and MIGRATE)
+                    // transitions inside a rolling window. FAST is not counted because
+                    // it does not issue a new backend `joinCall`.
+                    if (this.reconnectStrategy === WebsocketReconnectStrategy.REJOIN ||
+                        this.reconnectStrategy === WebsocketReconnectStrategy.MIGRATE) {
+                        if (!this.rejoinRateLimiter.tryRegister()) {
+                            await giveUpAndLeave('rejoin_attempt_limit_exceeded');
+                            return;
+                        }
+                    }
                     // we don't increment reconnect attempts for the FAST strategy.
                     if (this.reconnectStrategy !== WebsocketReconnectStrategy.FAST) {
                         this.reconnectAttempts++;
@@ -13679,6 +14365,8 @@ class Call {
                                 ensureExhausted(this.reconnectStrategy, 'Unknown reconnection strategy');
                                 break;
                         }
+                        // reconnection worked — reset the negotiation-failure streak.
+                        this.consecutiveNegotiationFailures = 0;
                         break; // do-while loop, reconnection worked, exit the loop
                     }
                     catch (error) {
@@ -13693,7 +14381,16 @@ class Call {
                             await markAsReconnectingFailed();
                             return;
                         }
-                        await sleep(500);
+                        if (error instanceof NegotiationError) {
+                            this.consecutiveNegotiationFailures++;
+                            if (this.consecutiveNegotiationFailures >=
+                                this.maxConsecutiveNegotiationFailures) {
+                                await giveUpAndLeave('repeated_negotiation_failures');
+                                return;
+                            }
+                        }
+                        // exponential backoff with jitter, capped at 5 s
+                        await sleep(retryInterval(attempt));
                         const wasMigrating = this.reconnectStrategy === WebsocketReconnectStrategy.MIGRATE;
                         const mustPerformRejoin = (Date.now() - reconnectStartTime) / 1000 >
                             this.fastReconnectDeadlineSeconds;
@@ -13802,7 +14499,7 @@ class Call {
         this.registerReconnectHandlers = () => {
             // handles the legacy "goAway" event
             const unregisterGoAway = this.on('goAway', () => {
-                this.reconnect(WebsocketReconnectStrategy.MIGRATE, 'goAway').catch((err) => this.logger.warn('[Reconnect] Error reconnecting', err));
+                this.reconnect(WebsocketReconnectStrategy.MIGRATE, ReconnectReason.GO_AWAY).catch((err) => this.logger.warn('[Reconnect] Error reconnecting', err));
             });
             // handles the "error" event, through which the SFU can request a reconnect
             const unregisterOnError = this.on('error', (e) => {
@@ -13821,7 +14518,7 @@ class Call {
                     });
                 }
                 else {
-                    this.reconnect(strategy, error?.message || 'SFU Error').catch((err) => {
+                    this.reconnect(strategy, error?.message || ReconnectReason.SFU_ERROR).catch((err) => {
                         this.logger.warn('[Reconnect] Error reconnecting', err);
                     });
                 }
@@ -13845,7 +14542,7 @@ class Call {
                                 strategy = WebsocketReconnectStrategy.REJOIN;
                             }
                         }
-                        this.reconnect(strategy, 'Going online').catch((err) => {
+                        this.reconnect(strategy, ReconnectReason.NETWORK_BACK_ONLINE).catch((err) => {
                             this.logger.warn('[Reconnect] Error reconnecting after going online', err);
                         });
                     });
@@ -13906,7 +14603,7 @@ class Call {
             const { remoteParticipants } = this.state;
             if (remoteParticipants.length <= 0)
                 return;
-            this.dynascaleManager.applyTrackSubscriptions(undefined);
+            this.trackSubscriptionManager.apply(undefined);
         };
         /**
          * Starts publishing the given video stream to the call.
@@ -13988,10 +14685,12 @@ class Call {
          * @param trackTypes the track types to update the call state with.
          */
         this.updateLocalStreamState = async (mediaStream, ...trackTypes) => {
-            if (!this.sfuClient || !this.sfuClient.sessionId)
+            const sessionId = this.sfuClient?.sessionId;
+            if (!sessionId)
                 return;
             await this.notifyTrackMuteState(!mediaStream, ...trackTypes);
-            const { sessionId } = this.sfuClient;
+            if (this.sfuClient?.sessionId !== sessionId)
+                return;
             for (const trackType of trackTypes) {
                 const streamStateProp = trackTypeToParticipantStreamKey(trackType);
                 if (!streamStateProp)
@@ -14004,6 +14703,20 @@ class Call {
                 }));
             }
         };
+        /**
+         * Re-arms the encoder for a currently published track type. Useful for
+         * working around WebKit's stalled sender bug after an iOS audio session
+         * interruption (Siri, PSTN call).
+         *
+         * @internal
+         *
+         * @param trackType the track type to refresh.
+         */
+        this.refreshPublishedTrack = async (trackType) => {
+            if (!this.publisher)
+                return;
+            await this.publisher.refreshTrack(trackType);
+        };
         /**
          * Updates the preferred publishing options
          *
@@ -14665,7 +15378,7 @@ class Call {
          * @param trackType the video mode.
          */
         this.trackElementVisibility = (element, sessionId, trackType) => {
-            return this.dynascaleManager.trackElementVisibility(element, sessionId, trackType);
+            return this.viewportTracker?.trackElementVisibility(element, sessionId, trackType);
         };
         /**
          * Sets the viewport element to track bound video elements for visibility.
@@ -14673,7 +15386,7 @@ class Call {
          * @param element the viewport element.
          */
         this.setViewport = (element) => {
-            return this.dynascaleManager.setViewport(element);
+            return this.viewportTracker?.setViewport(element);
         };
         /**
          * Binds a DOM <video> element to the given session id.
@@ -14691,7 +15404,7 @@ class Call {
          * @param trackType the kind of video.
          */
         this.bindVideoElement = (videoElement, sessionId, trackType) => {
-            const unbind = this.dynascaleManager.bindVideoElement(videoElement, sessionId, trackType);
+            const unbind = this.dynascaleManager?.bindVideoElement(videoElement, sessionId, trackType);
             if (!unbind)
                 return;
             this.leaveCallHooks.add(unbind);
@@ -14711,21 +15424,28 @@ class Call {
          * @param trackType the kind of audio.
          */
         this.bindAudioElement = (audioElement, sessionId, trackType = 'audioTrack') => {
-            const unbind = this.dynascaleManager.bindAudioElement(audioElement, sessionId, trackType);
+            const unbind = this.dynascaleManager?.bindAudioElement(audioElement, sessionId, trackType);
             if (!unbind)
                 return;
-            this.leaveCallHooks.add(unbind);
-            return () => {
-                this.leaveCallHooks.delete(unbind);
+            this.audioBindingsWatchdog?.register(audioElement, sessionId, trackType);
+            const cleanup = () => {
                 unbind();
+                this.audioBindingsWatchdog?.unregister(sessionId, trackType);
+            };
+            this.leaveCallHooks.add(cleanup);
+            return () => {
+                this.leaveCallHooks.delete(cleanup);
+                cleanup();
             };
         };
         /**
          * Plays all audio elements blocked by the browser's autoplay policy.
+         * Must be called from within a user gesture (e.g., click handler).
+         *
+         * Subscribe to `call.blockedAudioTracker.autoplayBlocked$` to know when a
+         * gesture is required.
          */
-        this.resumeAudio = () => {
-            return this.dynascaleManager.resumeAudio();
-        };
+        this.resumeAudio = () => this.blockedAudioTracker.resumeAudio();
         /**
          * Binds a DOM <img> element to this call's thumbnail (if enabled in settings).
          *
@@ -14763,21 +15483,21 @@ class Call {
          * preference has effect on. Affects all participants by default.
          */
         this.setPreferredIncomingVideoResolution = (resolution, sessionIds) => {
-            this.dynascaleManager.setVideoTrackSubscriptionOverrides(resolution
+            this.trackSubscriptionManager.setOverrides(resolution
                 ? {
                     enabled: true,
                     dimension: resolution,
                 }
                 : undefined, sessionIds);
-            this.dynascaleManager.applyTrackSubscriptions();
+            this.trackSubscriptionManager.apply();
         };
         /**
          * Enables or disables incoming video from all remote call participants,
          * and removes any preference for preferred resolution.
          */
         this.setIncomingVideoEnabled = (enabled) => {
-            this.dynascaleManager.setVideoTrackSubscriptionOverrides(enabled ? undefined : { enabled: false });
-            this.dynascaleManager.applyTrackSubscriptions();
+            this.trackSubscriptionManager.setOverrides(enabled ? undefined : { enabled: false });
+            this.trackSubscriptionManager.apply();
         };
         /**
          * Sets the maximum amount of time a user can remain waiting for a reconnect
@@ -14787,6 +15507,39 @@ class Call {
         this.setDisconnectionTimeout = (timeoutSeconds) => {
             this.disconnectionTimeoutSeconds = timeoutSeconds;
         };
+        /**
+         * Configures the rolling-window limit for REJOIN/MIGRATE attempts. Once
+         * `maxAttempts` rejoins have been registered inside `windowSeconds`, the
+         * SDK stops retrying and transitions the call to `LEFT` with the
+         * `rejoin_attempt_limit_exceeded` leave message.
+         *
+         * Defaults: 10 attempts per 120 seconds (aligned with the Swift SDK).
+         * Both arguments are clamped to a minimum of 1.
+         */
+        this.setRejoinAttemptLimit = (maxAttempts, windowSeconds) => {
+            this.rejoinRateLimiter.setLimits(Math.max(1, maxAttempts), Math.max(1, windowSeconds) * 1000);
+        };
+        /**
+         * Configures how many peer-connection failures where ICE never reached
+         * `connected`/`completed` are tolerated before the SDK concludes that the
+         * current network cannot support WebRTC and transitions the call to
+         * `LEFT` with the `webrtc_unsupported_network` leave message.
+         *
+         * Default: 2. Clamped to a minimum of 1.
+         */
+        this.setMaxIceFailuresWithoutConnect = (n) => {
+            this.maxIceFailuresWithoutConnect = Math.max(1, n);
+        };
+        /**
+         * Configures how many consecutive SDP `NegotiationError`s are tolerated
+         * before the SDK stops retrying and transitions the call to `LEFT` with
+         * the `repeated_negotiation_failures` leave message.
+         *
+         * Default: 3. Clamped to a minimum of 1.
+         */
+        this.setMaxConsecutiveNegotiationFailures = (n) => {
+            this.maxConsecutiveNegotiationFailures = Math.max(1, n);
+        };
         /**
          * Enables the provided client capabilities.
          */
@@ -14825,7 +15578,13 @@ class Call {
         this.microphone = new MicrophoneManager(this, preferences);
         this.speaker = new SpeakerManager(this, preferences);
         this.screenShare = new ScreenShareManager(this);
-        this.dynascaleManager = new DynascaleManager(this.state, this.speaker, this.tracer);
+        this.trackSubscriptionManager = new TrackSubscriptionManager(this.state, this.tracer);
+        this.blockedAudioTracker = new BlockedAudioTracker(this.tracer);
+        if (typeof document !== 'undefined') {
+            this.audioBindingsWatchdog = new AudioBindingsWatchdog(this.state, this.tracer);
+            this.viewportTracker = new ViewportTracker(this.state);
+            this.dynascaleManager = new DynascaleManager(this.state, this.speaker, this.tracer, this.trackSubscriptionManager, this.blockedAudioTracker);
+        }
     }
     /**
      * A flag indicating whether the call is "ringing" type of call.
@@ -14898,12 +15657,118 @@ const APIErrorCodes = {
  */
 class StableWSConnection {
     constructor(client) {
+        /** Incremented when a new WS connection is made */
+        this.wsID = 1;
+        // Connection lifecycle flags.
+        /** We only make 1 attempt to reconnect at the same time.. */
+        this.isConnecting = false;
+        /** To avoid reconnect if client is disconnected */
+        this.isDisconnected = false;
+        /** Boolean that indicates if we have a working connection to the server */
+        this.isHealthy = false;
+        /** Boolean that indicates if the connection promise is resolved */
+        this.isConnectionOpenResolved = false;
+        // Failure counters (drive retry/backoff scheduling).
+        /** consecutive failures influence the duration of the timeout */
+        this.consecutiveFailures = 0;
+        /** keep track of the total number of failures */
+        this.totalFailures = 0;
+        // Health-check pings + connection-staleness check.
+        /** Send a health check message every 25 seconds */
+        this.pingInterval = 25 * 1000;
+        this.connectionCheckTimeout = this.pingInterval + 10 * 1000;
+        /** Store the last event time for health checks */
+        this.lastEvent = null;
         this._log = (msg, extra = {}, level = 'info') => {
             this.client.logger[level](`connection:${msg}`, extra);
         };
         this.setClient = (client) => {
             this.client = client;
         };
+        /**
+         * connect - Connect to the WS URL
+         * the default 15s timeout allows between 2~3 tries
+         * @return Promise that completes once the first health check message is received
+         */
+        this.connect = async (timeout = 15000) => {
+            if (this.isConnecting) {
+                throw Error(`You've called connect twice, can only attempt 1 connection at the time`);
+            }
+            this.isDisconnected = false;
+            try {
+                const healthCheck = await this._connect(timeout);
+                this.consecutiveFailures = 0;
+                this._log(`connect() - Established ws connection with healthcheck: ${healthCheck}`);
+            }
+            catch (caught) {
+                const error = caught;
+                this.isHealthy = false;
+                this.consecutiveFailures += 1;
+                if (error.code === KnownCodes.TOKEN_EXPIRED &&
+                    !this.client.tokenManager.isStatic()) {
+                    this._log('connect() - WS failure due to expired token, so going to try to reload token and reconnect');
+                    this._reconnect({ refreshToken: true });
+                }
+                else if (!error.isWSFailure) {
+                    // API rejected the connection and we should not retry
+                    throw new Error(JSON.stringify({
+                        code: error.code,
+                        StatusCode: error.StatusCode,
+                        message: error.message,
+                        isWSFailure: error.isWSFailure,
+                    }));
+                }
+                else {
+                    // Transient WS failure (e.g., handshake watchdog). Kick off a
+                    // reconnect chain so _waitForHealthy(timeout) below has something
+                    // to poll for. Owning the trigger here (rather than inside
+                    // _connect()'s catch) keeps a single failure from spawning two
+                    // parallel chains - one from this catch and one from _reconnect's
+                    // own catch when _connect was called from there.
+                    this._reconnect();
+                }
+            }
+            return await this._waitForHealthy(timeout);
+        };
+        /**
+         * _waitForHealthy polls the promise connection to see if its resolved until it times out
+         * the default 15s timeout allows between 2~3 tries
+         * @param timeout duration(ms)
+         */
+        this._waitForHealthy = async (timeout = 15000) => {
+            return Promise.race([
+                (async () => {
+                    const interval = 50; // ms
+                    for (let i = 0; i <= timeout; i += interval) {
+                        try {
+                            return await this.connectionOpen;
+                        }
+                        catch (caught) {
+                            const error = caught;
+                            if (i === timeout) {
+                                throw new Error(JSON.stringify({
+                                    code: error.code,
+                                    StatusCode: error.StatusCode,
+                                    message: error.message,
+                                    isWSFailure: error.isWSFailure,
+                                }));
+                            }
+                            await sleep(interval);
+                        }
+                    }
+                })(),
+                (async () => {
+                    await sleep(timeout);
+                    this.isConnecting = false;
+                    throw new Error(JSON.stringify({
+                        code: '',
+                        StatusCode: '',
+                        message: 'initial WS connection could not be established',
+                        isWSFailure: true,
+                    }));
+                })(),
+            ]);
+        };
         /**
          * Builds and returns the url for websocket.
          * @private
@@ -14916,11 +15781,166 @@ class StableWSConnection {
             params.set('X-Stream-Client', this.client.getUserAgent());
             return `${this.client.wsBaseURL}/connect?${params.toString()}`;
         };
+        /**
+         * disconnect - Disconnect the connection and doesn't recover...
+         */
+        this.disconnect = (timeout) => {
+            this._log(`disconnect() - Closing the websocket connection for wsID ${this.wsID}`);
+            this.wsID += 1;
+            this.isConnecting = false;
+            this.isDisconnected = true;
+            // start by removing all the listeners
+            if (this.healthCheckTimeoutRef) {
+                getTimers().clearInterval(this.healthCheckTimeoutRef);
+            }
+            if (this.connectionCheckTimeoutRef) {
+                clearInterval(this.connectionCheckTimeoutRef);
+            }
+            removeConnectionEventListeners(this.onlineStatusChanged);
+            this.isHealthy = false;
+            let isClosedPromise;
+            // and finally close...
+            // Assigning to local here because we will remove it from this before the
+            // promise resolves.
+            const { ws } = this;
+            if (ws && ws.close && ws.readyState === ws.OPEN) {
+                isClosedPromise = new Promise((resolve) => {
+                    const onclose = (event) => {
+                        this._log(`disconnect() - resolving isClosedPromise ${event ? 'with' : 'without'} close frame`, { event });
+                        resolve();
+                    };
+                    ws.onclose = onclose;
+                    // In case we don't receive close frame websocket server in time,
+                    // lets not wait for more than 1 second.
+                    setTimeout(onclose, timeout != null ? timeout : 1000);
+                });
+                this._log(`disconnect() - Manually closed connection by calling client.disconnect()`);
+                ws.close(KnownCodes.WS_CLOSED_SUCCESS, 'Manually closed connection by calling client.disconnect()');
+            }
+            else {
+                this._log(`disconnect() - ws connection doesn't exist or it is already closed.`);
+                isClosedPromise = Promise.resolve();
+            }
+            delete this.ws;
+            return isClosedPromise;
+        };
+        /**
+         * _connect - Connect to the WS endpoint
+         *
+         * @param timeoutMs handshake watchdog deadline in ms. Defaults to
+         *   `client.defaultWSTimeout` when not provided. Top-level `connect(timeout)`
+         *   passes its own timeout through so caller-supplied deadlines are honored.
+         * @return Promise that completes once the first health check message is received
+         */
+        this._connect = async (timeoutMs) => {
+            if (this.isConnecting)
+                return; // ignore _connect if it's currently trying to connect
+            this.isConnecting = true;
+            // Snapshot of the connection-id reject closure owned by THIS attempt.
+            // Captured at function entry so that even early failures (e.g.,
+            // tokenManager.loadToken throwing before we reach the WS phase) can
+            // settle the promise the caller is awaiting. Re-captured below if
+            // _connect itself sets up a fresh promise. If a concurrent
+            // openConnection() rotates `client.rejectConnectionId` later, our
+            // captured closure still settles only the original promise (P1) and
+            // never poisons the newer one (P2).
+            let ownRejectConnectionId = this.client.rejectConnectionId;
+            let isTokenReady = false;
+            try {
+                this._log(`_connect() - waiting for token`);
+                await this.client.tokenManager.tokenReady();
+                isTokenReady = true;
+            }
+            catch {
+                // token provider has failed before, so try again
+            }
+            try {
+                if (!isTokenReady) {
+                    this._log(`_connect() - tokenProvider failed before, so going to retry`);
+                    await this.client.tokenManager.loadToken();
+                }
+                if (!this.client.isConnectionIdPromisePending) {
+                    this.client._setupConnectionIdPromise();
+                    // recapture: we just rotated the resolver ourselves, the new
+                    // closure is the one bound to the promise this attempt owns.
+                    ownRejectConnectionId = this.client.rejectConnectionId;
+                }
+                this._setupConnectionPromise();
+                const wsURL = this._buildUrl();
+                this._log(`_connect() - Connecting to ${wsURL}`);
+                const WS = this.client.options.WebSocketImpl ?? WebSocket;
+                this.ws = new WS(wsURL);
+                this.ws.onopen = this.onopen.bind(this, this.wsID);
+                this.ws.onclose = this.onclose.bind(this, this.wsID);
+                this.ws.onerror = this.onerror.bind(this, this.wsID);
+                this.ws.onmessage = this.onmessage.bind(this, this.wsID);
+                // race the WS handshake against an explicit deadline so a silent
+                // network drop (e.g., carrier NAT or firewall) cannot wedge _connect()
+                const handshakeTimeout = timeoutMs ?? this.client.defaultWSTimeout;
+                const timers = getTimers();
+                let handshakeTimeoutId;
+                let response;
+                try {
+                    response = await Promise.race([
+                        this.connectionOpen,
+                        new Promise((_, reject) => {
+                            handshakeTimeoutId = timers.setTimeout(() => {
+                                const err = new Error(`WS handshake timed out after ${handshakeTimeout}ms`);
+                                err.isWSFailure = true;
+                                reject(err);
+                            }, handshakeTimeout);
+                        }),
+                    ]);
+                }
+                finally {
+                    timers.clearTimeout(handshakeTimeoutId);
+                }
+                this.isConnecting = false;
+                // If we were disconnected during the handshake (e.g. closeConnection()
+                // ran while a background _reconnect's _connect was in flight), tear
+                // down the new WS and throw so the caller of connect() does not get
+                // a misleading "success" for a connection that has already been
+                // aborted. We must NOT skip the throw and just return undefined: the
+                // outer connect() would otherwise fall through to _waitForHealthy(),
+                // which would observe the already-resolved connectionOpen promise
+                // and resolve with a ConnectedEvent for a torn-down connection.
+                if (this.isDisconnected) {
+                    if (this.ws && this.ws.readyState !== this.ws.CLOSED) {
+                        this._destroyCurrentWSConnection();
+                    }
+                    throw new Error('WS handshake aborted: disconnect() ran while connecting');
+                }
+                if (response) {
+                    this.connectionID = response.connection_id;
+                    this.client.resolveConnectionId?.(this.connectionID);
+                    return response;
+                }
+            }
+            catch (caught) {
+                const err = caught;
+                this.isConnecting = false;
+                this._log(`_connect() - Error - `, err);
+                // Reject THIS attempt's connection-id promise (P1) directly via the
+                // captured closure. Whether or not a concurrent openConnection() has
+                // since rotated client.rejectConnectionId to a newer promise (P2),
+                // calling ownRejectConnectionId only settles P1 - P2 is untouched.
+                // P1's awaiters (e.g., doAxiosRequest awaiting connectionIdPromise)
+                // therefore fail fast instead of being orphaned.
+                ownRejectConnectionId?.(err);
+                // connectionOpen is per-instance and not subject to rotation, so
+                // calling it unconditionally is safe (and a no-op if already settled).
+                this.rejectConnectionOpen?.(err);
+                // tear down a half-open WS so it does not linger and fire a stale wsID later
+                if (this.ws && this.ws.readyState !== this.ws.CLOSED) {
+                    this._destroyCurrentWSConnection();
+                }
+                throw err;
+            }
+        };
         /**
          * onlineStatusChanged - this function is called when the browser connects or disconnects from the internet.
          *
          * @param {Event} event Event with type online or offline
-         *
          */
         this.onlineStatusChanged = (event) => {
             if (event.type === 'offline') {
@@ -15018,16 +16038,12 @@ class StableWSConnection {
                 return;
             this._log('onclose() - onclose callback - ' + event.code, { event, wsID });
             if (event.code === KnownCodes.WS_CLOSED_SUCCESS) {
-                // this is a permanent error raised by stream..
+                // this is a permanent error raised by stream.
                 // usually caused by invalid auth details
                 const error = new Error(`WS connection reject with error ${event.reason}`);
-                // @ts-expect-error type issue
                 error.reason = event.reason;
-                // @ts-expect-error type issue
                 error.code = event.code;
-                // @ts-expect-error type issue
                 error.wasClean = event.wasClean;
-                // @ts-expect-error type issue
                 error.target = event.target;
                 this.rejectConnectionOpen?.(error);
                 this._log(`onclose() - WS connection reject with error ${event.reason}`, {
@@ -15165,205 +16181,8 @@ class StableWSConnection {
             }, this.connectionCheckTimeout);
         };
         this.client = client;
-        /** consecutive failures influence the duration of the timeout */
-        this.consecutiveFailures = 0;
-        /** keep track of the total number of failures */
-        this.totalFailures = 0;
-        /** We only make 1 attempt to reconnect at the same time.. */
-        this.isConnecting = false;
-        /** To avoid reconnect if client is disconnected */
-        this.isDisconnected = false;
-        /** Boolean that indicates if the connection promise is resolved */
-        this.isConnectionOpenResolved = false;
-        /** Boolean that indicates if we have a working connection to the server */
-        this.isHealthy = false;
-        /** Incremented when a new WS connection is made */
-        this.wsID = 1;
-        /** Store the last event time for health checks */
-        this.lastEvent = null;
-        /** Send a health check message every 25 seconds */
-        this.pingInterval = 25 * 1000;
-        this.connectionCheckTimeout = this.pingInterval + 10 * 1000;
         addConnectionEventListeners(this.onlineStatusChanged);
     }
-    /**
-     * connect - Connect to the WS URL
-     * the default 15s timeout allows between 2~3 tries
-     * @return {ConnectAPIResponse<ConnectedEvent>} Promise that completes once the first health check message is received
-     */
-    async connect(timeout = 15000) {
-        if (this.isConnecting) {
-            throw Error(`You've called connect twice, can only attempt 1 connection at the time`);
-        }
-        this.isDisconnected = false;
-        try {
-            const healthCheck = await this._connect();
-            this.consecutiveFailures = 0;
-            this._log(`connect() - Established ws connection with healthcheck: ${healthCheck}`);
-        }
-        catch (error) {
-            this.isHealthy = false;
-            this.consecutiveFailures += 1;
-            if (
-            // @ts-expect-error type issue
-            error.code === KnownCodes.TOKEN_EXPIRED &&
-                !this.client.tokenManager.isStatic()) {
-                this._log('connect() - WS failure due to expired token, so going to try to reload token and reconnect');
-                this._reconnect({ refreshToken: true });
-            }
-            else {
-                // @ts-expect-error type issue
-                if (!error.isWSFailure) {
-                    // API rejected the connection and we should not retry
-                    throw new Error(JSON.stringify({
-                        // @ts-expect-error type issue
-                        code: error.code,
-                        // @ts-expect-error type issue
-                        StatusCode: error.StatusCode,
-                        // @ts-expect-error type issue
-                        message: error.message,
-                        // @ts-expect-error type issue
-                        isWSFailure: error.isWSFailure,
-                    }));
-                }
-            }
-        }
-        return await this._waitForHealthy(timeout);
-    }
-    /**
-     * _waitForHealthy polls the promise connection to see if its resolved until it times out
-     * the default 15s timeout allows between 2~3 tries
-     * @param timeout duration(ms)
-     */
-    async _waitForHealthy(timeout = 15000) {
-        return Promise.race([
-            (async () => {
-                const interval = 50; // ms
-                for (let i = 0; i <= timeout; i += interval) {
-                    try {
-                        return await this.connectionOpen;
-                    }
-                    catch (error) {
-                        if (i === timeout) {
-                            throw new Error(JSON.stringify({
-                                code: error.code,
-                                StatusCode: error.StatusCode,
-                                message: error.message,
-                                isWSFailure: error.isWSFailure,
-                            }));
-                        }
-                        await sleep(interval);
-                    }
-                }
-            })(),
-            (async () => {
-                await sleep(timeout);
-                this.isConnecting = false;
-                throw new Error(JSON.stringify({
-                    code: '',
-                    StatusCode: '',
-                    message: 'initial WS connection could not be established',
-                    isWSFailure: true,
-                }));
-            })(),
-        ]);
-    }
-    /**
-     * disconnect - Disconnect the connection and doesn't recover...
-     *
-     */
-    disconnect(timeout) {
-        this._log(`disconnect() - Closing the websocket connection for wsID ${this.wsID}`);
-        this.wsID += 1;
-        this.isConnecting = false;
-        this.isDisconnected = true;
-        // start by removing all the listeners
-        if (this.healthCheckTimeoutRef) {
-            getTimers().clearInterval(this.healthCheckTimeoutRef);
-        }
-        if (this.connectionCheckTimeoutRef) {
-            clearInterval(this.connectionCheckTimeoutRef);
-        }
-        removeConnectionEventListeners(this.onlineStatusChanged);
-        this.isHealthy = false;
-        let isClosedPromise;
-        // and finally close...
-        // Assigning to local here because we will remove it from this before the
-        // promise resolves.
-        const { ws } = this;
-        if (ws && ws.close && ws.readyState === ws.OPEN) {
-            isClosedPromise = new Promise((resolve) => {
-                const onclose = (event) => {
-                    this._log(`disconnect() - resolving isClosedPromise ${event ? 'with' : 'without'} close frame`, { event });
-                    resolve();
-                };
-                ws.onclose = onclose;
-                // In case we don't receive close frame websocket server in time,
-                // lets not wait for more than 1 second.
-                setTimeout(onclose, timeout != null ? timeout : 1000);
-            });
-            this._log(`disconnect() - Manually closed connection by calling client.disconnect()`);
-            ws.close(KnownCodes.WS_CLOSED_SUCCESS, 'Manually closed connection by calling client.disconnect()');
-        }
-        else {
-            this._log(`disconnect() - ws connection doesn't exist or it is already closed.`);
-            isClosedPromise = Promise.resolve();
-        }
-        delete this.ws;
-        return isClosedPromise;
-    }
-    /**
-     * _connect - Connect to the WS endpoint
-     *
-     * @return {ConnectAPIResponse<ConnectedEvent>} Promise that completes once the first health check message is received
-     */
-    async _connect() {
-        if (this.isConnecting)
-            return; // ignore _connect if it's currently trying to connect
-        this.isConnecting = true;
-        let isTokenReady = false;
-        try {
-            this._log(`_connect() - waiting for token`);
-            await this.client.tokenManager.tokenReady();
-            isTokenReady = true;
-        }
-        catch {
-            // token provider has failed before, so try again
-        }
-        try {
-            if (!isTokenReady) {
-                this._log(`_connect() - tokenProvider failed before, so going to retry`);
-                await this.client.tokenManager.loadToken();
-            }
-            if (!this.client.isConnectionIsPromisePending) {
-                this.client._setupConnectionIdPromise();
-            }
-            this._setupConnectionPromise();
-            const wsURL = this._buildUrl();
-            this._log(`_connect() - Connecting to ${wsURL}`);
-            const WS = this.client.options.WebSocketImpl ?? WebSocket;
-            this.ws = new WS(wsURL);
-            this.ws.onopen = this.onopen.bind(this, this.wsID);
-            this.ws.onclose = this.onclose.bind(this, this.wsID);
-            this.ws.onerror = this.onerror.bind(this, this.wsID);
-            this.ws.onmessage = this.onmessage.bind(this, this.wsID);
-            const response = await this.connectionOpen;
-            this.isConnecting = false;
-            if (response) {
-                this.connectionID = response.connection_id;
-                this.client.resolveConnectionId?.(this.connectionID);
-                return response;
-            }
-        }
-        catch (err) {
-            this.client._setupConnectionIdPromise();
-            this.isConnecting = false;
-            // @ts-expect-error type issue
-            this._log(`_connect() - Error - `, err);
-            this.client.rejectConnectionId?.(err);
-            throw err;
-        }
-    }
     /**
      * _reconnect - Retry the connection to WS endpoint
      *
@@ -15410,7 +16229,8 @@ class StableWSConnection {
             this._log('_reconnect() - Finished recoverCallBack');
             this.consecutiveFailures = 0;
         }
-        catch (error) {
+        catch (caught) {
+            const error = caught;
             this.isHealthy = false;
             this.consecutiveFailures += 1;
             if (error.code === KnownCodes.TOKEN_EXPIRED &&
@@ -15967,7 +16787,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.48.0", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.50.0", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),
@@ -16075,7 +16895,7 @@ class StreamClient {
     get connectionIdPromise() {
         return this.connectionIdPromiseSafe?.();
     }
-    get isConnectionIsPromisePending() {
+    get isConnectionIdPromisePending() {
         return this.connectionIdPromiseSafe?.checkPending() ?? false;
     }
     get wsPromise() {