@stream-io/video-client 1.49.0 → 1.51.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]' ||
@@ -4605,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.
@@ -4659,6 +4735,7 @@ var rxUtils = /*#__PURE__*/Object.freeze({
     createSubscription: createSubscription,
     getCurrentValue: getCurrentValue,
     setCurrentValue: setCurrentValue,
+    setCurrentValueAsync: setCurrentValueAsync,
     updateValue: updateValue
 });
 
@@ -6283,7 +6360,7 @@ const getSdkVersion = (sdk) => {
     return sdk ? `${sdk.major}.${sdk.minor}.${sdk.patch}` : '0.0.0-development';
 };
 
-const version = "1.49.0";
+const version = "1.51.0";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -6436,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.
  */
@@ -6479,7 +6581,8 @@ var browsers = /*#__PURE__*/Object.freeze({
     isChrome: isChrome,
     isFirefox: isFirefox,
     isSafari: isSafari,
-    isSupportedBrowser: isSupportedBrowser
+    isSupportedBrowser: isSupportedBrowser,
+    isWebKit: isWebKit
 });
 
 /**
@@ -7376,7 +7479,7 @@ class BasePeerConnection {
         this.on = (event, fn) => {
             const getTag = () => this.tag;
             this.subscriptions.push(this.dispatcher.on(event, getTag, (e) => {
-                const lockKey = `pc.${this.lock}.${event}`;
+                const lockKey = this.eventLockKey(event);
                 withoutConcurrency(lockKey, async () => fn(e)).catch((err) => {
                     if (this.isDisposed)
                         return;
@@ -7384,6 +7487,13 @@ class BasePeerConnection {
                 });
             }));
         };
+        /**
+         * Returns the per-event `withoutConcurrency` tag used to serialize the
+         * dispatcher handler for `event` on this peer connection.
+         */
+        this.eventLockKey = (event) => {
+            return `pc.${this.lock}.${event}`;
+        };
         /**
          * Appends the trickled ICE candidates to the `RTCPeerConnection`.
          */
@@ -7637,7 +7747,7 @@ class BasePeerConnection {
     /**
      * Disposes the `RTCPeerConnection` instance.
      */
-    dispose() {
+    async dispose() {
         clearTimeout(this.iceRestartTimeout);
         this.iceRestartTimeout = undefined;
         clearTimeout(this.preConnectStuckTimeout);
@@ -7659,6 +7769,7 @@ class BasePeerConnection {
         pc.removeEventListener('signalingstatechange', this.onSignalingChange);
         pc.removeEventListener('iceconnectionstatechange', this.onIceConnectionStateChange);
         pc.removeEventListener('icegatheringstatechange', this.onIceGatherChange);
+        pc.removeEventListener('connectionstatechange', this.onConnectionStateChange);
         this.unsubscribeIceTrickle?.();
         this.subscriptions.forEach((unsubscribe) => unsubscribe());
         this.subscriptions = [];
@@ -7686,8 +7797,14 @@ class TransceiverCache {
          * Gets the transceiver for the given publish option.
          */
         this.get = (publishOption) => {
-            return this.cache.find((bundle) => bundle.publishOption.id === publishOption.id &&
-                bundle.publishOption.trackType === publishOption.trackType);
+            return this.getBy(publishOption.id, publishOption.trackType);
+        };
+        /**
+         * Gets the transceiver for the given publish option id and track type.
+         */
+        this.getBy = (publishOptionId, trackType) => {
+            return this.cache.find((bundle) => bundle.publishOption.id === publishOptionId &&
+                bundle.publishOption.trackType === trackType);
         };
         /**
          * Updates the cached bundle with the given patch.
@@ -7955,6 +8072,39 @@ 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');
+    }
+};
+const fromRTCDegradationPreference = (preference) => {
+    switch (preference) {
+        case 'balanced':
+            return DegradationPreference.BALANCED;
+        case 'maintain-framerate':
+            return DegradationPreference.MAINTAIN_FRAMERATE;
+        case 'maintain-resolution':
+            return DegradationPreference.MAINTAIN_RESOLUTION;
+        // @ts-expect-error not in the typedefs yet
+        case 'maintain-framerate-and-resolution':
+            return DegradationPreference.MAINTAIN_FRAMERATE_AND_RESOLUTION;
+        default:
+            return DegradationPreference.UNSPECIFIED;
+    }
+};
+
 /**
  * The `Publisher` is responsible for publishing/unpublishing media streams to/from the SFU
  *
@@ -7988,13 +8138,13 @@ class Publisher extends BasePeerConnection {
                 // create a clone of the track as otherwise the same trackId will
                 // appear in the SDP in multiple transceivers
                 const trackToPublish = this.cloneTrack(track);
-                const { transceiver } = this.transceiverCache.get(publishOption) || {};
-                if (!transceiver) {
+                const bundle = this.transceiverCache.get(publishOption);
+                if (!bundle) {
                     await this.addTransceiver(trackToPublish, publishOption, options);
                 }
                 else {
-                    const previousTrack = transceiver.sender.track;
-                    await this.updateTransceiver(transceiver, trackToPublish, trackType, options);
+                    const previousTrack = bundle.transceiver.sender.track;
+                    await this.updateTransceiver(bundle, trackToPublish, options);
                     if (!isReactNative()) {
                         this.stopTrack(previousTrack);
                     }
@@ -8016,7 +8166,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`);
@@ -8027,13 +8179,20 @@ class Publisher extends BasePeerConnection {
         /**
          * Updates the transceiver with the given track and track type.
          */
-        this.updateTransceiver = async (transceiver, track, trackType, options = {}) => {
+        this.updateTransceiver = async (bundle, track, options = {}) => {
+            const { transceiver, publishOption } = bundle;
+            const trackType = publishOption.trackType;
             const sender = transceiver.sender;
             if (sender.track)
                 this.trackIdToTrackType.delete(sender.track.id);
             await sender.replaceTrack(track);
-            if (track)
+            if (track) {
                 this.trackIdToTrackType.set(track.id, trackType);
+                if (isFirefox() && bundle.videoSender) {
+                    // restore the encoding config from the cache, if any
+                    await this.changePublishQuality(bundle.videoSender, bundle);
+                }
+            }
             if (isAudioTrackType(trackType)) {
                 await this.updateAudioPublishOptions(trackType, options);
             }
@@ -8093,7 +8252,7 @@ class Publisher extends BasePeerConnection {
                     continue;
                 // it is safe to stop the track here, it is a clone
                 this.stopTrack(transceiver.sender.track);
-                await this.updateTransceiver(transceiver, null, publishOption.trackType);
+                await this.updateTransceiver(item, null);
             }
         };
         /**
@@ -8114,35 +8273,74 @@ class Publisher extends BasePeerConnection {
             return false;
         };
         /**
-         * Stops the cloned track that is being published to the SFU.
+         * 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.stopTracks = (...trackTypes) => {
+        this.refreshTrack = async (trackType) => {
             for (const item of this.transceiverCache.items()) {
-                const { publishOption, transceiver } = item;
-                if (!trackTypes.includes(publishOption.trackType))
+                if (item.publishOption.trackType !== trackType)
                     continue;
-                this.stopTrack(transceiver.sender.track);
+                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.
+         */
+        this.stopTracks = async (...trackTypes) => {
+            return withoutConcurrency(this.eventLockKey('changePublishQuality'), async () => {
+                for (const item of this.transceiverCache.items()) {
+                    const { publishOption, transceiver } = item;
+                    if (!trackTypes.includes(publishOption.trackType))
+                        continue;
+                    const track = transceiver.sender.track;
+                    await this.silenceSenderOnFirefox(item);
+                    this.stopTrack(track);
+                }
+            });
+        };
         /**
          * Stops all the cloned tracks that are being published to the SFU.
          */
-        this.stopAllTracks = () => {
-            for (const { transceiver } of this.transceiverCache.items()) {
-                this.stopTrack(transceiver.sender.track);
-            }
-            for (const track of this.clonedTracks) {
-                this.stopTrack(track);
-            }
+        this.stopAllTracks = async () => {
+            return withoutConcurrency(this.eventLockKey('changePublishQuality'), async () => {
+                for (const item of this.transceiverCache.items()) {
+                    const track = item.transceiver.sender.track;
+                    await this.silenceSenderOnFirefox(item);
+                    this.stopTrack(track);
+                }
+                for (const track of this.clonedTracks) {
+                    this.stopTrack(track);
+                }
+            });
         };
-        this.changePublishQuality = async (videoSender) => {
-            const { trackType, layers, publishOptionId } = videoSender;
-            const enabledLayers = layers.filter((l) => l.active);
+        this.changePublishQuality = async (videoSender, bundle) => {
+            const enabledLayers = videoSender.layers.filter((l) => l.active);
             const tag = 'Update publish quality:';
             this.logger.info(`${tag} requested layers by SFU:`, enabledLayers);
-            const transceiverId = this.transceiverCache.find((t) => t.publishOption.id === publishOptionId &&
-                t.publishOption.trackType === trackType);
-            const sender = transceiverId?.transceiver.sender;
+            const sender = bundle?.transceiver.sender;
             if (!sender) {
                 return this.logger.warn(`${tag} no video sender found.`);
             }
@@ -8150,7 +8348,7 @@ class Publisher extends BasePeerConnection {
             if (params.encodings.length === 0) {
                 return this.logger.warn(`${tag} there are no encodings set.`);
             }
-            const codecInUse = transceiverId?.publishOption.codec?.name;
+            const codecInUse = bundle?.publishOption.codec?.name;
             const usesSvcCodec = codecInUse && isSvcCodec(codecInUse);
             let changed = false;
             for (const encoder of params.encodings) {
@@ -8190,6 +8388,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);
@@ -8344,6 +8548,72 @@ class Publisher extends BasePeerConnection {
             track.stop();
             this.clonedTracks.delete(track);
         };
+        /**
+         * Silences a Firefox sender on the wire during unpublish.
+         *
+         * Firefox keeps emitting RTP after track.stop(), but the right lever
+         * differs by track type:
+         *   - audio: `replaceTrack(null)` is the only reliable silencer;
+         *     `setParameters({encodings:[...active:false]})` does NOT stop
+         *     the Opus encoder.
+         *   - video: `setParameters({encodings:[...active:false]})` pauses
+         *     the encoder; `replaceTrack(null)` does NOT reliably stop the
+         *     video encoder. The prior active=true configuration is captured
+         *     onto `bundle.videoSender` so `updateTransceiver` can restore
+         *     it on the next publish.
+         *
+         * No-op on non-Firefox browsers and during teardown.
+         */
+        this.silenceSenderOnFirefox = async (bundle) => {
+            if (this.isDisposed || !isFirefox())
+                return;
+            const { transceiver, publishOption } = bundle;
+            if (isAudioTrackType(publishOption.trackType)) {
+                await transceiver.sender.replaceTrack(null).catch((err) => {
+                    this.logger.warn('Failed to clear audio sender track', err);
+                });
+                return;
+            }
+            await this.disableAllEncodings(bundle);
+        };
+        this.disableAllEncodings = async (bundle) => {
+            const { transceiver, publishOption } = bundle;
+            const sender = transceiver.sender;
+            const params = sender.getParameters();
+            if (!params.encodings || params.encodings.length === 0)
+                return;
+            if (!bundle.videoSender) {
+                this.transceiverCache.update(publishOption, {
+                    videoSender: {
+                        trackType: publishOption.trackType,
+                        publishOptionId: publishOption.id,
+                        codec: publishOption.codec,
+                        degradationPreference: fromRTCDegradationPreference(params.degradationPreference),
+                        layers: params.encodings.map((e) => ({
+                            name: e.rid ?? 'q',
+                            active: e.active ?? true,
+                            maxBitrate: e.maxBitrate ?? 0,
+                            scaleResolutionDownBy: e.scaleResolutionDownBy ?? 0,
+                            maxFramerate: e.maxFramerate ?? 0,
+                            // @ts-expect-error scalabilityMode is not in the typedefs yet
+                            scalabilityMode: e.scalabilityMode ?? '',
+                        })),
+                    },
+                });
+            }
+            let changed = false;
+            for (const encoding of params.encodings) {
+                if (encoding.active !== false) {
+                    encoding.active = false;
+                    changed = true;
+                }
+            }
+            if (!changed)
+                return;
+            await sender.setParameters(params).catch((err) => {
+                this.logger.error('Failed to disable video sender encodings:', err);
+            });
+        };
         this.publishOptions = publishOptions;
         this.on('iceRestart', (iceRestart) => {
             if (iceRestart.peerType !== PeerType.PUBLISHER_UNSPECIFIED)
@@ -8352,7 +8622,16 @@ class Publisher extends BasePeerConnection {
         });
         this.on('changePublishQuality', async (event) => {
             for (const videoSender of event.videoSenders) {
-                await this.changePublishQuality(videoSender);
+                // if not publishing, update the encodingConfigCache and don't modify the state.
+                // we'll apply this config on the next publish/unmute.
+                const { trackType, publishOptionId } = videoSender;
+                const bundle = this.transceiverCache.getBy(publishOptionId, trackType);
+                if (bundle) {
+                    this.transceiverCache.update(bundle.publishOption, { videoSender });
+                }
+                if (isFirefox() && !this.isPublishing(trackType))
+                    continue;
+                await this.changePublishQuality(videoSender, bundle);
             }
         });
         this.on('changePublishOptions', (event) => {
@@ -8363,13 +8642,48 @@ class Publisher extends BasePeerConnection {
     /**
      * Disposes this Publisher instance.
      */
-    dispose() {
-        super.dispose();
-        this.stopAllTracks();
+    async dispose() {
+        await super.dispose();
+        try {
+            await this.stopAllTracks();
+        }
+        catch (err) {
+            this.logger.warn('Failed to stop tracks during dispose', err);
+        }
         this.clonedTracks.clear();
     }
 }
 
+/**
+ * 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.
@@ -8411,27 +8725,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({
@@ -8457,13 +8778,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',
@@ -9186,36 +9524,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;
@@ -9548,140 +9856,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 = () => {
@@ -9713,6 +9935,8 @@ class AudioBindingsWatchdog {
         this.stop = () => {
             clearInterval(this.watchdogInterval);
         };
+        this.tracer = tracer;
+        this.state = state;
         this.unsubscribeCallingState = createSubscription(state.callingState$, (callingState) => {
             if (!this.enabled)
                 return;
@@ -9726,61 +9950,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,
@@ -9802,106 +10062,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.
@@ -9946,7 +10355,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 }));
             /**
@@ -10035,6 +10444,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))
@@ -10044,14 +10458,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);
                 }
             });
@@ -10061,6 +10475,7 @@ class DynascaleManager {
                 publishedTracksSubscription?.unsubscribe();
                 streamSubscription.unsubscribe();
                 resizeObserver?.disconnect();
+                playbackWatchdog.dispose();
             };
         };
         /**
@@ -10078,7 +10493,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)
@@ -10097,6 +10511,7 @@ class DynascaleManager {
             };
             let sourceNode = undefined;
             let gainNode = undefined;
+            let audioWatchdog = undefined;
             const isAudioTrack = trackType === 'audioTrack';
             const trackKey = isAudioTrack ? 'audioStream' : 'screenShareAudioStream';
             const updateMediaStreamSubscription = participant$
@@ -10107,8 +10522,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
@@ -10136,10 +10553,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)
@@ -10163,38 +10586,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;
@@ -10247,57 +10649,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;
     }
 }
 
@@ -10964,8 +11433,8 @@ const normalize = (options) => {
             : false,
     };
 };
-const createSyntheticDevice = (deviceId, kind) => {
-    return { deviceId, kind, label: '', groupId: '' };
+const createSyntheticDevice = (deviceId, kind, label = '') => {
+    return { deviceId, kind, label, groupId: '' };
 };
 const readPreferences = (storageKey) => {
     try {
@@ -11015,9 +11484,12 @@ class DeviceManager {
          */
         this.stopOnLeave = true;
         this.subscriptions = [];
+        this.currentStreamCleanups = [];
         this.areSubscriptionsSetUp = false;
         this.isTrackStoppedDueToTrackEnd = false;
         this.filters = [];
+        this.virtualDevicesSubject = new BehaviorSubject([]);
+        this.virtualDeviceConcurrencyTag = Symbol('virtualDeviceConcurrencyTag');
         this.statusChangeConcurrencyTag = Symbol('statusChangeConcurrencyTag');
         this.filterRegistrationConcurrencyTag = Symbol('filterRegistrationConcurrencyTag');
         /**
@@ -11026,9 +11498,30 @@ class DeviceManager {
          * @internal
          */
         this.dispose = () => {
+            this.runCurrentStreamCleanups();
             this.subscriptions.forEach((s) => s());
             this.subscriptions = [];
             this.areSubscriptionsSetUp = false;
+            this.virtualDevicesSubject.next([]);
+        };
+        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;
@@ -11061,14 +11554,100 @@ class DeviceManager {
         }
     }
     /**
-     * Lists the available audio/video devices
+     * Lists the available audio/video devices
+     *
+     * Note: It prompts the user for a permission to use devices (if not already granted)
+     *
+     * @returns an Observable that will be updated if a device is connected or disconnected
+     */
+    listDevices() {
+        return combineLatest([this.getDevices(), this.virtualDevicesSubject]).pipe(map(([real, virtual]) => [
+            ...real,
+            ...virtual.map((d) => createSyntheticDevice(d.deviceId, d.kind, d.label)),
+        ]));
+    }
+    /**
+     * Registers a virtual camera or microphone backed by a caller-supplied
+     * stream factory. The device appears in `listDevices()` and can be selected
+     * via `select()` like any real device.
      *
-     * Note: It prompts the user for a permission to use devices (if not already granted)
+     * Web only. React Native is not supported.
      *
-     * @returns an Observable that will be updated if a device is connected or disconnected
+     * Only supported for camera and microphone managers; calling on any other
+     * manager throws.
      */
-    listDevices() {
-        return this.getDevices();
+    registerVirtualDevice(virtualDevice) {
+        if (isReactNative()) {
+            throw new Error('Virtual devices are not supported on React Native.');
+        }
+        if (this.trackType !== TrackType.AUDIO &&
+            this.trackType !== TrackType.VIDEO) {
+            throw new Error('Virtual devices are only supported for camera and microphone.');
+        }
+        const deviceId = `stream-virtual:${generateUUIDv4()}`;
+        const entry = {
+            deviceId,
+            kind: this.mediaDeviceKind,
+            ...virtualDevice,
+        };
+        setCurrentValue(this.virtualDevicesSubject, (current) => [
+            ...current,
+            entry,
+        ]);
+        return {
+            deviceId: entry.deviceId,
+            unregister: async () => {
+                await withoutConcurrency(this.virtualDeviceConcurrencyTag, async () => {
+                    setCurrentValue(this.virtualDevicesSubject, (current) => current.filter((d) => d !== entry));
+                    if (this.activeVirtualSession?.deviceId === deviceId) {
+                        await this.stopActiveVirtualSession();
+                    }
+                });
+                if (this.state.selectedDevice === deviceId) {
+                    await this.statusChangeSettled();
+                    await this.disable({ forceStop: true });
+                    await this.select(undefined);
+                }
+            },
+        };
+    }
+    sanitizeVirtualStream(stream) {
+        stream.getTracks().forEach((track) => {
+            const originalGetSettings = track.getSettings.bind(track);
+            track.getSettings = () => {
+                const settings = originalGetSettings();
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { deviceId, ...rest } = settings;
+                return rest;
+            };
+        });
+        return stream;
+    }
+    findVirtualDevice(deviceId) {
+        if (!deviceId)
+            return undefined;
+        return getCurrentValue(this.virtualDevicesSubject).find((d) => d.deviceId === deviceId);
+    }
+    async stopActiveVirtualSession() {
+        const session = this.activeVirtualSession;
+        this.activeVirtualSession = undefined;
+        await session?.stop?.();
+    }
+    async getSelectedStream(constraints) {
+        const deviceId = this.state.selectedDevice;
+        if (!deviceId?.startsWith('stream-virtual')) {
+            return this.getStream(constraints);
+        }
+        return withoutConcurrency(this.virtualDeviceConcurrencyTag, async () => {
+            const virtualDevice = this.findVirtualDevice(deviceId);
+            if (!virtualDevice) {
+                throw new Error(`Virtual device is not registered: ${deviceId}`);
+            }
+            await this.stopActiveVirtualSession();
+            const { stream, stop } = await virtualDevice.getUserMedia(constraints);
+            this.activeVirtualSession = { deviceId, stop };
+            return this.sanitizeVirtualStream(stream);
+        });
     }
     /**
      * Returns `true` when this device is in enabled state.
@@ -11228,6 +11807,9 @@ class DeviceManager {
             }
         });
     }
+    getResolvedConstraints(constraints) {
+        return constraints;
+    }
     publishStream(stream, options) {
         return this.call.publish(stream, this.trackType, options);
     }
@@ -11248,12 +11830,15 @@ class DeviceManager {
         this.muteLocalStream(stopTracks);
         const allEnded = this.getTracks().every((t) => t.readyState === 'ended');
         if (allEnded) {
+            await this.stopActiveVirtualSession();
             // @ts-expect-error release() is present in react-native-webrtc
             if (typeof mediaStream.release === 'function') {
                 // @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?.());
         }
     }
@@ -11289,20 +11874,24 @@ 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 = {
+            const constraints = this.getResolvedConstraints({
                 ...defaultConstraints,
                 deviceId: this.state.selectedDevice
                     ? { exact: this.state.selectedDevice }
                     : undefined,
-            };
+            });
             /**
              * Chains two media streams together.
              *
@@ -11351,7 +11940,7 @@ class DeviceManager {
                         });
                     };
                     parentTrack.addEventListener('ended', handleParentTrackEnded);
-                    this.subscriptions.push(() => {
+                    this.currentStreamCleanups.push(() => {
                         parentTrack.removeEventListener('ended', handleParentTrackEnded);
                     });
                 });
@@ -11359,7 +11948,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.getSelectedStream(constraints);
             // we publish the last MediaStream of the chain
             stream = await this.filters.reduce((parent, entry) => parent
                 .then((inputStream) => {
@@ -11370,42 +11959,70 @@ class DeviceManager {
                 .then(chainWith(parent), (error) => {
                 this.logger.warn('Filter failed to start and will be ignored', error);
                 return parent;
-            }), rootStream);
+            }), rootStreamPromise);
         }
         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);
+            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() {
@@ -11551,7 +12168,6 @@ class DeviceManagerState {
         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();
         /**
@@ -11649,7 +12265,10 @@ class DeviceManagerState {
         setCurrentValue(this.mediaStreamSubject, stream);
         setCurrentValue(this.rootMediaStreamSubject, rootStream);
         if (rootStream) {
-            this.setDevice(this.getDeviceIdFromStream(rootStream));
+            const derived = this.getDeviceIdFromStream(rootStream);
+            if (derived) {
+                this.setDevice(derived);
+            }
         }
     }
     /**
@@ -11862,7 +12481,7 @@ class CameraManager extends DeviceManager {
     getDevices() {
         return getVideoDevices(this.call.tracer);
     }
-    getStream(constraints) {
+    getResolvedConstraints(constraints) {
         constraints.width = this.targetResolution.width;
         constraints.height = this.targetResolution.height;
         // We can't set both device id and facing mode
@@ -11873,6 +12492,9 @@ class CameraManager extends DeviceManager {
             constraints.facingMode =
                 this.state.direction === 'front' ? 'user' : 'environment';
         }
+        return constraints;
+    }
+    getStream(constraints) {
         return getVideoStream(constraints, this.call.tracer);
     }
 }
@@ -13200,14 +13822,17 @@ class Call {
                 this.sfuStatsReporter?.flush();
                 this.sfuStatsReporter?.stop();
                 this.sfuStatsReporter = undefined;
-                this.subscriber?.dispose();
+                this.lastStatsOptions = undefined;
+                await this.subscriber?.dispose();
                 this.subscriber = undefined;
-                this.publisher?.dispose();
+                await this.publisher?.dispose();
                 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();
@@ -13476,15 +14101,17 @@ class Call {
             const performingMigration = this.reconnectStrategy === WebsocketReconnectStrategy.MIGRATE;
             const performingRejoin = this.reconnectStrategy === WebsocketReconnectStrategy.REJOIN;
             const performingFastReconnect = this.reconnectStrategy === WebsocketReconnectStrategy.FAST;
-            let statsOptions = this.sfuStatsReporter?.options;
+            let statsOptions = this.lastStatsOptions;
             if (!this.credentials ||
                 !statsOptions ||
                 performingRejoin ||
-                performingMigration) {
+                performingMigration ||
+                data?.migrating_from) {
                 try {
                     const joinResponse = await this.doJoinRequest(data);
                     this.credentials = joinResponse.credentials;
                     statsOptions = joinResponse.stats_options;
+                    this.lastStatsOptions = statsOptions;
                 }
                 catch (error) {
                     // prevent triggering reconnect flow if the state is OFFLINE
@@ -13517,7 +14144,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) {
@@ -13591,7 +14218,7 @@ class Call {
             }
             else {
                 const connectionConfig = toRtcConfiguration(this.credentials.ice_servers);
-                this.initPublisherAndSubscriber({
+                await this.initPublisherAndSubscriber({
                     sfuClient,
                     connectionConfig,
                     clientDetails,
@@ -13652,7 +14279,7 @@ class Call {
             return {
                 strategy,
                 announcedTracks,
-                subscriptions: this.dynascaleManager.trackSubscriptions,
+                subscriptions: this.trackSubscriptionManager.subscriptions,
                 reconnectAttempt: this.reconnectAttempts,
                 fromSfuId: migratingFromSfuId || '',
                 previousSessionId: performingRejoin ? previousSessionId || '' : '',
@@ -13736,11 +14363,11 @@ class Call {
          * Initializes the Publisher and Subscriber Peer Connections.
          * @internal
          */
-        this.initPublisherAndSubscriber = (opts) => {
+        this.initPublisherAndSubscriber = async (opts) => {
             const { sfuClient, connectionConfig, clientDetails, statsOptions, publishOptions, closePreviousInstances, unifiedSessionId, } = opts;
             const { enable_rtc_stats: enableTracing } = statsOptions;
             if (closePreviousInstances && this.subscriber) {
-                this.subscriber.dispose();
+                await this.subscriber.dispose();
             }
             const basePeerConnectionOptions = {
                 sfuClient,
@@ -13769,7 +14396,7 @@ class Call {
             const isAnonymous = this.streamClient.user?.type === 'anonymous';
             if (!isAnonymous) {
                 if (closePreviousInstances && this.publisher) {
-                    this.publisher.dispose();
+                    await this.publisher.dispose();
                 }
                 this.publisher = new Publisher(basePeerConnectionOptions, publishOptions);
             }
@@ -13872,10 +14499,17 @@ class Call {
          *   `ICE_NEVER_CONNECTED` increments the unsupported-network counter).
          */
         this.reconnect = async (strategy, reason) => {
-            if (this.state.callingState === CallingState.RECONNECTING ||
+            if (this.state.callingState === CallingState.JOINING ||
+                this.state.callingState === CallingState.RECONNECTING ||
                 this.state.callingState === CallingState.MIGRATING ||
                 this.state.callingState === CallingState.RECONNECTING_FAILED)
                 return;
+            // Drop redundant reconnect calls. If a reconnect is already queued or
+            // running for this Call, that entry will resolve whatever broke;
+            // queueing more entries just replays the full REJOIN cycle (one extra
+            // `POST /join` per entry) once the call is already healthy again.
+            if (hasPending(this.reconnectConcurrencyTag))
+                return;
             return withoutConcurrency(this.reconnectConcurrencyTag, async () => {
                 const reconnectStartTime = Date.now();
                 this.reconnectStrategy = strategy;
@@ -14080,8 +14714,8 @@ class Call {
                 this.state.setCallingState(CallingState.JOINED);
             }
             finally {
-                currentSubscriber?.dispose();
-                currentPublisher?.dispose();
+                await currentSubscriber?.dispose();
+                await currentPublisher?.dispose();
                 // and close the previous SFU client, without specifying close code
                 currentSfuClient.close(StreamSfuClient.NORMAL_CLOSURE, 'Migrating away');
             }
@@ -14199,7 +14833,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.
@@ -14270,7 +14904,7 @@ class Call {
         this.stopPublish = async (...trackTypes) => {
             if (!this.sfuClient || !this.publisher)
                 return;
-            this.publisher.stopTracks(...trackTypes);
+            await this.publisher.stopTracks(...trackTypes);
             await this.updateLocalStreamState(undefined, ...trackTypes);
         };
         /**
@@ -14299,6 +14933,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
          *
@@ -14960,7 +15608,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.
@@ -14968,7 +15616,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.
@@ -14986,7 +15634,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);
@@ -15006,21 +15654,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).
          *
@@ -15058,21 +15713,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
@@ -15153,7 +15808,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.
@@ -15226,12 +15887,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
@@ -15244,11 +16011,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') {
@@ -15346,16 +16268,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}`, {
@@ -15493,205 +16411,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
      *
@@ -15738,7 +16459,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 &&
@@ -16295,7 +17017,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.49.0", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.51.0", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),
@@ -16403,7 +17125,7 @@ class StreamClient {
     get connectionIdPromise() {
         return this.connectionIdPromiseSafe?.();
     }
-    get isConnectionIsPromisePending() {
+    get isConnectionIdPromisePending() {
         return this.connectionIdPromiseSafe?.checkPending() ?? false;
     }
     get wsPromise() {