Expose processors on the BG Blur and BG Replacement providers

Author: michhyun1

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Refactor `toggleContentShare` function to allow specifying a `MediaStream` to share. This can be used to share non-screen share content.
+- Expose the background blur processor and background replacement processor from their respective providers - `BackgroundBlurProvider` and `BackgroundReplacementProvider`.
 
 ### Removed
 

src/providers/BackgroundBlurProvider/docs/BackgroundBlurProvider.stories.mdx

@@ -35,6 +35,8 @@ before calling `createBackgroundBlurDevice`. Calling `createBackgroundBlurDevice
 `DefaultVideoTransformDevice` with `createBackgroundBlurDevice` in order to destroy the processors running previously. Once you call `DefaultVideoTransformDevice.stop`, you should discard the old `DefaultVideoTransformDevice`.
 For more information, refer to [Video Processing APIs](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/10_Video_Processor.md#stopping-videotransformdevice).
 
+You can access the current `backgroundBlurProcessor` applied to the video device that is generated when you call `createBackgroundBlurDevice`. You can apply observer notifications to the processor. Refer to [the guide for adding observer notifications to a BackgroundBlurProcessor](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/15_Background_Filter_Video_Processor.md#observer-notifications)
+
 One thing to note is that calling `meetingManager.startVideoInputDevice()` with a `Device` type while the current selected video input device is a `VideoTransformDevice`
 will automatically stop any video processor that was previously running. Lastly, make sure to construct a new `DefaultVideoTransformDevice` using `createBackgroundBlurDevice`.
 if the Props of the provider were changed.

src/providers/BackgroundBlurProvider/docs/useBackgroundBlur.stories.mdx

@@ -18,6 +18,8 @@ before calling `createBackgroundBlurDevice`. Calling `createBackgroundBlurDevice
 `DefaultVideoTransformDevice` with new video processors. For more information, refer to [Video Processing APIs](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/10_Video_Processor.md#stopping-videotransformdevice).
 Lastly, make sure to construct a new `DefaultVideoTransformDevice` using `createBackgroundBlurDevice` and use it as input if the `Props` of the provider were changed.
 
+You can access the current `backgroundBlurProcessor` applied to the video device that is generated when you call `createBackgroundBlurDevice`. You can apply observer notifications to the processor. Refer to [the guide for adding observer notifications to a BackgroundBlurProcessor](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/15_Background_Filter_Video_Processor.md#observer-notifications)
+
 Background blur related logs can be found in the browser developer tools when the `BackgroundBlurProvider` is used within the app component tree.
 
 ## Return Value

src/providers/BackgroundBlurProvider/index.tsx

@@ -11,7 +11,6 @@ import {
   Device,
   LogLevel,
   NoOpVideoFrameProcessor,
-  VideoFrameProcessor,
 } from 'amazon-chime-sdk-js';
 import React, {
   createContext,
@@ -40,6 +39,7 @@ interface BackgroundBlurProviderState {
     device: Device
   ) => Promise<DefaultVideoTransformDevice>;
   isBackgroundBlurSupported: boolean | undefined;
+  backgroundBlurProcessor: BackgroundBlurProcessor | undefined
 }
 
 const BackgroundBlurProviderContext = createContext<
@@ -51,7 +51,7 @@ const BackgroundBlurProvider: FC<Props> = ({ spec, options, children }) => {
   const [isBackgroundBlurSupported, setIsBackgroundBlurSupported] = useState<
     boolean | undefined
   >(undefined);
-  const [processor, setProcessor] = useState<VideoFrameProcessor | undefined>();
+  const [backgroundBlurProcessor, setBackgroundBlurProcessor] = useState<BackgroundBlurProcessor | undefined>();
 
   const blurSpec = useMemoCompare(
     spec,
@@ -93,7 +93,7 @@ const BackgroundBlurProvider: FC<Props> = ({ spec, options, children }) => {
       logger.info(
         'Specs or options were changed. Destroying and re-initializing background blur processor.'
       );
-      processor?.destroy();
+      backgroundBlurProcessor?.destroy();
     };
   }, [blurOptions, blurSpec]);
 
@@ -117,7 +117,7 @@ const BackgroundBlurProvider: FC<Props> = ({ spec, options, children }) => {
       // the assets are not fetched successfully.
       if (createdProcessor instanceof NoOpVideoFrameProcessor) {
         logger.warn('Initialized NoOpVideoFrameProcessor');
-        setProcessor(undefined);
+        setBackgroundBlurProcessor(undefined);
         setIsBackgroundBlurSupported(false);
         return undefined;
       } else {
@@ -126,15 +126,15 @@ const BackgroundBlurProvider: FC<Props> = ({ spec, options, children }) => {
             createdProcessor
           )}`
         );
-        setProcessor(createdProcessor);
+        setBackgroundBlurProcessor(createdProcessor);
         setIsBackgroundBlurSupported(true);
         return createdProcessor;
       }
     } catch (error) {
       logger.error(
         `Error creating a background blur video frame processor device ${error}`
       );
-      setProcessor(undefined);
+      setBackgroundBlurProcessor(undefined);
       setIsBackgroundBlurSupported(false);
       return undefined;
     }
@@ -175,6 +175,7 @@ const BackgroundBlurProvider: FC<Props> = ({ spec, options, children }) => {
   const value: BackgroundBlurProviderState = {
     createBackgroundBlurDevice,
     isBackgroundBlurSupported,
+    backgroundBlurProcessor,
   };
 
   return (

src/providers/BackgroundReplacementProvider/docs/BackgroundReplacementProvider.stories.mdx

@@ -35,6 +35,8 @@ before calling `createBackgroundReplacementDevice`. Calling `createBackgroundRep
 `DefaultVideoTransformDevice` with `createBackgroundReplacementDevice` in order to destroy the processors running previously. Once you call `DefaultVideoTransformDevice.stop`, you should discard the old `DefaultVideoTransformDevice`.
 For more information, refer to [Video Processing APIs](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/10_Video_Processor.md#stopping-videotransformdevice).
 
+You can access the current `backgroundReplacementProcessor` applied to the video device that is generated when you call `createBackgroundBlurDevice`. You can apply observer notifications to the processor. Refer to [the guide for adding observer notifications to a BackgroundReplacementProcessor](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/15_Background_Filter_Video_Processor.md#observer-notifications)
+
 One thing to note is that calling `meetingManager.startVideoInputDevice()` with a `Device` type while the current selected video input device is a `VideoTransformDevice`
 will automatically stop any processors running within a `DefaultVideoTransformDevice` that was previously running. Lastly, make sure to construct a new `DefaultVideoTransformDevice` using `createBackgroundReplacementDevice`.
 if the Props of the provider were changed.

src/providers/BackgroundReplacementProvider/docs/useBackgroundReplacement.stories.mdx

@@ -18,6 +18,8 @@ before calling `createBackgroundReplacementDevice`. Calling `createBackgroundRep
 `DefaultVideoTransformDevice` with new video processors. For more information, refer to [Video Processing APIs](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/10_Video_Processor.md#stopping-videotransformdevice);
 Lastly, make sure to construct a new `DefaultVideoTransformDevice` using `createBackgroundReplacementDevice` and use it as input if the `Props` of the provider were changed.
 
+You can access the current `backgroundReplacementProcessor` applied to the video device that is generated when you call `createBackgroundBlurDevice`. You can apply observer notifications to the processor. Refer to [the guide for adding observer notifications to a BackgroundReplacementProcessor](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/15_Background_Filter_Video_Processor.md#observer-notifications)
+
 Background replacement related logs can be found in the browser developer tools when the `BackgroundReplacementProvider` is used within the app component tree.
 
 ## Return Value

src/providers/BackgroundReplacementProvider/index.tsx

@@ -11,7 +11,6 @@ import {
   Device,
   LogLevel,
   NoOpVideoFrameProcessor,
-  VideoFrameProcessor,
 } from 'amazon-chime-sdk-js';
 import React, {
   createContext,
@@ -40,6 +39,7 @@ interface BackgroundReplacementProviderState {
     device: Device
   ) => Promise<DefaultVideoTransformDevice>;
   isBackgroundReplacementSupported: boolean | undefined;
+  backgroundReplacementProcessor: BackgroundReplacementProcessor | undefined;
 }
 
 const BackgroundReplacementProviderContext = createContext<
@@ -56,7 +56,7 @@ const BackgroundReplacementProvider: FC<Props> = ({
     isBackgroundReplacementSupported,
     setIsBackgroundReplacementSupported,
   ] = useState<boolean | undefined>(undefined);
-  const [processor, setProcessor] = useState<VideoFrameProcessor | undefined>(
+  const [backgroundReplacementProcessor, setBackgroundReplacementProcessor] = useState<BackgroundReplacementProcessor | undefined>(
     undefined
   );
 
@@ -100,7 +100,7 @@ const BackgroundReplacementProvider: FC<Props> = ({
       logger.info(
         'Specs or options were changed. Destroying and re-initializing background replacement processor.'
       );
-      processor?.destroy();
+      backgroundReplacementProcessor?.destroy();
     };
   }, [replacementSpec, replacementOptions]);
 
@@ -125,7 +125,7 @@ const BackgroundReplacementProvider: FC<Props> = ({
       // the assets are not fetched successfully.
       if (createdProcessor instanceof NoOpVideoFrameProcessor) {
         logger.warn('Initialized NoOpVideoFrameProcessor');
-        setProcessor(undefined);
+        setBackgroundReplacementProcessor(undefined);
         setIsBackgroundReplacementSupported(false);
         return undefined;
       } else {
@@ -134,15 +134,15 @@ const BackgroundReplacementProvider: FC<Props> = ({
             createdProcessor
           )}`
         );
-        setProcessor(createdProcessor);
+        setBackgroundReplacementProcessor(createdProcessor);
         setIsBackgroundReplacementSupported(true);
         return createdProcessor;
       }
     } catch (error) {
       logger.error(
         `Error creating a background replacement video frame processor device. ${error}`
       );
-      setProcessor(undefined);
+      setBackgroundReplacementProcessor(undefined);
       setIsBackgroundReplacementSupported(false);
       return undefined;
     }
@@ -183,6 +183,7 @@ const BackgroundReplacementProvider: FC<Props> = ({
   const value: BackgroundReplacementProviderState = {
     createBackgroundReplacementDevice,
     isBackgroundReplacementSupported,
+    backgroundReplacementProcessor
   };
 
   return (