Destroy the VoiceFocus transformer on unmount of VoiceFocusProvider

Author: michhyun1

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 
 ### Changed
+- Updated `VoiceFocusProvider` to destroy the Voice Focus worker thread on unmount.
 
 ### Fixed
 

package-lock.json

@@ -84,7 +84,7 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "add": "^2.0.6",
-    "amazon-chime-sdk-js": "^3.8.0",
+    "amazon-chime-sdk-js": "^3.10.0",
     "babel-loader": "^8.1.0",
     "css-loader": "^6.7.1",
     "eslint": "^7.32.0",
@@ -123,7 +123,7 @@
     "webpack-cli": "^4.9.2"
   },
   "peerDependencies": {
-    "amazon-chime-sdk-js": "^3.8.0",
+    "amazon-chime-sdk-js": "^3.10.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "styled-components": "^5.0.0",
@@ -132,4 +132,4 @@
   "prettier": {
     "singleQuote": true
   }
-}
+}

package.json

@@ -87,6 +87,11 @@ const AudioInputVFControl: React.FC<Props> = ({
     } else {
       setIsVoiceFocusEnabled(false);
     }
+    return () => {
+      if (selectedDevice instanceof VoiceFocusTransformDevice) {
+        selectedDevice.stop();
+      }
+    };
   }, [selectedDevice]);
 
   useEffect(() => {

src/components/sdk/MeetingControls/AudioInputVFControl.tsx

@@ -88,10 +88,9 @@ const BackgroundBlurProvider: FC<Props> = ({ spec, options, children }) => {
   );
 
   useEffect(() => {
-    initializeBackgroundBlur();
     return () => {
       logger.info(
-        'Specs or options were changed. Destroying and re-initializing background blur processor.'
+        'Specs or options were changed. Destroying background blur processor.'
       );
       backgroundBlurProcessor?.destroy();
     };
@@ -148,6 +147,9 @@ const BackgroundBlurProvider: FC<Props> = ({ spec, options, children }) => {
         selectedDevice
       )}`
     );
+    // TODO: We don't need to intialize a new processor every time we create a background blur device
+    // We could potentially check for if a processor exists already AND that the processor isn't destroyed.
+    // If both of those statements are true, then chooseNewInnerDevice instead of creating a new processor
     const currentProcessor = await initializeBackgroundBlur();
     try {
       const logger =

src/providers/BackgroundBlurProvider/index.tsx

@@ -95,10 +95,9 @@ const BackgroundReplacementProvider: FC<Props> = ({
   );
 
   useEffect(() => {
-    initializeBackgroundReplacement();
     return () => {
       logger.info(
-        'Specs or options were changed. Destroying and re-initializing background replacement processor.'
+        'Specs or options were changed. Destroying background replacement processor.'
       );
       backgroundReplacementProcessor?.destroy();
     };
@@ -156,6 +155,9 @@ const BackgroundReplacementProvider: FC<Props> = ({
         selectedDevice
       )}`
     );
+    // TODO: We don't need to intialize a new processor every time we create a background replacement device
+    // We could potentially check for if a processor exists already AND that the processor isn't destroyed.
+    // If both of those statements are true, then chooseNewInnerDevice instead of creating a new processor
     const currentProcessor = await initializeBackgroundReplacement();
     try {
       const logger =

src/providers/BackgroundReplacementProvider/index.tsx

@@ -8,6 +8,10 @@ import { VoiceFocusProvider } from '../';
 The `VoiceFocusProvider` provides a function transforming a normal audio device to an Amazon Voice Focus device, and whether Amazon Voice Focus is supported.
 Amazon Voice Focus related logs can be found in the browser developer tools when Amazon Voice Focus is enabled.
 
+The Voice Focus Provider manages the state of a `VoiceFocusDeviceTransformer` behind the scenes. When you call `addVoiceFocus` the provider will use the current `VoiceFocusDeviceTransformer`
+to create a new `VoiceFocusTransformerDevice` and provide it to the consumer. The `VoiceFocusDeviceTransformer` that is used to create a `VoiceFocusTransformDevice` will be destroyed when
+the provider is unmounted.
+
 This provider is independent from `MeetingProvider`. You can put `VoiceFocusProvider` wherever you want in the component tree to control the workflow of Voice Focus, so long
 as any component which relies on `VoiceFocusProvider` is nested within `VoiceFocusProvider`.
 

src/providers/VoiceFocusProvider/docs/VoiceFocusProvider.stories.mdx

@@ -90,15 +90,9 @@ const VoiceFocusProvider: React.FC<Props> = ({
     logger.info(
       `Add Amazon Voice Focus to the following audio input device ${device}`
     );
-
-    if (voiceFocusDevice) {
-      const vf = await voiceFocusDevice.chooseNewInnerDevice(device);
-      logger.info(
-        'Re-used the same internal state to create an Amazon Voice Focus transform device.'
-      );
-      setVoiceFocusDevice(vf);
-      return vf;
-    }
+    // TODO: We don't need to intialize a new transformer every time we create a voice focus transformer device
+    // We could potentially check for if a transformer exists already AND that the voiceFocusDevice exists and hasnt been stopped.
+    // If both of those statements are true, then chooseNewInnerDevice instead of creating a new processor
 
     if (!isVoiceFocusSupported) {
       logger.debug('Not supported, not creating device.');
@@ -188,6 +182,10 @@ const VoiceFocusProvider: React.FC<Props> = ({
     createMeetingResponse: JoinMeetingInfo | undefined
   ) {
     // Throw away the old one and reinitialize.
+    voiceFocusDevice?.stop();
+    if (voiceFocusTransformer) {
+      VoiceFocusDeviceTransformer.destroyVoiceFocus(voiceFocusTransformer);
+    }
     setVoiceFocusTransformer(null);
     setVoiceFocusDevice(null);
     createVoiceFocusDeviceTransformer(
@@ -226,8 +224,32 @@ const VoiceFocusProvider: React.FC<Props> = ({
         `Current Amazon Voice Focus transform device: ${voiceFocusDevice}`
       );
     }
+    return () => {
+      if (voiceFocusDevice) {
+        logger.info(
+          'Destroying voice focus device : ' + JSON.stringify(voiceFocusDevice)
+        );
+        voiceFocusDevice?.stop();
+      } else {
+        logger.info("Voice focus device doesn't exist");
+      }
+    };
   }, [voiceFocusDevice]);
 
+  useEffect(() => {
+    return () => {
+      if (voiceFocusTransformer) {
+        VoiceFocusDeviceTransformer.destroyVoiceFocus(voiceFocusTransformer);
+        logger.info(
+          'Destroying voice focus transformer : ' +
+            JSON.stringify(voiceFocusTransformer)
+        );
+      } else {
+        logger.info("VoiceFocusTransformer doesn't exist");
+      }
+    };
+  }, [voiceFocusTransformer]);
+
   const value: VoiceFocusState = {
     isVoiceFocusSupported,
     addVoiceFocus,

src/providers/VoiceFocusProvider/index.tsx

@@ -59,27 +59,9 @@ describe.only('BackgroundBlurProvider', () => {
     // happens when the component remounts. If it is happening more than
     // once, that means some dependency or parent is changing the parameters
     // erroneously.
-    expect(loggerInfoMock).toHaveBeenCalledTimes(4);
+    expect(loggerInfoMock).toHaveBeenCalledTimes(1);
     expect(loggerInfoMock).toHaveBeenCalledWith(
-      `Initializing background blur processor with, spec: ${JSON.stringify(
-        undefined
-      )}, options: ${JSON.stringify(blurOptions)}`
-    );
-    expect(loggerInfoMock).toHaveBeenCalledWith(
-      'Specs or options were changed. Destroying and re-initializing background blur processor.'
-    );
-
-    // Even though we are using a NoOpVideoFrameProcessor, the input specs
-    // and options that are passed to the amazon-chime-sdk-js are still
-    // run through `resolveOptions` and `resolveSpec` in the
-    // `BackgroundBlurVideoFrameProcessor` constructor so any invalid API
-    // boundary changes to those are still validated by this test. The
-    // first warning call is output by `BackgroundBlurVideoFrameProcessor`
-    // and we don't validate it strictly because there's a non-deterministic
-    // timestamp. Verifying the call count should be good enough.
-    expect(loggerWarnMock).toHaveBeenCalledTimes(2);
-    expect(loggerWarnMock).toHaveBeenLastCalledWith(
-      expect.stringContaining('Initialized NoOpVideoFrameProcessor')
+      'Specs or options were changed. Destroying background blur processor.'
     );
 
     // No errors should happen.