@stream-io/video-client 1.22.2 → 1.23.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.23.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.22.2...@stream-io/video-client-1.23.0) (2025-05-20)
+
+### Features
+
+- **react-native:** Noise Cancellation ([#1793](https://github.com/GetStream/stream-video-js/issues/1793)) ([d7843e1](https://github.com/GetStream/stream-video-js/commit/d7843e1a23e6f6a35d1c159438d09bdfd17450a5))
+- **web:** improved noise cancellation ([#1794](https://github.com/GetStream/stream-video-js/issues/1794)) ([d59f19b](https://github.com/GetStream/stream-video-js/commit/d59f19b1ba1ff83fe5f024d783b868f4e98d3380))
+
+### Bug Fixes
+
+- do not mutate filters array during pipeline setup ([#1798](https://github.com/GetStream/stream-video-js/issues/1798)) ([e9832e5](https://github.com/GetStream/stream-video-js/commit/e9832e5ef41b3f6cddfe2d0cb2cf840e9b28bb86))
+
 ## [1.22.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.22.1...@stream-io/video-client-1.22.2) (2025-05-15)
 
 - adjust ErrorFromResponse class ([#1791](https://github.com/GetStream/stream-video-js/issues/1791)) ([c0abcba](https://github.com/GetStream/stream-video-js/commit/c0abcbacfddeb87d8378c4418f80e6770981cdc8)), closes [GetStream/chat#1540](https://github.com/GetStream/chat/issues/1540)

package/dist/index.browser.es.js

@@ -5680,7 +5680,7 @@ const aggregate = (stats) => {
     return report;
 };
 
-const version = "1.22.2";
+const version = "1.23.0";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -9461,13 +9461,16 @@ class InputMediaDeviceManager {
             start: filter,
             stop: undefined,
         };
+        this.call.tracer.trace(`registerFilter.${TrackType[this.trackType]}`, null);
         const registered = withoutConcurrency(this.filterRegistrationConcurrencyTag, async () => {
+            await settled(this.statusChangeConcurrencyTag);
             this.filters.push(entry);
             await this.applySettingsToStream();
         });
         return {
             registered,
             unregister: () => withoutConcurrency(this.filterRegistrationConcurrencyTag, async () => {
+                await settled(this.statusChangeConcurrencyTag);
                 entry.stop?.();
                 this.filters = this.filters.filter((f) => f !== entry);
                 await this.applySettingsToStream();
@@ -10338,7 +10341,17 @@ class MicrophoneManager extends InputMediaDeviceManager {
                 NoiseCancellationSettingsModeEnum.AUTO_ON;
             if (autoOn && callingState === CallingState.JOINED) {
                 this.noiseCancellationRegistration
-                    .then(() => this.noiseCancellation?.enable())
+                    .then(() => {
+                    if (this.noiseCancellation?.canAutoEnable) {
+                        return this.noiseCancellation.canAutoEnable();
+                    }
+                    return true;
+                })
+                    .then((canAutoEnable) => {
+                    if (canAutoEnable) {
+                        this.noiseCancellation?.enable();
+                    }
+                })
                     .catch((err) => {
                     this.logger('warn', `Failed to enable noise cancellation`, err);
                     return this.call.notifyNoiseCancellationStopped();
@@ -10356,13 +10369,9 @@ class MicrophoneManager extends InputMediaDeviceManager {
     /**
      * Enables noise cancellation for the microphone.
      *
-     * Note: not supported in React Native.
      * @param noiseCancellation - a noise cancellation instance to use.
      */
     async enableNoiseCancellation(noiseCancellation) {
-        if (isReactNative()) {
-            throw new Error('Noise cancellation is not supported in React Native');
-        }
         const { ownCapabilities, settings } = this.call.state;
         const hasNoiseCancellationCapability = ownCapabilities.includes(OwnCapability.ENABLE_NOISE_CANCELLATION);
         if (!hasNoiseCancellationCapability) {
@@ -10378,6 +10387,7 @@ class MicrophoneManager extends InputMediaDeviceManager {
             this.noiseCancellation = noiseCancellation;
             // listen for change events and notify the SFU
             this.noiseCancellationChangeUnsubscribe = this.noiseCancellation.on('change', (enabled) => {
+                this.call.tracer.trace('noiseCancellation.enabled', enabled);
                 if (enabled) {
                     this.call.notifyNoiseCancellationStarting().catch((err) => {
                         this.logger('warn', `notifyNoiseCancellationStart failed`, err);
@@ -10389,16 +10399,37 @@ class MicrophoneManager extends InputMediaDeviceManager {
                     });
                 }
             });
-            const registrationResult = this.registerFilter(noiseCancellation.toFilter());
-            this.noiseCancellationRegistration = registrationResult.registered;
-            this.unregisterNoiseCancellation = registrationResult.unregister;
-            await this.noiseCancellationRegistration;
+            if (isReactNative()) {
+                // no filter registration in React Native, its done in the native code on app init
+                this.noiseCancellationRegistration = Promise.resolve();
+            }
+            else {
+                // Krisp recommends disabling the browser's built-in noise cancellation
+                // and echo cancellation when using Krisp, so we do that here.
+                // https://sdk-docs.krisp.ai/docs/getting-started-js
+                this.setDefaultConstraints({
+                    ...this.state.defaultConstraints,
+                    echoCancellation: false,
+                    noiseSuppression: false,
+                    autoGainControl: false,
+                });
+                const registrationResult = this.registerFilter(noiseCancellation.toFilter());
+                this.noiseCancellationRegistration = registrationResult.registered;
+                this.unregisterNoiseCancellation = registrationResult.unregister;
+                await this.noiseCancellationRegistration;
+            }
             // handles an edge case where a noise cancellation is enabled after
             // the participant as joined the call -> we immediately enable NC
             if (noiseCancellationSettings.mode ===
                 NoiseCancellationSettingsModeEnum.AUTO_ON &&
                 this.call.state.callingState === CallingState.JOINED) {
-                noiseCancellation.enable();
+                let canAutoEnable = true;
+                if (noiseCancellation.canAutoEnable) {
+                    canAutoEnable = await noiseCancellation.canAutoEnable();
+                }
+                if (canAutoEnable) {
+                    noiseCancellation.enable();
+                }
             }
         }
         catch (e) {
@@ -10410,13 +10441,8 @@ class MicrophoneManager extends InputMediaDeviceManager {
     }
     /**
      * Disables noise cancellation for the microphone.
-     *
-     * Note: not supported in React Native.
      */
     async disableNoiseCancellation() {
-        if (isReactNative()) {
-            throw new Error('Noise cancellation is not supported in React Native');
-        }
         await (this.unregisterNoiseCancellation?.() ?? Promise.resolve())
             .then(() => this.noiseCancellation?.disable())
             .then(() => this.noiseCancellationChangeUnsubscribe?.())
@@ -13770,7 +13796,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.22.2", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.23.0", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),