@stream-io/video-client 1.44.4 → 1.44.5

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.44.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.44.4...@stream-io/video-client-1.44.5) (2026-03-27)
+
+### Bug Fixes
+
+- make WebAudio opt-in, add AudioBindingsWatchdog ([#2171](https://github.com/GetStream/stream-video-js/issues/2171)) ([8d00f48](https://github.com/GetStream/stream-video-js/commit/8d00f485a37fec23dca340d32738a3cb1f7f325a))
+
 ## [1.44.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.44.3...@stream-io/video-client-1.44.4) (2026-03-20)
 
 - trace device permission state transitions ([#2168](https://github.com/GetStream/stream-video-js/issues/2168)) ([e4203a3](https://github.com/GetStream/stream-video-js/commit/e4203a34cad1c90d1bc5612fc379dd1f0f0ebe5d))

package/dist/index.browser.es.js

@@ -6283,7 +6283,7 @@ const getSdkVersion = (sdk) => {
     return sdk ? `${sdk.major}.${sdk.minor}.${sdk.patch}` : '0.0.0-development';
 };
 
-const version = "1.44.4";
+const version = "1.44.5";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -9491,6 +9491,96 @@ class ViewportTracker {
     }
 }
 
+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.
+         */
+        this.dispose = () => {
+            this.stop();
+            this.unsubscribeCallingState();
+        };
+        this.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 } = p;
+                    if (audioStream && !this.bindings.has(toBindingKey(sessionId))) {
+                        danglingUserIds.push(userId);
+                    }
+                    if (screenShareAudioStream &&
+                        !this.bindings.has(toBindingKey(sessionId, 'screenShareAudioTrack'))) {
+                        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}.`);
+                }
+            }, 3000);
+        };
+        this.stop = () => {
+            clearInterval(this.watchdogInterval);
+        };
+        this.unsubscribeCallingState = createSubscription(state.callingState$, (callingState) => {
+            if (!this.enabled)
+                return;
+            if (callingState !== CallingState.JOINED) {
+                this.stop();
+            }
+            else {
+                this.start();
+            }
+        });
+    }
+}
+
 const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
     videoTrack: VisibilityState.UNKNOWN,
     screenShareTrack: VisibilityState.UNKNOWN,
@@ -9516,7 +9606,7 @@ class DynascaleManager {
          */
         this.viewportTracker = new ViewportTracker();
         this.logger = videoLoggerSystem.getLogger('DynascaleManager');
-        this.useWebAudio = isSafari();
+        this.useWebAudio = false;
         this.pendingSubscriptionsUpdate = null;
         this.videoTrackSubscriptionOverridesSubject = new BehaviorSubject({});
         this.videoTrackSubscriptionOverrides$ = this.videoTrackSubscriptionOverridesSubject.asObservable();
@@ -9548,7 +9638,8 @@ class DynascaleManager {
             if (this.pendingSubscriptionsUpdate) {
                 clearTimeout(this.pendingSubscriptionsUpdate);
             }
-            const context = this.getOrCreateAudioContext();
+            this.audioBindingsWatchdog?.dispose();
+            const context = this.audioContext;
             if (context && context.state !== 'closed') {
                 document.removeEventListener('click', this.resumeAudioContext);
                 await context.close();
@@ -9747,12 +9838,13 @@ class DynascaleManager {
                     lastDimensions = currentDimensions;
                 });
             resizeObserver?.observe(videoElement);
+            const isVideoTrack = trackType === 'videoTrack';
             // element renders and gets bound - track subscription gets
             // triggered first other ones get skipped on initial subscriptions
             const publishedTracksSubscription = boundParticipant.isLocalParticipant
                 ? null
                 : participant$
-                    .pipe(distinctUntilKeyChanged('publishedTracks'), map((p) => trackType === 'videoTrack' ? hasVideo(p) : hasScreenShare(p)), distinctUntilChanged())
+                    .pipe(distinctUntilKeyChanged('publishedTracks'), map((p) => (isVideoTrack ? hasVideo(p) : hasScreenShare(p))), distinctUntilChanged())
                     .subscribe((isPublishing) => {
                     if (isPublishing) {
                         // the participant just started to publish a track
@@ -9772,10 +9864,11 @@ class DynascaleManager {
             // without prior user interaction:
             // https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
             videoElement.muted = true;
+            const trackKey = isVideoTrack ? 'videoStream' : 'screenShareStream';
             const streamSubscription = participant$
-                .pipe(distinctUntilKeyChanged(trackType === 'videoTrack' ? 'videoStream' : 'screenShareStream'))
+                .pipe(distinctUntilKeyChanged(trackKey))
                 .subscribe((p) => {
-                const source = trackType === 'videoTrack' ? p.videoStream : p.screenShareStream;
+                const source = isVideoTrack ? p.videoStream : p.screenShareStream;
                 if (videoElement.srcObject === source)
                     return;
                 videoElement.srcObject = source ?? null;
@@ -9814,6 +9907,7 @@ 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)
@@ -9832,14 +9926,12 @@ class DynascaleManager {
             };
             let sourceNode = undefined;
             let gainNode = undefined;
+            const isAudioTrack = trackType === 'audioTrack';
+            const trackKey = isAudioTrack ? 'audioStream' : 'screenShareAudioStream';
             const updateMediaStreamSubscription = participant$
-                .pipe(distinctUntilKeyChanged(trackType === 'screenShareAudioTrack'
-                ? 'screenShareAudioStream'
-                : 'audioStream'))
+                .pipe(distinctUntilKeyChanged(trackKey))
                 .subscribe((p) => {
-                const source = trackType === 'screenShareAudioTrack'
-                    ? p.screenShareAudioStream
-                    : p.audioStream;
+                const source = isAudioTrack ? p.audioStream : p.screenShareAudioStream;
                 if (audioElement.srcObject === source)
                     return;
                 setTimeout(() => {
@@ -9894,6 +9986,7 @@ class DynascaleManager {
             });
             audioElement.autoplay = true;
             return () => {
+                this.audioBindingsWatchdog?.unregister(sessionId, trackType);
                 sinkIdSubscription?.unsubscribe();
                 volumeSubscription.unsubscribe();
                 updateMediaStreamSubscription.unsubscribe();
@@ -9954,6 +10047,9 @@ class DynascaleManager {
         this.callState = callState;
         this.speaker = speaker;
         this.tracer = tracer;
+        if (!isReactNative()) {
+            this.audioBindingsWatchdog = new AudioBindingsWatchdog(callState, tracer);
+        }
     }
     setSfuClient(sfuClient) {
         this.sfuClient = sfuClient;
@@ -10342,9 +10438,6 @@ const getDevices = (permission, kind, tracer) => {
 const checkIfAudioOutputChangeSupported = () => {
     if (typeof document === 'undefined')
         return false;
-    // Safari uses WebAudio API for playing audio, so we check the AudioContext prototype
-    if (isSafari())
-        return 'setSinkId' in AudioContext.prototype;
     const element = document.createElement('audio');
     return 'setSinkId' in element;
 };
@@ -15886,7 +15979,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.44.4", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.44.5", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),