@stream-io/video-client 1.44.4 → 1.44.6-beta.0

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

@@ -4784,7 +4784,7 @@ class StreamVideoWriteableStateStore {
      * The currently connected user.
      */
     get connectedUser() {
-        return getCurrentValue(this.connectedUserSubject);
+        return this.connectedUserSubject.getValue();
     }
     /**
      * A list of {@link Call} objects created/tracked by this client.
@@ -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.6-beta.0";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -8982,6 +8982,7 @@ const watchCallRejected = (call) => {
         else {
             if (rejectedBy[eventCall.created_by.id]) {
                 call.logger.info('call creator rejected, leaving call');
+                globalThis.streamRNVideoSDK?.callingX?.endCall(call, 'remote');
                 await call.leave({ message: 'ring: creator rejected' });
             }
         }
@@ -8992,6 +8993,7 @@ const watchCallRejected = (call) => {
  */
 const watchCallEnded = (call) => {
     return function onCallEnded() {
+        globalThis.streamRNVideoSDK?.callingX?.endCall(call, 'remote');
         const { callingState } = call.state;
         if (callingState !== CallingState.IDLE &&
             callingState !== CallingState.LEFT) {
@@ -9023,6 +9025,7 @@ const watchSfuCallEnded = (call) => {
             // update the call state to reflect the call has ended.
             call.state.setEndedAt(new Date());
             const reason = CallEndedReason[e.reason];
+            globalThis.streamRNVideoSDK?.callingX?.endCall(call, 'remote');
             await call.leave({ message: `callEnded received: ${reason}` });
         }
         catch (err) {
@@ -9491,6 +9494,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 +9609,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 +9641,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 +9841,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 +9867,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 +9910,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 +9929,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 +9989,7 @@ class DynascaleManager {
             });
             audioElement.autoplay = true;
             return () => {
+                this.audioBindingsWatchdog?.unregister(sessionId, trackType);
                 sinkIdSubscription?.unsubscribe();
                 volumeSubscription.unsubscribe();
                 updateMediaStreamSubscription.unsubscribe();
@@ -9954,6 +10050,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 +10441,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;
 };
@@ -12533,6 +12629,7 @@ class SpeakerManager {
             this.defaultDevice = defaultDevice;
             globalThis.streamRNVideoSDK?.callManager.setup({
                 defaultDevice,
+                isRingingTypeCall: this.call.ringing,
             });
         }
     }
@@ -12732,6 +12829,7 @@ class Call {
                 const currentUserId = this.currentUserId;
                 if (currentUserId && blockedUserIds.includes(currentUserId)) {
                     this.logger.info('Leaving call because of being blocked');
+                    globalThis.streamRNVideoSDK?.callingX?.endCall(this, 'restricted');
                     await this.leave({ message: 'user blocked' }).catch((err) => {
                         this.logger.error('Error leaving call after being blocked', err);
                     });
@@ -12768,6 +12866,7 @@ class Call {
                 const isAcceptedElsewhere = isAcceptedByMe && this.state.callingState === CallingState.RINGING;
                 if ((isAcceptedElsewhere || isRejectedByMe) &&
                     !hasPending(this.joinLeaveConcurrencyTag)) {
+                    globalThis.streamRNVideoSDK?.callingX?.endCall(this, isAcceptedElsewhere ? 'answeredElsewhere' : 'rejected');
                     this.leave().catch(() => {
                         this.logger.error('Could not leave a call that was accepted or rejected elsewhere');
                     });
@@ -12779,6 +12878,9 @@ class Call {
             const receiver_id = this.clientStore.connectedUser?.id;
             const ended_at = callSession?.ended_at;
             const created_by_id = this.state.createdBy?.id;
+            if (this.currentUserId && created_by_id === this.currentUserId) {
+                globalThis.streamRNVideoSDK?.callingX?.registerOutgoingCall(this);
+            }
             const rejected_by = callSession?.rejected_by;
             const accepted_by = callSession?.accepted_by;
             let leaveCallIdle = false;
@@ -12917,17 +13019,28 @@ class Call {
                 }
                 if (callingState === CallingState.RINGING && reject !== false) {
                     if (reject) {
-                        await this.reject(reason ?? 'decline');
+                        const reasonToEndCallReason = {
+                            timeout: 'missed',
+                            cancel: 'canceled',
+                            busy: 'busy',
+                            decline: 'rejected',
+                        };
+                        const rejectReason = reason ?? 'decline';
+                        const endCallReason = reasonToEndCallReason[rejectReason] ?? 'rejected';
+                        globalThis.streamRNVideoSDK?.callingX?.endCall(this, endCallReason);
+                        await this.reject(rejectReason);
                     }
                     else {
                         // if reject was undefined, we still have to cancel the call automatically
                         // when I am the creator and everyone else left the call
                         const hasOtherParticipants = this.state.remoteParticipants.length > 0;
                         if (this.isCreatedByMe && !hasOtherParticipants) {
+                            globalThis.streamRNVideoSDK?.callingX?.endCall(this, 'canceled');
                             await this.reject('cancel');
                         }
                     }
                 }
+                globalThis.streamRNVideoSDK?.callingX?.endCall(this);
                 this.statsReporter?.stop();
                 this.statsReporter = undefined;
                 const leaveReason = message ?? reason ?? 'user is leaving the call';
@@ -12954,7 +13067,9 @@ class Call {
                 this.ringingSubject.next(false);
                 this.cancelAutoDrop();
                 this.clientStore.unregisterCall(this);
-                globalThis.streamRNVideoSDK?.callManager.stop();
+                globalThis.streamRNVideoSDK?.callManager.stop({
+                    isRingingTypeCall: this.ringing,
+                });
                 this.camera.dispose();
                 this.microphone.dispose();
                 this.screenShare.dispose();
@@ -13120,11 +13235,19 @@ class Call {
          * @returns a promise which resolves once the call join-flow has finished.
          */
         this.join = async ({ maxJoinRetries = 3, joinResponseTimeout, rpcRequestTimeout, ...data } = {}) => {
-            await this.setup();
             const callingState = this.state.callingState;
             if ([CallingState.JOINED, CallingState.JOINING].includes(callingState)) {
                 throw new Error(`Illegal State: call.join() shall be called only once`);
             }
+            if (data?.ring) {
+                this.ringingSubject.next(true);
+            }
+            const callingX = globalThis.streamRNVideoSDK?.callingX;
+            if (callingX) {
+                // for Android/iOS, we need to start the call in the callingx library as soon as possible
+                await callingX.joinCall(this, this.clientStore.calls);
+            }
+            await this.setup();
             this.joinResponseTimeout = joinResponseTimeout;
             this.rpcRequestTimeout = rpcRequestTimeout;
             // we will count the number of join failures per SFU.
@@ -13133,38 +13256,44 @@ class Call {
             const sfuJoinFailures = new Map();
             const joinData = data;
             maxJoinRetries = Math.max(maxJoinRetries, 1);
-            for (let attempt = 0; attempt < maxJoinRetries; attempt++) {
-                try {
-                    this.logger.trace(`Joining call (${attempt})`, this.cid);
-                    await this.doJoin(data);
-                    delete joinData.migrating_from;
-                    delete joinData.migrating_from_list;
-                    break;
-                }
-                catch (err) {
-                    this.logger.warn(`Failed to join call (${attempt})`, this.cid);
-                    if ((err instanceof ErrorFromResponse && err.unrecoverable) ||
-                        (err instanceof SfuJoinError && err.unrecoverable)) {
-                        // if the error is unrecoverable, we should not retry as that signals
-                        // that connectivity is good, but the coordinator doesn't allow the user
-                        // to join the call due to some reason (e.g., ended call, expired token...)
-                        throw err;
-                    }
-                    // immediately switch to a different SFU in case of recoverable join error
-                    const switchSfu = err instanceof SfuJoinError &&
-                        SfuJoinError.isJoinErrorCode(err.errorEvent);
-                    const sfuId = this.credentials?.server.edge_name || '';
-                    const failures = (sfuJoinFailures.get(sfuId) || 0) + 1;
-                    sfuJoinFailures.set(sfuId, failures);
-                    if (switchSfu || failures >= 2) {
-                        joinData.migrating_from = sfuId;
-                        joinData.migrating_from_list = Array.from(sfuJoinFailures.keys());
+            try {
+                for (let attempt = 0; attempt < maxJoinRetries; attempt++) {
+                    try {
+                        this.logger.trace(`Joining call (${attempt})`, this.cid);
+                        await this.doJoin(data);
+                        delete joinData.migrating_from;
+                        delete joinData.migrating_from_list;
+                        break;
                     }
-                    if (attempt === maxJoinRetries - 1) {
-                        throw err;
+                    catch (err) {
+                        this.logger.warn(`Failed to join call (${attempt})`, this.cid);
+                        if ((err instanceof ErrorFromResponse && err.unrecoverable) ||
+                            (err instanceof SfuJoinError && err.unrecoverable)) {
+                            // if the error is unrecoverable, we should not retry as that signals
+                            // that connectivity is good, but the coordinator doesn't allow the user
+                            // to join the call due to some reason (e.g., ended call, expired token...)
+                            throw err;
+                        }
+                        // immediately switch to a different SFU in case of recoverable join error
+                        const switchSfu = err instanceof SfuJoinError &&
+                            SfuJoinError.isJoinErrorCode(err.errorEvent);
+                        const sfuId = this.credentials?.server.edge_name || '';
+                        const failures = (sfuJoinFailures.get(sfuId) || 0) + 1;
+                        sfuJoinFailures.set(sfuId, failures);
+                        if (switchSfu || failures >= 2) {
+                            joinData.migrating_from = sfuId;
+                            joinData.migrating_from_list = Array.from(sfuJoinFailures.keys());
+                        }
+                        if (attempt === maxJoinRetries - 1) {
+                            throw err;
+                        }
                     }
+                    await sleep(retryInterval(attempt));
                 }
-                await sleep(retryInterval(attempt));
+            }
+            catch (error) {
+                callingX?.endCall(this, 'error');
+                throw error;
             }
         };
         /**
@@ -13311,7 +13440,9 @@ class Call {
             // re-apply them on later reconnections or server-side data fetches
             if (!this.deviceSettingsAppliedOnce && this.state.settings) {
                 await this.applyDeviceConfig(this.state.settings, true, false);
-                globalThis.streamRNVideoSDK?.callManager.start();
+                globalThis.streamRNVideoSDK?.callManager.start({
+                    isRingingTypeCall: this.ringing,
+                });
                 this.deviceSettingsAppliedOnce = true;
             }
             // We shouldn't persist the `ring` and `notify` state after joining the call
@@ -13739,6 +13870,7 @@ class Call {
                 if (strategy === WebsocketReconnectStrategy.UNSPECIFIED)
                     return;
                 if (strategy === WebsocketReconnectStrategy.DISCONNECT) {
+                    globalThis.streamRNVideoSDK?.callingX?.endCall(this, 'error');
                     this.leave({ message: 'SFU instructed to disconnect' }).catch((err) => {
                         this.logger.warn(`Can't leave call after disconnect request`, err);
                     });
@@ -14760,7 +14892,7 @@ class Call {
      * A flag indicating whether the call was created by the current user.
      */
     get isCreatedByMe() {
-        return this.state.createdBy?.id === this.currentUserId;
+        return (this.currentUserId && this.state.createdBy?.id === this.currentUserId);
     }
 }
 
@@ -15886,7 +16018,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.6-beta.0", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),