@stream-io/video-client 1.44.3 → 1.44.5

package/dist/index.cjs.js

@@ -6303,7 +6303,7 @@ const getSdkVersion = (sdk) => {
     return sdk ? `${sdk.major}.${sdk.minor}.${sdk.patch}` : '0.0.0-development';
 };
 
-const version = "1.44.3";
+const version = "1.44.5";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -9511,6 +9511,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 !== exports.CallingState.JOINED) {
+                this.stop();
+            }
+            else {
+                this.start();
+            }
+        });
+    }
+}
+
 const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
     videoTrack: exports.VisibilityState.UNKNOWN,
     screenShareTrack: exports.VisibilityState.UNKNOWN,
@@ -9536,7 +9626,7 @@ class DynascaleManager {
          */
         this.viewportTracker = new ViewportTracker();
         this.logger = videoLoggerSystem.getLogger('DynascaleManager');
-        this.useWebAudio = isSafari();
+        this.useWebAudio = false;
         this.pendingSubscriptionsUpdate = null;
         this.videoTrackSubscriptionOverridesSubject = new rxjs.BehaviorSubject({});
         this.videoTrackSubscriptionOverrides$ = this.videoTrackSubscriptionOverridesSubject.asObservable();
@@ -9568,7 +9658,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();
@@ -9767,12 +9858,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(rxjs.distinctUntilKeyChanged('publishedTracks'), rxjs.map((p) => trackType === 'videoTrack' ? hasVideo(p) : hasScreenShare(p)), rxjs.distinctUntilChanged())
+                    .pipe(rxjs.distinctUntilKeyChanged('publishedTracks'), rxjs.map((p) => (isVideoTrack ? hasVideo(p) : hasScreenShare(p))), rxjs.distinctUntilChanged())
                     .subscribe((isPublishing) => {
                     if (isPublishing) {
                         // the participant just started to publish a track
@@ -9792,10 +9884,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(rxjs.distinctUntilKeyChanged(trackType === 'videoTrack' ? 'videoStream' : 'screenShareStream'))
+                .pipe(rxjs.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;
@@ -9834,6 +9927,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(rxjs.map((ps) => ps.find((p) => p.sessionId === sessionId)), rxjs.takeWhile((p) => !!p), rxjs.distinctUntilChanged(), rxjs.shareReplay({ bufferSize: 1, refCount: true }));
             const updateSinkId = (deviceId, audioContext) => {
                 if (!deviceId)
@@ -9852,14 +9946,12 @@ class DynascaleManager {
             };
             let sourceNode = undefined;
             let gainNode = undefined;
+            const isAudioTrack = trackType === 'audioTrack';
+            const trackKey = isAudioTrack ? 'audioStream' : 'screenShareAudioStream';
             const updateMediaStreamSubscription = participant$
-                .pipe(rxjs.distinctUntilKeyChanged(trackType === 'screenShareAudioTrack'
-                ? 'screenShareAudioStream'
-                : 'audioStream'))
+                .pipe(rxjs.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(() => {
@@ -9914,6 +10006,7 @@ class DynascaleManager {
             });
             audioElement.autoplay = true;
             return () => {
+                this.audioBindingsWatchdog?.unregister(sessionId, trackType);
                 sinkIdSubscription?.unsubscribe();
                 volumeSubscription.unsubscribe();
                 updateMediaStreamSubscription.unsubscribe();
@@ -9974,6 +10067,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;
@@ -10318,6 +10414,9 @@ class BrowserPermission {
     }
     setState(state) {
         if (this.state !== state) {
+            const { tracer, queryName } = this.permission;
+            const traceKey = `navigator.mediaDevices.${queryName}.permission`;
+            tracer?.trace(traceKey, { previous: this.state, state });
             this.state = state;
             this.listeners.forEach((listener) => listener(state));
         }
@@ -10359,9 +10458,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;
 };
@@ -10388,17 +10484,19 @@ const videoDeviceConstraints = {
  * Keeps track of the browser permission to use microphone. This permission also
  * affects an ability to enumerate audio devices.
  */
-const getAudioBrowserPermission = lazy(() => new BrowserPermission({
+const getAudioBrowserPermission = lazy((tracer) => new BrowserPermission({
     constraints: audioDeviceConstraints,
     queryName: 'microphone',
+    tracer,
 }));
 /**
  * Keeps track of the browser permission to use camera. This permission also
  * affects an ability to enumerate video devices.
  */
-const getVideoBrowserPermission = lazy(() => new BrowserPermission({
+const getVideoBrowserPermission = lazy((tracer) => new BrowserPermission({
     constraints: videoDeviceConstraints,
     queryName: 'camera',
+    tracer,
 }));
 const getDeviceChangeObserver = lazy((tracer) => {
     // 'addEventListener' is not available in React Native, returning
@@ -10414,7 +10512,7 @@ const getDeviceChangeObserver = lazy((tracer) => {
  * the observable errors.
  */
 const getAudioDevices = lazy((tracer) => {
-    return rxjs.merge(getDeviceChangeObserver(tracer), getAudioBrowserPermission().asObservable()).pipe(rxjs.startWith([]), rxjs.concatMap(() => getDevices(getAudioBrowserPermission(), 'audioinput', tracer)), rxjs.shareReplay(1));
+    return rxjs.merge(getDeviceChangeObserver(tracer), getAudioBrowserPermission(tracer).asObservable()).pipe(rxjs.startWith([]), rxjs.concatMap(() => getDevices(getAudioBrowserPermission(tracer), 'audioinput', tracer)), rxjs.shareReplay(1));
 });
 /**
  * Prompts the user for a permission to use video devices (if not already granted
@@ -10423,7 +10521,7 @@ const getAudioDevices = lazy((tracer) => {
  * the observable errors.
  */
 const getVideoDevices = lazy((tracer) => {
-    return rxjs.merge(getDeviceChangeObserver(tracer), getVideoBrowserPermission().asObservable()).pipe(rxjs.startWith([]), rxjs.concatMap(() => getDevices(getVideoBrowserPermission(), 'videoinput', tracer)), rxjs.shareReplay(1));
+    return rxjs.merge(getDeviceChangeObserver(tracer), getVideoBrowserPermission(tracer).asObservable()).pipe(rxjs.startWith([]), rxjs.concatMap(() => getDevices(getVideoBrowserPermission(tracer), 'videoinput', tracer)), rxjs.shareReplay(1));
 });
 /**
  * Prompts the user for a permission to use video devices (if not already granted
@@ -10432,7 +10530,7 @@ const getVideoDevices = lazy((tracer) => {
  * the observable errors.
  */
 const getAudioOutputDevices = lazy((tracer) => {
-    return rxjs.merge(getDeviceChangeObserver(tracer), getAudioBrowserPermission().asObservable()).pipe(rxjs.startWith([]), rxjs.concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput', tracer)), rxjs.shareReplay(1));
+    return rxjs.merge(getDeviceChangeObserver(tracer), getAudioBrowserPermission(tracer).asObservable()).pipe(rxjs.startWith([]), rxjs.concatMap(() => getDevices(getAudioBrowserPermission(tracer), 'audiooutput', tracer)), rxjs.shareReplay(1));
 });
 let getUserMediaExecId = 0;
 const getStream = async (constraints, tracer) => {
@@ -10498,25 +10596,21 @@ const getAudioStream = async (trackConstraints, tracer) => {
         },
     };
     try {
-        await getAudioBrowserPermission().prompt({
+        await getAudioBrowserPermission(tracer).prompt({
             throwOnNotAllowed: true,
             forcePrompt: true,
         });
         return await getStream(constraints, tracer);
     }
     catch (error) {
+        const logger = videoLoggerSystem.getLogger('devices');
         if (isNotFoundOrOverconstrainedError(error) && trackConstraints?.deviceId) {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { deviceId, ...relaxedConstraints } = trackConstraints;
-            videoLoggerSystem
-                .getLogger('devices')
-                .warn('Failed to get audio stream, will try again with relaxed constraints', { error, constraints, relaxedConstraints });
+            logger.warn('Failed to get audio stream, will try again with relaxed constraints', { error, constraints, relaxedConstraints });
             return getAudioStream(relaxedConstraints, tracer);
         }
-        videoLoggerSystem.getLogger('devices').error('Failed to get audio stream', {
-            error,
-            constraints,
-        });
+        logger.error('Failed to get audio stream', { error, constraints });
         throw error;
     }
 };
@@ -10536,25 +10630,21 @@ const getVideoStream = async (trackConstraints, tracer) => {
         },
     };
     try {
-        await getVideoBrowserPermission().prompt({
+        await getVideoBrowserPermission(tracer).prompt({
             throwOnNotAllowed: true,
             forcePrompt: true,
         });
         return await getStream(constraints, tracer);
     }
     catch (error) {
+        const logger = videoLoggerSystem.getLogger('devices');
         if (isNotFoundOrOverconstrainedError(error) && trackConstraints?.deviceId) {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { deviceId, ...relaxedConstraints } = trackConstraints;
-            videoLoggerSystem
-                .getLogger('devices')
-                .warn('Failed to get video stream, will try again with relaxed constraints', { error, constraints, relaxedConstraints });
-            return getVideoStream(relaxedConstraints);
+            logger.warn('Failed to get video stream, will try again with relaxed constraints', { error, constraints, relaxedConstraints });
+            return getVideoStream(relaxedConstraints, tracer);
         }
-        videoLoggerSystem.getLogger('devices').error('Failed to get video stream', {
-            error,
-            constraints,
-        });
+        logger.error('Failed to get video stream', { error, constraints });
         throw error;
     }
 };
@@ -11325,8 +11415,8 @@ class DeviceManagerState {
 }
 
 class CameraManagerState extends DeviceManagerState {
-    constructor() {
-        super('stop-tracks', getVideoBrowserPermission());
+    constructor(tracer) {
+        super('stop-tracks', getVideoBrowserPermission(tracer));
         this.directionSubject = new rxjs.BehaviorSubject(undefined);
         /**
          * Observable that emits the preferred camera direction
@@ -11380,7 +11470,7 @@ class CameraManager extends DeviceManager {
      * @param devicePersistence the device persistence preferences to use.
      */
     constructor(call, devicePersistence) {
-        super(call, new CameraManagerState(), TrackType.VIDEO, devicePersistence);
+        super(call, new CameraManagerState(call.tracer), TrackType.VIDEO, devicePersistence);
         this.targetResolution = {
             width: 1280,
             height: 720,
@@ -11591,8 +11681,8 @@ class AudioDeviceManagerState extends DeviceManagerState {
 }
 
 class MicrophoneManagerState extends AudioDeviceManagerState {
-    constructor(disableMode) {
-        super(disableMode, getAudioBrowserPermission(), AudioBitrateProfile.VOICE_STANDARD_UNSPECIFIED);
+    constructor(disableMode, tracer) {
+        super(disableMode, getAudioBrowserPermission(tracer), AudioBitrateProfile.VOICE_STANDARD_UNSPECIFIED);
         this.speakingWhileMutedSubject = new rxjs.BehaviorSubject(false);
         /**
          * An Observable that emits `true` if the user's microphone is muted, but they're speaking.
@@ -11932,7 +12022,7 @@ class RNSpeechDetector {
 
 class MicrophoneManager extends AudioDeviceManager {
     constructor(call, devicePersistence, disableMode = 'stop-tracks') {
-        super(call, new MicrophoneManagerState(disableMode), TrackType.AUDIO, devicePersistence);
+        super(call, new MicrophoneManagerState(disableMode, call.tracer), TrackType.AUDIO, devicePersistence);
         this.speakingWhileMutedNotificationEnabled = true;
         this.soundDetectorConcurrencyTag = Symbol('soundDetectorConcurrencyTag');
         this.silenceThresholdMs = 5000;
@@ -12034,7 +12124,6 @@ class MicrophoneManager extends AudioDeviceManager {
                             deviceId,
                             label,
                         };
-                        console.log(event);
                         this.call.tracer.trace('mic.capture_report', event);
                         this.call.streamClient.dispatchEvent(event);
                     },
@@ -15908,7 +15997,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.44.3", ...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}`),