@stream-io/video-client 1.27.0 → 1.27.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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.1";
 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;
     };
@@ -9543,8 +9552,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 +9563,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 +9614,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 +9627,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 +9636,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 +9645,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) => {
@@ -10007,6 +10018,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 +10038,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 +10605,7 @@ class CameraManager extends InputMediaDeviceManager {
         }
     }
     getDevices() {
-        return getVideoDevices();
+        return getVideoDevices(this.call.tracer);
     }
     getStream(constraints) {
         constraints.width = this.targetResolution.width;
@@ -11000,6 +11012,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 +11057,7 @@ class MicrophoneManager extends InputMediaDeviceManager {
         }
     }
     getDevices() {
-        return getAudioDevices();
+        return getAudioDevices(this.call.tracer);
     }
     getStream(constraints) {
         return getAudioStream(constraints, this.call.tracer);
@@ -11309,7 +11322,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.
@@ -12647,9 +12660,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 +13577,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();
         };
@@ -14489,7 +14504,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.1", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),