@stream-io/video-client 1.27.0 → 1.27.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.27.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.27.1...@stream-io/video-client-1.27.2) (2025-08-05)
+
+### Bug Fixes
+
+- improved logging and tracing ([#1874](https://github.com/GetStream/stream-video-js/issues/1874)) ([e450ce2](https://github.com/GetStream/stream-video-js/commit/e450ce2a294d6f80480fcc709591c13d9ede79e4))
+
+## [1.27.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.27.0...@stream-io/video-client-1.27.1) (2025-07-25)
+
+### Bug Fixes
+
+- improved audio and video filter tracing ([#1862](https://github.com/GetStream/stream-video-js/issues/1862)) ([701ea4b](https://github.com/GetStream/stream-video-js/commit/701ea4b3266f68072c1325b70221fdefd77137ec))
+- synchronize updateMuteState; use correct fallback dimensions ([#1867](https://github.com/GetStream/stream-video-js/issues/1867)) ([154cdda](https://github.com/GetStream/stream-video-js/commit/154cddaa4462ee03af5fdf4929ad9f4e3d4b5070))
+- trace available devices and thermal state changes ([#1866](https://github.com/GetStream/stream-video-js/issues/1866)) ([d8312b5](https://github.com/GetStream/stream-video-js/commit/d8312b5c109b14baa28ee764202d387499d0fd52))
+
 ## [1.27.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.26.1...@stream-io/video-client-1.27.0) (2025-07-18)
 
 ### Features

package/dist/index.browser.es.js

@@ -4,7 +4,7 @@ import { ServiceType, stackIntercept, RpcError } from '@protobuf-ts/runtime-rpc'
 import axios from 'axios';
 export { AxiosError } from 'axios';
 import { TwirpFetchTransport, TwirpErrorCode } from '@protobuf-ts/twirp-transport';
-import { ReplaySubject, combineLatest, BehaviorSubject, shareReplay, map, distinctUntilChanged, takeWhile, distinctUntilKeyChanged, fromEventPattern, startWith, concatMap, merge, from, fromEvent, debounceTime, pairwise, of } from 'rxjs';
+import { ReplaySubject, combineLatest, BehaviorSubject, shareReplay, map, distinctUntilChanged, takeWhile, distinctUntilKeyChanged, fromEventPattern, startWith, concatMap, merge, from, fromEvent, tap, debounceTime, pairwise, of } from 'rxjs';
 import { UAParser } from 'ua-parser-js';
 import { parse, write } from 'sdp-transform';
 
@@ -5914,7 +5914,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,
@@ -6498,6 +6498,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 = [];
@@ -6510,6 +6519,7 @@ class Tracer {
         };
         this.dispose = () => {
             this.buffer = [];
+            this.keys?.clear();
         };
         this.id = id;
     }
@@ -6973,9 +6983,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;
@@ -7007,7 +7016,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.
@@ -7041,9 +7050,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');
@@ -7727,9 +7736,9 @@ const uninitialized = Symbol('uninitialized');
  */
 function lazy(factory) {
     let value = uninitialized;
-    return () => {
+    return (...args) => {
         if (value === uninitialized) {
-            value = factory();
+            value = factory(...args);
         }
         return value;
     };
@@ -8060,7 +8069,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();
@@ -8068,7 +8076,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: {
@@ -9412,6 +9422,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;
@@ -9543,8 +9572,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 from((async () => {
         let devices = await navigator.mediaDevices.enumerateDevices();
         // for privacy reasons, most browsers don't give you device labels
@@ -9553,6 +9583,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');
@@ -9603,12 +9634,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 from([]);
-    return fromEvent(navigator.mediaDevices, 'devicechange').pipe(map(() => undefined), debounceTime(500));
+    return fromEvent(navigator.mediaDevices, 'devicechange').pipe(tap(() => tracer?.resetTrace('device-enumeration')), map(() => undefined), debounceTime(500));
 });
 /**
  * Prompts the user for a permission to use audio devices (if not already granted
@@ -9616,8 +9647,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 merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getAudioBrowserPermission(), 'audioinput')), shareReplay(1));
+const getAudioDevices = lazy((tracer) => {
+    return merge(getDeviceChangeObserver(tracer), getAudioBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getAudioBrowserPermission(), 'audioinput', tracer)), shareReplay(1));
 });
 /**
  * Prompts the user for a permission to use video devices (if not already granted
@@ -9625,8 +9656,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 merge(getDeviceChangeObserver(), getVideoBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getVideoBrowserPermission(), 'videoinput')), shareReplay(1));
+const getVideoDevices = lazy((tracer) => {
+    return merge(getDeviceChangeObserver(tracer), getVideoBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getVideoBrowserPermission(), 'videoinput', tracer)), shareReplay(1));
 });
 /**
  * Prompts the user for a permission to use video devices (if not already granted
@@ -9634,8 +9665,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 merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput')), shareReplay(1));
+const getAudioOutputDevices = lazy((tracer) => {
+    return merge(getDeviceChangeObserver(tracer), getAudioBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput', tracer)), shareReplay(1));
 });
 let getUserMediaExecId = 0;
 const getStream = async (constraints, tracer) => {
@@ -9807,24 +9838,6 @@ const deviceIds$ = typeof navigator !== 'undefined' &&
     typeof navigator.mediaDevices !== 'undefined'
     ? getDeviceChangeObserver().pipe(startWith(undefined), concatMap(() => navigator.mediaDevices.enumerateDevices()), 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
@@ -10007,6 +10020,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);
             }),
         };
     }
@@ -10026,7 +10040,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) {
@@ -10593,7 +10607,7 @@ class CameraManager extends InputMediaDeviceManager {
         }
     }
     getDevices() {
-        return getVideoDevices();
+        return getVideoDevices(this.call.tracer);
     }
     getStream(constraints) {
         constraints.width = this.targetResolution.width;
@@ -11000,6 +11014,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();
     }
     /**
@@ -11044,7 +11059,7 @@ class MicrophoneManager extends InputMediaDeviceManager {
         }
     }
     getDevices() {
-        return getAudioDevices();
+        return getAudioDevices(this.call.tracer);
     }
     getStream(constraints) {
         return getAudioStream(constraints, this.call.tracer);
@@ -11309,7 +11324,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.
@@ -11836,6 +11851,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);
@@ -12647,9 +12668,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}`),