fix(noise cancellation): delay toggling until initialization is finished

packages/audio-filters-web/src/NoiseCancellation.ts

@@ -51,8 +51,8 @@ export interface INoiseCancellation {
   init: (options?: { tracer?: Tracer }) => Promise<void>;
   isEnabled: () => Promise<boolean>;
   canAutoEnable?: () => Promise<boolean>;
-  enable: () => void;
-  disable: () => void;
+  enable: () => Promise<void>;
+  disable: () => Promise<void>;
   dispose: () => Promise<void>;
   resume: () => void;
   setSuppressionLevel: (level: number) => void;
@@ -88,6 +88,9 @@ export class NoiseCancellation implements INoiseCancellation {
   private restoreTimeoutId?: number;
   private tracer?: Tracer;
 
+  private readonly initializing: Promise<void>;
+  private readonly resolveInitialized!: () => void;
+
   private readonly basePath: string;
   private readonly restoreTimeoutMs: number;
   private readonly restoreAttempts: number;
@@ -104,6 +107,10 @@ export class NoiseCancellation implements INoiseCancellation {
     restoreAttempts = 3,
     krispSDKParams,
   }: NoiseCancellationOptions = {}) {
+    const { promise, resolve } = promiseWithResolvers<void>();
+    this.initializing = promise;
+    this.resolveInitialized = resolve;
+
     this.basePath = basePath;
     this.restoreTimeoutMs = restoreTimeoutMs;
     this.restoreAttempts = restoreAttempts;
@@ -177,18 +184,18 @@ export class NoiseCancellation implements INoiseCancellation {
       document.addEventListener('click', resume);
     }
 
-    const { promise: ready, resolve: filterReady } = promiseWithResolvers();
     const filterNode = await sdk.createNoiseFilter(
       this.audioContext,
       () => {
         this.tracer?.trace('noiseCancellation.started', 'true');
-        filterReady();
+        this.resolveInitialized();
       },
       () => document.removeEventListener('click', resume),
     );
     filterNode.addEventListener('buffer_overflow', this.handleBufferOverflow);
     this.filterNode = filterNode;
-    return ready;
+
+    return this.initializing;
   };
 
   /**
@@ -202,17 +209,19 @@ export class NoiseCancellation implements INoiseCancellation {
   /**
    * Enables the noise cancellation.
    */
-  enable = () => {
+  enable = async () => {
     if (!this.filterNode) return;
+    await this.initializing;
     this.filterNode.enable();
     this.dispatch('change', true);
   };
 
   /**
    * Disables the noise cancellation.
    */
-  disable = () => {
+  disable = async () => {
     if (!this.filterNode) return;
+    await this.initializing;
     this.filterNode.disable();
     this.dispatch('change', false);
   };
@@ -352,11 +361,15 @@ export class NoiseCancellation implements INoiseCancellation {
     this.tracer?.trace('noiseCancellation.bufferOverflowCount', String(count));
 
     window.clearTimeout(this.restoreTimeoutId);
-    this.disable();
+    this.disable().catch((err) =>
+      console.error('Failed to disable noise cancellation ', err),
+    );
 
     if (count < this.restoreAttempts) {
       this.restoreTimeoutId = window.setTimeout(() => {
-        this.enable();
+        this.enable().catch((err) =>
+          console.error('Failed to enable noise cancellation ', err),
+        );
       }, this.restoreTimeoutMs);
     }
   };

packages/client/src/devices/MicrophoneManager.ts

@@ -92,7 +92,9 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
             })
             .then((canAutoEnable) => {
               if (canAutoEnable) {
-                this.noiseCancellation?.enable();
+                this.noiseCancellation?.enable().catch((err) => {
+                  this.logger.warn('Failed to enable noise cancellation', err);
+                });
               }
             })
             .catch((err) => {
@@ -175,7 +177,9 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
           canAutoEnable = await noiseCancellation.canAutoEnable();
         }
         if (canAutoEnable) {
-          noiseCancellation.enable();
+          noiseCancellation.enable().catch((err) => {
+            this.logger.warn('Failed to enable noise cancellation', err);
+          });
         }
       }
     } catch (e) {
@@ -268,9 +272,16 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
       const disableAudioProcessing =
         profile === AudioBitrateProfile.MUSIC_HIGH_QUALITY;
       if (disableAudioProcessing) {
-        this.noiseCancellation.disable(); // disable for high quality music mode
+        this.noiseCancellation.disable().catch((err) => {
+          this.logger.warn(
+            'Failed to disable noise cancellation for music mode',
+            err,
+          );
+        }); // disable for high quality music mode
       } else {
-        this.noiseCancellation.enable(); // restore it for other modes if available
+        this.noiseCancellation.enable().catch((err) => {
+          this.logger.warn('Failed to enable noise cancellation', err);
+        }); // restore it for other modes if available
       }
     }
   }

packages/client/src/devices/__tests__/NoiseCancellationStub.ts

@@ -7,8 +7,12 @@ export class NoiseCancellationStub implements INoiseCancellation {
   isSupported = () => true;
   init = () => Promise.resolve(undefined);
   isEnabled = async () => true;
-  enable = () => this.listeners['change']?.forEach((l) => l(true));
-  disable = () => this.listeners['change']?.forEach((l) => l(false));
+  enable = async () => {
+    this.listeners['change']?.forEach((l) => l(true));
+  };
+  disable = async () => {
+    this.listeners['change']?.forEach((l) => l(false));
+  };
   setSuppressionLevel = () => {};
   dispose = () => Promise.resolve(undefined);
   toFilter = () => (ms: MediaStream) => ({ output: ms });

packages/noise-cancellation-react-native/src/index.ts

@@ -41,16 +41,16 @@ export class NoiseCancellation implements INoiseCancellation {
   /**
    * Enables the noise cancellation.
    */
-  enable = () => {
-    NoiseCancellationReactNative.setEnabled(true);
+  enable = async () => {
+    await NoiseCancellationReactNative.setEnabled(true);
     this.dispatch('change', true);
   };
 
   /**
    * Disables the noise cancellation.
    */
-  disable = () => {
-    NoiseCancellationReactNative.setEnabled(false);
+  disable = async () => {
+    await NoiseCancellationReactNative.setEnabled(false);
     this.dispatch('change', false);
   };
 

packages/noise-cancellation-react-native/src/types.ts

@@ -3,8 +3,8 @@ export interface INoiseCancellation {
   init: () => Promise<void>;
   canAutoEnable?: () => Promise<boolean>;
   isEnabled: () => Promise<boolean>;
-  enable: () => void;
-  disable: () => void;
+  enable: () => Promise<void>;
+  disable: () => Promise<void>;
   dispose: () => Promise<void>;
   resume: () => void;
   setSuppressionLevel: (level: number) => void;

packages/react-native-sdk/src/providers/NoiseCancellation/NoiseCancellationProvider.tsx

@@ -130,9 +130,13 @@ export const NoiseCancellationProvider = (props: PropsWithChildren<{}>) => {
               ? enabledOrSetter(isEnabled)
               : enabledOrSetter;
           if (enable) {
-            ncInstance.enable();
+            ncInstance.enable().catch((err) => {
+              console.error('Failed to enable noise cancellation', err);
+            });
           } else {
-            ncInstance.disable();
+            ncInstance.disable().catch((err) => {
+              console.error('Failed to disable noise cancellation', err);
+            });
           }
         },
       }}

packages/react-sdk/src/components/NoiseCancellation/NoiseCancellationProvider.tsx

@@ -138,9 +138,13 @@ export const NoiseCancellationProvider = (
             ? enabledOrSetter(isEnabled)
             : enabledOrSetter;
         if (enable) {
-          noiseCancellation.enable();
+          noiseCancellation.enable().catch((err) => {
+            console.error('Failed to enable noise cancellation', err);
+          });
         } else {
-          noiseCancellation.disable();
+          noiseCancellation.disable().catch((err) => {
+            console.error('Failed to disable noise cancellation', err);
+          });
         }
       },
     }),