@stream-io/video-client 1.61.1 → 1.61.2

package/dist/index.browser.es.js

@@ -2665,18 +2665,6 @@ class SendStatsRequest$Type extends MessageType {
     constructor() {
         super('stream.video.sfu.signal.SendStatsRequest', [
             { no: 1, name: 'session_id', kind: 'scalar', T: 9 /*ScalarType.STRING*/ },
-            {
-                no: 2,
-                name: 'subscriber_stats',
-                kind: 'scalar',
-                T: 9 /*ScalarType.STRING*/,
-            },
-            {
-                no: 3,
-                name: 'publisher_stats',
-                kind: 'scalar',
-                T: 9 /*ScalarType.STRING*/,
-            },
             {
                 no: 4,
                 name: 'webrtc_version',
@@ -2690,8 +2678,6 @@ class SendStatsRequest$Type extends MessageType {
                 kind: 'scalar',
                 T: 9 /*ScalarType.STRING*/,
             },
-            { no: 7, name: 'audio_devices', kind: 'message', T: () => InputDevices },
-            { no: 8, name: 'video_devices', kind: 'message', T: () => InputDevices },
             {
                 no: 9,
                 name: 'android',
@@ -2708,18 +2694,6 @@ class SendStatsRequest$Type extends MessageType {
             },
             { no: 11, name: 'telemetry', kind: 'message', T: () => Telemetry },
             { no: 12, name: 'rtmp', kind: 'message', T: () => RTMPIngress },
-            {
-                no: 13,
-                name: 'subscriber_rtc_stats',
-                kind: 'scalar',
-                T: 9 /*ScalarType.STRING*/,
-            },
-            {
-                no: 14,
-                name: 'publisher_rtc_stats',
-                kind: 'scalar',
-                T: 9 /*ScalarType.STRING*/,
-            },
             { no: 15, name: 'rtc_stats', kind: 'scalar', T: 9 /*ScalarType.STRING*/ },
             {
                 no: 16,
@@ -5081,7 +5055,7 @@ const toIceCandidate = (iceTrickle) => {
     }
 };
 
-const version = "1.61.1";
+const version = "1.61.2";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -7809,30 +7783,21 @@ class SfuStatsReporter {
     sfuClient;
     subscriber;
     publisher;
-    microphone;
-    camera;
-    state;
     tracer;
     unifiedSessionId;
     intervalId;
     timeoutId;
     reportCount = 0;
-    unsubscribeDevicePermissionsSubscription;
-    unsubscribeListDevicesSubscription;
     sdkName;
     sdkVersion;
     webRTCVersion;
-    inputDevices = new Map();
     statsConcurrencyTag = Symbol('sfuStatsReporter');
     isStopped = false;
-    constructor(sfuClient, { options, clientDetails, subscriber, publisher, microphone, camera, state, tracer, unifiedSessionId, }) {
+    constructor(sfuClient, { options, clientDetails, subscriber, publisher, tracer, unifiedSessionId, }) {
         this.sfuClient = sfuClient;
         this.options = options;
         this.subscriber = subscriber;
         this.publisher = publisher;
-        this.microphone = microphone;
-        this.camera = camera;
-        this.state = state;
         this.tracer = tracer;
         this.unifiedSessionId = unifiedSessionId;
         const { sdk, browser } = clientDetails;
@@ -7846,35 +7811,6 @@ class SfuStatsReporter {
                 `${browser?.name || ''}-${browser?.version || ''}` ||
                 'N/A';
     }
-    observeDevice = (device, kind) => {
-        const { browserPermissionState$ } = device.state;
-        this.unsubscribeDevicePermissionsSubscription?.();
-        this.unsubscribeDevicePermissionsSubscription = createSubscription(combineLatest([browserPermissionState$, this.state.ownCapabilities$]), ([browserPermissionState, ownCapabilities]) => {
-            // cleanup the previous listDevices() subscription in case
-            // permissions or capabilities have changed.
-            // we will subscribe again if everything is in order.
-            this.unsubscribeListDevicesSubscription?.();
-            const hasCapability = kind === 'mic'
-                ? ownCapabilities.includes(OwnCapability.SEND_AUDIO)
-                : ownCapabilities.includes(OwnCapability.SEND_VIDEO);
-            if (browserPermissionState !== 'granted' || !hasCapability) {
-                this.inputDevices.set(kind, {
-                    currentDevice: '',
-                    availableDevices: [],
-                    isPermitted: false,
-                });
-                return;
-            }
-            this.unsubscribeListDevicesSubscription = createSubscription(combineLatest([device.listDevices(), device.state.selectedDevice$]), ([devices, deviceId]) => {
-                const selected = devices.find((d) => d.deviceId === deviceId);
-                this.inputDevices.set(kind, {
-                    currentDevice: selected?.label || deviceId || '',
-                    availableDevices: devices.map((d) => d.label),
-                    isPermitted: true,
-                });
-            });
-        });
-    };
     sendConnectionTime = (connectionTimeSeconds) => {
         this.sendTelemetryData({
             data: {
@@ -7909,7 +7845,7 @@ class SfuStatsReporter {
         this.subscriber.stats.takeSample(),
         this.publisher?.stats.takeSample(),
     ]);
-    send = (subscriberStats, publisherStats, telemetry) => {
+    send = (subscriberPerfStats, publisherPerfStats, telemetry) => {
         // serialize sends so overlapping ones can't race on the trace buffers or
         // deliver an older delta after a newer one already succeeded. Not gated by
         // `isStopped`: an explicit final flush must still deliver after stop().
@@ -7927,8 +7863,8 @@ class SfuStatsReporter {
                 this.subscriber.stats.clearPendingDeltas();
             }
             let pubPending = [];
-            if (pubTracer && publisherStats) {
-                pubPending = this.publisher?.stats.getPendingDeltas() ?? [];
+            if (pubTracer && this.publisher) {
+                pubPending = this.publisher.stats.getPendingDeltas();
             }
             else {
                 this.publisher?.stats.clearPendingDeltas();
@@ -7950,17 +7886,9 @@ class SfuStatsReporter {
                     sdk: this.sdkName,
                     sdkVersion: this.sdkVersion,
                     webrtcVersion: this.webRTCVersion,
-                    subscriberStats: JSON.stringify(flatten(subscriberStats.stats)),
-                    publisherStats: publisherStats
-                        ? JSON.stringify(flatten(publisherStats.stats))
-                        : '[]',
-                    subscriberRtcStats: '',
-                    publisherRtcStats: '',
                     rtcStats: JSON.stringify(traces),
-                    encodeStats: publisherStats?.performanceStats ?? [],
-                    decodeStats: subscriberStats.performanceStats,
-                    audioDevices: this.inputDevices.get('mic'),
-                    videoDevices: this.inputDevices.get('camera'),
+                    encodeStats: publisherPerfStats ?? [],
+                    decodeStats: subscriberPerfStats,
                     unifiedSessionId: this.unifiedSessionId,
                     deviceState: getDeviceState(),
                     telemetry,
@@ -7974,8 +7902,8 @@ class SfuStatsReporter {
                 // delivery confirmed: advance the delivery baseline for each chain.
                 if (subTracer)
                     this.subscriber.stats.commitDeltas(subPending);
-                if (pubTracer && publisherStats) {
-                    this.publisher?.stats.commitDeltas(pubPending);
+                if (pubTracer && this.publisher) {
+                    this.publisher.stats.commitDeltas(pubPending);
                 }
             }
             catch (err) {
@@ -7997,8 +7925,8 @@ class SfuStatsReporter {
     run = async (telemetry) => {
         if (this.isStopped)
             return;
-        const [subscriberStats, publisherStats] = await this.sample();
-        await this.send(subscriberStats, publisherStats, telemetry);
+        const [subscriberPerfStats, publisherPerfStats] = await this.sample();
+        await this.send(subscriberPerfStats, publisherPerfStats, telemetry);
     };
     scheduleNextReport = () => {
         const intervals = [1500, 3000, 3000, 5000];
@@ -8019,8 +7947,6 @@ class SfuStatsReporter {
     start = () => {
         if (this.options.reporting_interval_ms <= 0)
             return;
-        this.observeDevice(this.microphone, 'mic');
-        this.observeDevice(this.camera, 'camera');
         this.isStopped = false;
         this.reportCount = 0;
         clearInterval(this.intervalId);
@@ -8029,11 +7955,6 @@ class SfuStatsReporter {
     };
     stop = () => {
         this.isStopped = true;
-        this.unsubscribeDevicePermissionsSubscription?.();
-        this.unsubscribeDevicePermissionsSubscription = undefined;
-        this.unsubscribeListDevicesSubscription?.();
-        this.unsubscribeListDevicesSubscription = undefined;
-        this.inputDevices.clear();
         clearInterval(this.intervalId);
         this.intervalId = undefined;
         clearTimeout(this.timeoutId);
@@ -8054,8 +7975,8 @@ class SfuStatsReporter {
             return;
         try {
             const [sample] = await timeboxed([this.sample()], 2000);
-            const [subscriberStats, publisherStats] = sample;
-            this.send(subscriberStats, publisherStats).catch((err) => {
+            const [subscriberPerfStats, publisherPerfStats] = sample;
+            this.send(subscriberPerfStats, publisherPerfStats).catch((err) => {
                 this.logger.warn('Failed to flush report stats', err);
             });
         }
@@ -8182,9 +8103,9 @@ class StatsTracer {
         this.maxPendingDeltas = maxPendingDeltas;
     }
     /**
-     * Samples the RTCPeerConnection: returns the current stats report and the
-     * derived performance stats, and appends the delta-compressed sample to the
-     * un-acked delivery chain (retrieved via `getPendingDeltas`).
+     * Samples the RTCPeerConnection: returns the derived performance stats and
+     * appends the delta-compressed sample to the un-acked delivery chain
+     * (retrieved via `getPendingDeltas`).
      *
      * @internal
      */
@@ -8209,7 +8130,7 @@ class StatsTracer {
             this.pendingDeltas.push({ delta, ts: now });
             this.frameTimeHistory = this.frameTimeHistory.slice(-2);
             this.fpsHistory = this.fpsHistory.slice(-2);
-            return { performanceStats, stats };
+            return performanceStats;
         });
     };
     /**
@@ -10758,15 +10679,16 @@ class StreamSfuClient {
 /**
  * Decides what a ringing call should do next, based on the current call state.
  *
- * The `call.accepted`, `call.rejected` and `call.missed` handlers and the ring
- * state poller both run this. They differ only in how the state got there: the
- * handlers rely on `CallState.updateFromEvent`, which runs before them, and the
- * poller applies the polled ring state itself.
+ * The `call.accepted` and `call.rejected` handlers, the ring state poller and
+ * the rewatch after a WS reconnect all run this. They differ only in how the
+ * state got there: the handlers rely on `CallState.updateFromEvent`, which runs
+ * before them, while the poller applies the polled ring state itself and the
+ * rewatch applies the queried call state.
  *
  * @param call the call to reconcile.
- * @param joinSource which of the two triggered this run, reported on the
- * caller's join: `ring-ws` for the event handlers, `ring-poll-api` for the
- * poller.
+ * @param joinSource what triggered this run, reported on the caller's join:
+ * `ring-ws` for the event handlers, `ring-poll-api` for the poller and the
+ * rewatch (both come from an API response).
  * @returns whether the ring reached a terminal state. A failed join is not
  * terminal: the caller should keep trying while the ring is open.
  */
@@ -10821,10 +10743,16 @@ const reconcileAsCaller = async (call, joinSource) => {
     return false;
 };
 // the current user's own accept or reject, on this or another device, is
-// handled by `resolveOwnRingOutcome`, and `call.ended` by `watchCallEnded`.
+// handled by `resolveOwnRingOutcome`, and a live `call.ended` by
+// `watchCallEnded`. An end missed while offline is handled here.
 const reconcileAsCallee = async (call) => {
-    const createdById = call.state.createdBy?.id;
-    const rejectedBy = call.state.session?.rejected_by ?? {};
+    const { session, endedAt, createdBy } = call.state;
+    if (endedAt || session?.ended_at) {
+        call.logger.info('ring: the call has ended, leaving');
+        return leave(call, { reason: 'ended', message: 'ring: call ended' });
+    }
+    const createdById = createdBy?.id;
+    const rejectedBy = session?.rejected_by ?? {};
     if (createdById && rejectedBy[createdById]) {
         call.logger.info('ring: the caller cancelled, leaving');
         return leave(call, {
@@ -10873,7 +10801,7 @@ class RingStatePoller {
     unsubscribe = [];
     constructor(call, options = {}) {
         this.call = call;
-        this.startAfterMs = options.startAfterMs ?? 15_000;
+        this.startAfterMs = options.startAfterMs ?? 9_000;
         this.intervalMs = options.intervalMs ?? 5_000;
     }
     /**
@@ -11538,12 +11466,33 @@ const registerRingingCallEventHandlers = (call) => {
 };
 
 const toBindingKey = (sessionId, trackType = 'audioTrack') => `${sessionId}/${trackType}`;
+const toElementState = (element) => {
+    const stream = element.srcObject;
+    const [track] = stream?.getAudioTracks?.() ?? [];
+    return {
+        paused: element.paused,
+        muted: element.muted,
+        volume: Math.round(element.volume * 100) / 100,
+        readyState: element.readyState,
+        sinkId: element.sinkId,
+        track: track
+            ? {
+                enabled: track.enabled,
+                muted: track.muted,
+                readyState: track.readyState,
+            }
+            : null,
+    };
+};
 /**
  * Tracks audio element bindings and periodically warns about
  * remote participants whose audio streams have no bound element.
+ * On the same tick, it traces the playback state of the bound elements,
+ * limited to the bindings whose state changed since the previous trace.
  */
 class AudioBindingsWatchdog {
     bindings = new Map();
+    tracedStates = new Map();
     enabled = true;
     watchdogInterval;
     unsubscribeCallingState;
@@ -11554,8 +11503,6 @@ class AudioBindingsWatchdog {
         this.tracer = tracer;
         this.state = state;
         this.unsubscribeCallingState = createSubscription(state.callingState$, (callingState) => {
-            if (!this.enabled)
-                return;
             if (callingState !== CallingState.JOINED) {
                 this.stop();
             }
@@ -11584,15 +11531,15 @@ class AudioBindingsWatchdog {
         this.bindings.delete(toBindingKey(sessionId, trackType));
     };
     /**
-     * Enables or disables the watchdog.
-     * When disabled, the periodic check stops but bindings are still tracked.
+     * Enables or disables the dangling binding warnings.
+     * Bindings are still tracked and their playback state is still traced.
      */
     setEnabled = (enabled) => {
         this.enabled = enabled;
         if (enabled) {
             this.start();
         }
-        else {
+        else if (this.state.callingState !== CallingState.JOINED) {
             this.stop();
         }
     };
@@ -11602,33 +11549,61 @@ class AudioBindingsWatchdog {
     dispose = () => {
         this.stop();
         this.bindings.clear();
+        this.tracedStates.clear();
         this.unsubscribeCallingState();
     };
     start = () => {
         clearInterval(this.watchdogInterval);
         this.watchdogInterval = setInterval(() => {
-            const danglingUserIds = [];
-            for (const p of this.state.participants) {
-                if (p.isLocalParticipant)
-                    continue;
-                const { audioStream, screenShareAudioStream, sessionId, userId, publishedTracks, } = p;
-                if (audioStream &&
-                    publishedTracks.includes(TrackType.AUDIO) &&
-                    !this.bindings.has(toBindingKey(sessionId))) {
-                    danglingUserIds.push(userId);
-                }
-                if (screenShareAudioStream &&
-                    publishedTracks.includes(TrackType.SCREEN_SHARE_AUDIO) &&
-                    !this.bindings.has(toBindingKey(sessionId, 'screenShareAudioTrack'))) {
-                    danglingUserIds.push(userId);
-                }
+            if (this.enabled)
+                this.warnAboutDanglingBindings();
+            this.traceBindingStates();
+        }, 3000);
+    };
+    warnAboutDanglingBindings = () => {
+        const danglingUserIds = [];
+        for (const p of this.state.participants) {
+            if (p.isLocalParticipant)
+                continue;
+            const { audioStream, screenShareAudioStream, sessionId, userId, publishedTracks, } = p;
+            if (audioStream &&
+                publishedTracks.includes(TrackType.AUDIO) &&
+                !this.bindings.has(toBindingKey(sessionId))) {
+                danglingUserIds.push(userId);
             }
-            if (danglingUserIds.length > 0) {
-                const key = 'audioBinding.danglingWarning';
-                this.tracer.traceOnce(key, key, danglingUserIds);
-                this.logger.warn(`Dangling audio bindings detected. Did you forget to bind the audio element? user_ids: ${danglingUserIds}.`);
+            if (screenShareAudioStream &&
+                publishedTracks.includes(TrackType.SCREEN_SHARE_AUDIO) &&
+                !this.bindings.has(toBindingKey(sessionId, 'screenShareAudioTrack'))) {
+                danglingUserIds.push(userId);
             }
-        }, 3000);
+        }
+        if (danglingUserIds.length > 0) {
+            const key = 'audioBinding.danglingWarning';
+            this.tracer.traceOnce(key, key, danglingUserIds);
+            this.logger.warn(`Dangling audio bindings detected. Did you forget to bind the audio element? user_ids: ${danglingUserIds}.`);
+        }
+    };
+    traceBindingStates = () => {
+        const changes = {};
+        let hasChanges = false;
+        for (const [key, element] of this.bindings) {
+            const state = toElementState(element);
+            const serialized = JSON.stringify(state);
+            if (this.tracedStates.get(key) === serialized)
+                continue;
+            this.tracedStates.set(key, serialized);
+            changes[key] = state;
+            hasChanges = true;
+        }
+        for (const key of this.tracedStates.keys()) {
+            if (this.bindings.has(key))
+                continue;
+            this.tracedStates.delete(key);
+            changes[key] = null;
+            hasChanges = true;
+        }
+        if (hasChanges)
+            this.tracer.trace('audioBinding.state', changes);
     };
     stop = () => {
         clearInterval(this.watchdogInterval);
@@ -11907,7 +11882,9 @@ class TrackSubscriptionManager {
 class MediaPlaybackWatchdog {
     logger = videoLoggerSystem.getLogger('MediaPlaybackWatchdog');
     kind;
+    traceInfo;
     isBlocked;
+    onGiveUp;
     element;
     tracer;
     controller = new AbortController();
@@ -11919,8 +11896,14 @@ class MediaPlaybackWatchdog {
     constructor(opts) {
         this.element = opts.element;
         this.kind = opts.kind;
+        this.traceInfo = {
+            kind: opts.kind,
+            sessionId: opts.sessionId,
+            trackType: opts.trackType,
+        };
         this.tracer = opts.tracer;
         this.isBlocked = opts.isBlocked ?? (() => false);
+        this.onGiveUp = opts.onGiveUp ?? (() => { });
         this.attach();
     }
     attach = () => {
@@ -11938,6 +11921,23 @@ class MediaPlaybackWatchdog {
         this.controller.abort();
         this.clearTimers();
     };
+    /**
+     * Starts a fresh recovery cycle, e.g. after a media interruption ended.
+     * Unlike a regular pause-triggered recovery, it also tries elements that
+     * were skipped as blocked or not ready, since those conditions may have
+     * cleared together with the interruption.
+     */
+    rearm = () => {
+        if (this.disposed)
+            return;
+        this.clearTimers();
+        this.attempt = 0;
+        this.stopped = false;
+        const { paused, srcObject, ended } = this.element;
+        if (!paused || !srcObject || ended)
+            return;
+        this.pendingTimer = setTimeout(this.attemptPlay, 0);
+    };
     clearTimers = () => {
         if (this.pendingTimer)
             clearTimeout(this.pendingTimer);
@@ -11959,17 +11959,34 @@ class MediaPlaybackWatchdog {
         if (this.element.paused)
             return;
         this.tracer.trace('mediaPlayback.recover.success', {
-            kind: this.kind,
+            ...this.traceInfo,
             attempts: this.attempt,
         });
         this.attempt = 0;
         this.stopped = false;
     };
+    /**
+     * Media elements backed by a MediaStream fire `suspend` routinely (after
+     * the initial load, on source swaps, on layer switches), so a `suspend`
+     * that needs no recovery is ignored without a trace. An explicit `pause`
+     * is rare and always traced, along with the reason recovery was skipped.
+     */
     onPauseOrSuspend = (event) => {
-        if (this.disposed || this.stopped)
+        if (this.disposed || this.stopped || this.pendingTimer)
+            return;
+        const skipReason = this.computeSkipReason();
+        if (skipReason) {
+            if (event.type === 'pause') {
+                this.tracer.trace('mediaPlayback.paused', {
+                    ...this.traceInfo,
+                    reason: event.type,
+                    skipped: skipReason,
+                });
+            }
             return;
+        }
         this.tracer.trace('mediaPlayback.paused', {
-            kind: this.kind,
+            ...this.traceInfo,
             reason: event.type,
         });
         if (this.settleTimer)
@@ -11983,7 +12000,7 @@ class MediaPlaybackWatchdog {
         const skipReason = this.computeSkipReason();
         if (skipReason) {
             this.tracer.trace('mediaPlayback.recover.skipped', {
-                kind: this.kind,
+                ...this.traceInfo,
                 reason: skipReason,
             });
             return;
@@ -11992,9 +12009,10 @@ class MediaPlaybackWatchdog {
             this.stopped = true;
             this.clearTimers();
             this.tracer.trace('mediaPlayback.recover.giveUp', {
-                kind: this.kind,
+                ...this.traceInfo,
                 attempts: this.attempt,
             });
+            this.onGiveUp();
             return;
         }
         const delay = this.attempt === 0 ? 0 : retryInterval(this.attempt);
@@ -12022,7 +12040,7 @@ class MediaPlaybackWatchdog {
             return;
         this.attempt += 1;
         this.tracer.trace('mediaPlayback.recover.attempt', {
-            kind: this.kind,
+            ...this.traceInfo,
             attempt: this.attempt,
         });
         try {
@@ -12037,6 +12055,41 @@ class MediaPlaybackWatchdog {
     };
 }
 
+/**
+ * Checks whether media playback and capture are likely interrupted: the page
+ * is hidden, or WebKit reports the audio session as interrupted (a phone
+ * call, Siri, or another app taking over audio).
+ */
+const isMediaInterrupted = () => {
+    if (typeof document === 'undefined')
+        return false;
+    return (document.visibilityState === 'hidden' ||
+        navigator.audioSession?.state === 'interrupted');
+};
+/**
+ * Invokes `onResumed` every time the page leaves a media interruption,
+ * as defined by {@link isMediaInterrupted}.
+ *
+ * @param onResumed the callback to invoke.
+ * @returns a function that stops watching.
+ */
+const watchMediaInterruptions = (onResumed) => {
+    if (typeof document === 'undefined')
+        return () => { };
+    let interrupted = isMediaInterrupted();
+    const check = () => {
+        const wasInterrupted = interrupted;
+        interrupted = isMediaInterrupted();
+        if (wasInterrupted && !interrupted)
+            onResumed();
+    };
+    const controller = new AbortController();
+    const { signal } = controller;
+    document.addEventListener('visibilitychange', check, { signal });
+    navigator.audioSession?.addEventListener('statechange', check, { signal });
+    return () => controller.abort();
+};
+
 /**
  * A manager class that handles dynascale related tasks like:
  *
@@ -12050,6 +12103,9 @@ class DynascaleManager {
     tracer;
     useWebAudio = false;
     audioContext;
+    playbackWatchdogs = new Set();
+    stopWatchingInterruptions;
+    stopTracingAudioSession;
     trackSubscriptionManager;
     blockedAudioTracker;
     /**
@@ -12066,6 +12122,10 @@ class DynascaleManager {
      * Closes the audio context if it was created.
      */
     dispose = async () => {
+        this.stopWatchingInterruptions?.();
+        this.stopWatchingInterruptions = undefined;
+        this.stopTracingAudioSession?.();
+        this.stopTracingAudioSession = undefined;
         const context = this.audioContext;
         if (context && context.state !== 'closed') {
             document.removeEventListener('click', this.resumeAudioContext);
@@ -12205,10 +12265,12 @@ class DynascaleManager {
         // without prior user interaction:
         // https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
         videoElement.muted = true;
-        const playbackWatchdog = new MediaPlaybackWatchdog({
+        const playbackWatchdog = this.createPlaybackWatchdog({
             element: videoElement,
             kind: 'video',
             tracer: this.tracer,
+            sessionId,
+            trackType,
         });
         const trackKey = isVideoTrack ? 'videoStream' : 'screenShareStream';
         const streamSubscription = participant$
@@ -12236,7 +12298,7 @@ class DynascaleManager {
             publishedTracksSubscription?.unsubscribe();
             streamSubscription.unsubscribe();
             resizeObserver?.disconnect();
-            playbackWatchdog.dispose();
+            this.disposePlaybackWatchdog(playbackWatchdog);
         };
     };
     /**
@@ -12254,6 +12316,7 @@ class DynascaleManager {
         const participant = this.callState.findParticipantBySessionId(sessionId);
         if (!participant || participant.isLocalParticipant)
             return;
+        this.traceAudioSessionState();
         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)
@@ -12273,7 +12336,9 @@ class DynascaleManager {
         let sourceNode = undefined;
         let gainNode = undefined;
         let audioWatchdog = undefined;
+        let blockedByGiveUp = false;
         const clearBlockedAudio = () => {
+            blockedByGiveUp = false;
             if (!this.blockedAudioTracker.isBlocked(audioElement))
                 return;
             this.blockedAudioTracker.markBlocked(audioElement, false);
@@ -12281,15 +12346,18 @@ class DynascaleManager {
         audioElement.addEventListener('playing', clearBlockedAudio);
         const isAudioTrack = trackType === 'audioTrack';
         const trackKey = isAudioTrack ? 'audioStream' : 'screenShareAudioStream';
+        let sourceChangeTimer;
         const updateMediaStreamSubscription = participant$
             .pipe(distinctUntilKeyChanged(trackKey))
             .subscribe((p) => {
             const source = isAudioTrack ? p.audioStream : p.screenShareAudioStream;
             if (audioElement.srcObject === source)
                 return;
-            setTimeout(() => {
+            clearTimeout(sourceChangeTimer);
+            sourceChangeTimer = setTimeout(() => {
+                sourceChangeTimer = undefined;
                 audioElement.srcObject = source ?? null;
-                audioWatchdog?.dispose();
+                this.disposePlaybackWatchdog(audioWatchdog);
                 audioWatchdog = undefined;
                 if (!source) {
                     clearBlockedAudio();
@@ -12320,15 +12388,25 @@ class DynascaleManager {
                         this.tracer.trace('audioPlaybackError', e.message);
                         if (e.name === 'NotAllowedError') {
                             this.tracer.trace('audioPlaybackBlocked', null);
+                            blockedByGiveUp = false;
                             this.blockedAudioTracker.markBlocked(audioElement, true, sessionId);
                         }
                         this.logger.warn(`Failed to play audio stream`, e);
                     });
-                    audioWatchdog = new MediaPlaybackWatchdog({
+                    audioWatchdog = this.createPlaybackWatchdog({
                         element: audioElement,
                         kind: 'audio',
                         tracer: this.tracer,
-                        isBlocked: () => this.blockedAudioTracker.isBlocked(audioElement),
+                        sessionId,
+                        trackType,
+                        // only an autoplay-policy block needs a user gesture; a give-up
+                        // block is for the UI and must not stop a re-armed cycle
+                        isBlocked: () => !blockedByGiveUp &&
+                            this.blockedAudioTracker.isBlocked(audioElement),
+                        onGiveUp: () => {
+                            blockedByGiveUp = true;
+                            this.blockedAudioTracker.markBlocked(audioElement, true, sessionId);
+                        },
                     });
                 }
                 const { selectedDevice } = this.speaker.state;
@@ -12358,13 +12436,51 @@ class DynascaleManager {
             sinkIdSubscription?.unsubscribe();
             volumeSubscription.unsubscribe();
             updateMediaStreamSubscription.unsubscribe();
+            clearTimeout(sourceChangeTimer);
             audioElement.srcObject = null;
             sourceNode?.disconnect();
             gainNode?.disconnect();
-            audioWatchdog?.dispose();
+            this.disposePlaybackWatchdog(audioWatchdog);
             audioWatchdog = undefined;
         };
     };
+    /**
+     * Creates a playback watchdog that is re-armed whenever a media
+     * interruption (backgrounding, phone call, Siri) ends.
+     */
+    createPlaybackWatchdog = (opts) => {
+        const watchdog = new MediaPlaybackWatchdog(opts);
+        this.playbackWatchdogs.add(watchdog);
+        this.stopWatchingInterruptions ??= watchMediaInterruptions(this.rearmPlayback);
+        return watchdog;
+    };
+    disposePlaybackWatchdog = (watchdog) => {
+        if (!watchdog)
+            return;
+        watchdog.dispose();
+        this.playbackWatchdogs.delete(watchdog);
+    };
+    rearmPlayback = () => {
+        this.tracer.trace('mediaPlayback.rearm', this.playbackWatchdogs.size);
+        this.playbackWatchdogs.forEach((watchdog) => watchdog.rearm());
+    };
+    /**
+     * Traces the WebKit audio session state (initial value and changes) in
+     * both playback modes, as it explains most iOS playback interruptions.
+     */
+    traceAudioSessionState = () => {
+        const audioSession = navigator.audioSession;
+        if (!audioSession || this.stopTracingAudioSession)
+            return;
+        const trace = () => {
+            this.tracer.trace('audioSession.state', audioSession.state);
+        };
+        trace();
+        audioSession.addEventListener('statechange', trace);
+        this.stopTracingAudioSession = () => {
+            audioSession.removeEventListener('statechange', trace);
+        };
+    };
     getOrCreateAudioContext = () => {
         if (!this.useWebAudio)
             return;
@@ -12387,7 +12503,6 @@ class DynascaleManager {
             audioSession.type = 'play-and-record';
             let isSessionInterrupted = false;
             audioSession.addEventListener('statechange', () => {
-                this.tracer.trace('audioSession.state', audioSession.state);
                 if (audioSession.state === 'interrupted') {
                     isSessionInterrupted = true;
                 }
@@ -13946,9 +14061,22 @@ class DeviceManager {
         }
         const devices = getCurrentValue(this.listDevices()) || [];
         const currentDevice = this.findDevice(devices, selectedDevice) ??
-            createSyntheticDevice(selectedDevice, deviceKind);
+            createSyntheticDevice(selectedDevice, deviceKind, this.getActiveTrackLabel(selectedDevice));
         writePreferences(currentDevice, deviceKey, muted, storageKey);
     }
+    /**
+     * Returns the label of the active track if it was captured from the given
+     * device. Used as a fallback when the device list hasn't been enumerated yet,
+     * so the persisted preference still carries the device label.
+     */
+    getActiveTrackLabel = (deviceId) => {
+        const stream = this.state.rootMediaStream;
+        const tracks = this.trackType === TrackType.AUDIO
+            ? stream?.getAudioTracks()
+            : stream?.getVideoTracks();
+        const track = tracks?.find((t) => t.getSettings().deviceId === deviceId);
+        return track?.label;
+    };
     async applyPersistedPreferences(enabledInCallType, forceDisabled = false) {
         const deviceKey = this.trackType === TrackType.AUDIO ? 'microphone' : 'camera';
         const preferences = readPreferences(this.devicePersistence.storageKey);
@@ -16784,9 +16912,6 @@ class Call {
                 options: statsOptions,
                 subscriber: this.subscriber,
                 publisher: this.publisher,
-                microphone: this.microphone,
-                camera: this.camera,
-                state: this.state,
                 tracer: this.tracer,
                 unifiedSessionId,
             });
@@ -19638,11 +19763,11 @@ class StreamClient {
         return await this.wsConnection.connect(this.defaultWSTimeout);
     };
     getSdkVersion = () => this.options.clientAppIdentifier?.sdkVersion ||
-        "1.61.1";
+        "1.61.2";
     getUserAgent = () => {
         if (!this.cachedUserAgent) {
             const { clientAppIdentifier = {} } = this.options;
-            const { sdkName = 'js', sdkVersion = "1.61.1", ...extras } = clientAppIdentifier;
+            const { sdkName = 'js', sdkVersion = "1.61.2", ...extras } = clientAppIdentifier;
             this.cachedUserAgent = [
                 `stream-video-${sdkName}-v${sdkVersion}`,
                 ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),
@@ -20582,6 +20707,10 @@ class StreamVideoClient {
                     const call = this.writeableStateStore.findCall(c.call.type, c.call.id);
                     if (call) {
                         call.updateFromCallStateResponse(c);
+                        // ring events missed while the WS was down aren't replayed
+                        reconcileRingState(call, 'ring-poll-api').catch((err) => {
+                            call.logger.error('Failed to reconcile the ring state after rewatch', err);
+                        });
                     }
                 }
                 return;