@stream-io/video-client 1.27.0 → 1.27.2

package/dist/index.cjs.js

@@ -5916,7 +5916,7 @@ const aggregate = (stats) => {
     return report;
 };
 
-const version = "1.27.0";
+const version = "1.27.2";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -6500,6 +6500,15 @@ class Tracer {
                 return;
             this.buffer.push([tag, this.id, data, Date.now()]);
         };
+        this.traceOnce = (key, tag, data) => {
+            if (this.keys?.has(key))
+                return;
+            this.trace(tag, data);
+            (this.keys ?? (this.keys = new Map())).set(key, true);
+        };
+        this.resetTrace = (key) => {
+            this.keys?.delete(key);
+        };
         this.take = () => {
             const snapshot = this.buffer;
             this.buffer = [];
@@ -6512,6 +6521,7 @@ class Tracer {
         };
         this.dispose = () => {
             this.buffer = [];
+            this.keys?.clear();
         };
         this.id = id;
     }
@@ -6975,9 +6985,8 @@ const computeVideoLayers = (videoTrack, publishOption) => {
     if (isAudioTrackType(publishOption.trackType))
         return;
     const optimalVideoLayers = [];
-    const settings = videoTrack.getSettings();
-    const { width = 0, height = 0 } = settings;
-    const { bitrate, codec, fps, maxSpatialLayers = 3, maxTemporalLayers = 3, videoDimension = { width: 1280, height: 720 }, useSingleLayer, } = publishOption;
+    const { bitrate, codec, fps = 30, maxSpatialLayers = 3, maxTemporalLayers = 3, videoDimension = { width: 1280, height: 720 }, useSingleLayer, } = publishOption;
+    const { width = videoDimension.width, height = videoDimension.height } = videoTrack.getSettings();
     const maxBitrate = getComputedMaxBitrate(videoDimension, width, height, bitrate);
     let downscaleFactor = 1;
     let bitrateFactor = 1;
@@ -7009,7 +7018,7 @@ const computeVideoLayers = (videoTrack, publishOption) => {
     }
     // for simplicity, we start with all layers enabled, then this function
     // will clear/reassign the layers that are not needed
-    return withSimulcastConstraints(settings, optimalVideoLayers, useSingleLayer);
+    return withSimulcastConstraints(width, height, optimalVideoLayers, useSingleLayer);
 };
 /**
  * Computes the maximum bitrate for a given resolution.
@@ -7043,9 +7052,9 @@ const getComputedMaxBitrate = (targetResolution, currentWidth, currentHeight, bi
  *
  * https://chromium.googlesource.com/external/webrtc/+/refs/heads/main/media/engine/simulcast.cc#90
  */
-const withSimulcastConstraints = (settings, optimalVideoLayers, useSingleLayer) => {
+const withSimulcastConstraints = (width, height, optimalVideoLayers, useSingleLayer) => {
     let layers;
-    const size = Math.max(settings.width || 0, settings.height || 0);
+    const size = Math.max(width, height);
     if (size <= 320) {
         // provide only one layer 320x240 (f), the one with the highest quality
         layers = optimalVideoLayers.filter((layer) => layer.rid === 'f');
@@ -7729,9 +7738,9 @@ const uninitialized = Symbol('uninitialized');
  */
 function lazy(factory) {
     let value = uninitialized;
-    return () => {
+    return (...args) => {
         if (value === uninitialized) {
-            value = factory();
+            value = factory(...args);
         }
         return value;
     };
@@ -8062,7 +8071,6 @@ class StreamSfuClient {
             const current = this.joinResponseTask;
             let timeoutId = undefined;
             const unsubscribe = this.dispatcher.on('joinResponse', (joinResponse) => {
-                this.logger('debug', 'Received joinResponse', joinResponse);
                 clearTimeout(timeoutId);
                 unsubscribe();
                 this.keepAlive();
@@ -8070,7 +8078,9 @@ class StreamSfuClient {
             });
             timeoutId = setTimeout(() => {
                 unsubscribe();
-                current.reject(new Error('Waiting for "joinResponse" has timed out'));
+                const message = `Waiting for "joinResponse" has timed out after ${this.joinResponseTimeout}ms`;
+                this.tracer?.trace('joinRequestTimeout', message);
+                current.reject(new Error(message));
             }, this.joinResponseTimeout);
             const joinRequest = SfuRequest.create({
                 requestPayload: {
@@ -9414,6 +9424,25 @@ const CallTypes = new CallTypesRegistry([
     }),
 ]);
 
+/**
+ * Deactivates MediaStream (stops and removes tracks) to be later garbage collected
+ *
+ * @param stream MediaStream
+ * @returns void
+ */
+const disposeOfMediaStream = (stream) => {
+    if (!stream.active)
+        return;
+    stream.getTracks().forEach((track) => {
+        track.stop();
+    });
+    // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the stream
+    if (typeof stream.release === 'function') {
+        // @ts-expect-error - release() is present in react-native-webrtc
+        stream.release();
+    }
+};
+
 class BrowserPermission {
     constructor(permission) {
         this.permission = permission;
@@ -9545,8 +9574,9 @@ function canQueryPermissions() {
  *
  * @param permission a BrowserPermission instance.
  * @param kind the kind of devices to enumerate.
+ * @param tracer the tracer to use for tracing the device enumeration.
  */
-const getDevices = (permission, kind) => {
+const getDevices = (permission, kind, tracer) => {
     return rxjs.from((async () => {
         let devices = await navigator.mediaDevices.enumerateDevices();
         // for privacy reasons, most browsers don't give you device labels
@@ -9555,6 +9585,7 @@ const getDevices = (permission, kind) => {
         if (shouldPromptForBrowserPermission && (await permission.prompt())) {
             devices = await navigator.mediaDevices.enumerateDevices();
         }
+        tracer?.traceOnce('device-enumeration', 'navigator.mediaDevices.enumerateDevices', devices);
         return devices.filter((device) => device.kind === kind &&
             device.label !== '' &&
             device.deviceId !== 'default');
@@ -9605,12 +9636,12 @@ const getVideoBrowserPermission = lazy(() => new BrowserPermission({
     constraints: videoDeviceConstraints,
     queryName: 'camera',
 }));
-const getDeviceChangeObserver = lazy(() => {
+const getDeviceChangeObserver = lazy((tracer) => {
     // 'addEventListener' is not available in React Native, returning
     // an observable that will never fire
     if (!navigator.mediaDevices.addEventListener)
         return rxjs.from([]);
-    return rxjs.fromEvent(navigator.mediaDevices, 'devicechange').pipe(rxjs.map(() => undefined), rxjs.debounceTime(500));
+    return rxjs.fromEvent(navigator.mediaDevices, 'devicechange').pipe(rxjs.tap(() => tracer?.resetTrace('device-enumeration')), rxjs.map(() => undefined), rxjs.debounceTime(500));
 });
 /**
  * Prompts the user for a permission to use audio devices (if not already granted
@@ -9618,8 +9649,8 @@ const getDeviceChangeObserver = lazy(() => {
  * if devices are added/removed the list is updated, and if the permission is revoked,
  * the observable errors.
  */
-const getAudioDevices = lazy(() => {
-    return rxjs.merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(rxjs.startWith(undefined), rxjs.concatMap(() => getDevices(getAudioBrowserPermission(), 'audioinput')), rxjs.shareReplay(1));
+const getAudioDevices = lazy((tracer) => {
+    return rxjs.merge(getDeviceChangeObserver(tracer), getAudioBrowserPermission().asObservable()).pipe(rxjs.startWith(undefined), rxjs.concatMap(() => getDevices(getAudioBrowserPermission(), 'audioinput', tracer)), rxjs.shareReplay(1));
 });
 /**
  * Prompts the user for a permission to use video devices (if not already granted
@@ -9627,8 +9658,8 @@ const getAudioDevices = lazy(() => {
  * if devices are added/removed the list is updated, and if the permission is revoked,
  * the observable errors.
  */
-const getVideoDevices = lazy(() => {
-    return rxjs.merge(getDeviceChangeObserver(), getVideoBrowserPermission().asObservable()).pipe(rxjs.startWith(undefined), rxjs.concatMap(() => getDevices(getVideoBrowserPermission(), 'videoinput')), rxjs.shareReplay(1));
+const getVideoDevices = lazy((tracer) => {
+    return rxjs.merge(getDeviceChangeObserver(tracer), getVideoBrowserPermission().asObservable()).pipe(rxjs.startWith(undefined), rxjs.concatMap(() => getDevices(getVideoBrowserPermission(), 'videoinput', tracer)), rxjs.shareReplay(1));
 });
 /**
  * Prompts the user for a permission to use video devices (if not already granted
@@ -9636,8 +9667,8 @@ const getVideoDevices = lazy(() => {
  * if devices are added/removed the list is updated, and if the permission is revoked,
  * the observable errors.
  */
-const getAudioOutputDevices = lazy(() => {
-    return rxjs.merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(rxjs.startWith(undefined), rxjs.concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput')), rxjs.shareReplay(1));
+const getAudioOutputDevices = lazy((tracer) => {
+    return rxjs.merge(getDeviceChangeObserver(tracer), getAudioBrowserPermission().asObservable()).pipe(rxjs.startWith(undefined), rxjs.concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput', tracer)), rxjs.shareReplay(1));
 });
 let getUserMediaExecId = 0;
 const getStream = async (constraints, tracer) => {
@@ -9809,24 +9840,6 @@ const deviceIds$ = typeof navigator !== 'undefined' &&
     typeof navigator.mediaDevices !== 'undefined'
     ? getDeviceChangeObserver().pipe(rxjs.startWith(undefined), rxjs.concatMap(() => navigator.mediaDevices.enumerateDevices()), rxjs.shareReplay(1))
     : undefined;
-/**
- * Deactivates MediaStream (stops and removes tracks) to be later garbage collected
- *
- * @param stream MediaStream
- * @returns void
- */
-const disposeOfMediaStream = (stream) => {
-    if (!stream.active)
-        return;
-    stream.getTracks().forEach((track) => {
-        track.stop();
-    });
-    // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the stream
-    if (typeof stream.release === 'function') {
-        // @ts-expect-error - release() is present in react-native-webrtc
-        stream.release();
-    }
-};
 /**
  * Resolves `default` device id into the real device id. Some browsers (notably,
  * Chromium-based) report device with id `default` among audio input and output
@@ -10009,6 +10022,7 @@ class InputMediaDeviceManager {
                 entry.stop?.();
                 this.filters = this.filters.filter((f) => f !== entry);
                 await this.applySettingsToStream();
+                this.call.tracer.trace(`unregisterFilter.${TrackType[this.trackType]}`, null);
             }),
         };
     }
@@ -10028,7 +10042,7 @@ class InputMediaDeviceManager {
      */
     async select(deviceId) {
         if (isReactNative()) {
-            throw new Error('This method is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for reference.');
+            throw new Error('This method is not supported in React Native.');
         }
         const prevDeviceId = this.state.selectedDevice;
         if (deviceId === prevDeviceId) {
@@ -10595,7 +10609,7 @@ class CameraManager extends InputMediaDeviceManager {
         }
     }
     getDevices() {
-        return getVideoDevices();
+        return getVideoDevices(this.call.tracer);
     }
     getStream(constraints) {
         constraints.width = this.targetResolution.width;
@@ -11002,6 +11016,7 @@ class MicrophoneManager extends InputMediaDeviceManager {
             .catch((err) => {
             this.logger('warn', 'Failed to unregister noise cancellation', err);
         });
+        this.call.tracer.trace('noiseCancellation.disabled', true);
         await this.call.notifyNoiseCancellationStopped();
     }
     /**
@@ -11046,7 +11061,7 @@ class MicrophoneManager extends InputMediaDeviceManager {
         }
     }
     getDevices() {
-        return getAudioDevices();
+        return getAudioDevices(this.call.tracer);
     }
     getStream(constraints) {
         return getAudioStream(constraints, this.call.tracer);
@@ -11311,7 +11326,7 @@ class SpeakerManager {
         if (isReactNative()) {
             throw new Error('This feature is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for more details');
         }
-        return getAudioOutputDevices();
+        return getAudioOutputDevices(this.call.tracer);
     }
     /**
      * Select a device.
@@ -11838,6 +11853,12 @@ class Call {
                 }
                 catch (err) {
                     this.logger('warn', `Failed to join call (${attempt})`, this.cid);
+                    if (err instanceof ErrorFromResponse && 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;
+                    }
                     const sfuId = this.credentials?.server.edge_name || '';
                     const failures = (sfuJoinFailures.get(sfuId) || 0) + 1;
                     sfuJoinFailures.set(sfuId, failures);
@@ -12649,9 +12670,12 @@ class Call {
          * @internal
          */
         this.notifyTrackMuteState = async (muted, ...trackTypes) => {
-            if (!this.sfuClient)
-                return;
-            await this.sfuClient.updateMuteStates(trackTypes.map((trackType) => ({ trackType, muted })));
+            const key = `muteState.${this.cid}.${trackTypes.join('-')}`;
+            await withoutConcurrency(key, async () => {
+                if (!this.sfuClient)
+                    return;
+                await this.sfuClient.updateMuteStates(trackTypes.map((trackType) => ({ trackType, muted })));
+            });
         };
         /**
          * Will enhance the reported stats with additional participant-specific information (`callStatsReport$` state [store variable](./StreamVideoClient.md/#readonlystatestore)).
@@ -13561,7 +13585,6 @@ class StableWSConnection {
             this.totalFailures += 1;
             this._setHealth(false);
             this.isConnecting = false;
-            this.rejectConnectionOpen?.(new Error(`WebSocket error: ${event}`));
             this._log(`onerror() - WS connection resulted into error`, { event });
             this._reconnect();
         };
@@ -14345,12 +14368,6 @@ class StreamClient {
                 response,
             });
         };
-        this._logApiError = (type, url, error) => {
-            this.logger('error', `client:${type} - Error - url: ${url}`, {
-                url,
-                error,
-            });
-        };
         this.doAxiosRequest = async (type, url, data, options = {}) => {
             if (!options.publicEndpoint) {
                 await Promise.all([
@@ -14397,27 +14414,36 @@ class StreamClient {
                 }
                 this._logApiResponse(type, url, response);
                 this.consecutiveFailures = 0;
-                return this.handleResponse(response);
+                return response.data;
             }
             catch (e /**TODO: generalize error types  */) {
                 e.client_request_id = requestConfig.headers?.['x-client-request-id'];
                 this.consecutiveFailures += 1;
-                if (e.response) {
-                    this._logApiError(type, url, e.response);
-                    /** connection_fallback depends on this token expiration logic */
-                    if (e.response.data.code === KnownCodes.TOKEN_EXPIRED &&
-                        !this.tokenManager.isStatic()) {
-                        if (this.consecutiveFailures > 1) {
-                            await sleep(retryInterval(this.consecutiveFailures));
-                        }
-                        await this.tokenManager.loadToken();
-                        return await this.doAxiosRequest(type, url, data, options);
+                const { response } = e;
+                if (!response || !isErrorResponse(response)) {
+                    this.logger('error', `client:${type} url: ${url}`, e);
+                    throw e;
+                }
+                const { data: responseData, status } = response;
+                const isTokenExpired = responseData.code === KnownCodes.TOKEN_EXPIRED;
+                if (isTokenExpired && !this.tokenManager.isStatic()) {
+                    this.logger('warn', `client:${type}: url: ${url}`, response);
+                    if (this.consecutiveFailures > 1) {
+                        await sleep(retryInterval(this.consecutiveFailures));
                     }
-                    return this.handleResponse(e.response);
+                    // refresh and retry the request
+                    await this.tokenManager.loadToken();
+                    return await this.doAxiosRequest(type, url, data, options);
                 }
                 else {
-                    this._logApiError(type, url, e);
-                    throw e;
+                    this.logger('error', `client:${type} url: ${url}`, response);
+                    throw new ErrorFromResponse({
+                        message: `Stream error code ${responseData.code}: ${responseData.message}`,
+                        code: responseData.code ?? null,
+                        unrecoverable: responseData.unrecoverable ?? null,
+                        response: response,
+                        status: status,
+                    });
                 }
             }
         };
@@ -14440,23 +14466,6 @@ class StreamClient {
                 params,
             });
         };
-        this.errorFromResponse = (response) => {
-            const { data, status } = response;
-            return new ErrorFromResponse({
-                message: `Stream error code ${data.code}: ${data.message}`,
-                code: data.code ?? null,
-                unrecoverable: data.unrecoverable ?? null,
-                response: response,
-                status: status,
-            });
-        };
-        this.handleResponse = (response) => {
-            const data = response.data;
-            if (isErrorResponse(response)) {
-                throw this.errorFromResponse(response);
-            }
-            return data;
-        };
         this.dispatchEvent = (event) => {
             this.logger('debug', `Dispatching event: ${event.type}`, event);
             if (!this.listeners)
@@ -14489,7 +14498,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.27.0", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.27.2", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),