Add observer prop to the BG Blur and Replacement Provider

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.
+- Add the observer as a prop of Background Blur and Background Replacement Providers, so that builders can provide observers to the provider.
 
 ### Removed
 

src/providers/BackgroundBlurProvider/index.tsx

@@ -5,13 +5,13 @@ import {
   BackgroundBlurOptions,
   BackgroundBlurProcessor,
   BackgroundBlurVideoFrameProcessor,
+  BackgroundBlurVideoFrameProcessorObserver,
   BackgroundFilterSpec,
   ConsoleLogger,
   DefaultVideoTransformDevice,
   Device,
   LogLevel,
   NoOpVideoFrameProcessor,
-  VideoFrameProcessor,
 } from 'amazon-chime-sdk-js';
 import React, {
   createContext,
@@ -33,6 +33,10 @@ interface Props extends BaseSdkProps {
   /** A set of options that can be supplied when creating a background blur video frame processor. For more information, refer to
    * [Amazon Chime SDK for JavaScript Background Filter Guide](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/15_Background_Filter_Video_Processor.md#adding-a-background-filter-to-your-application). */
   options?: BackgroundBlurOptions;
+  /**
+   * Observer callback functions. The observer will be added to the background blur processor on mount and removed on unmount.
+   */
+  observer?: BackgroundBlurVideoFrameProcessorObserver;
 }
 
 interface BackgroundBlurProviderState {
@@ -46,12 +50,12 @@ const BackgroundBlurProviderContext = createContext<
   BackgroundBlurProviderState | undefined
 >(undefined);
 
-const BackgroundBlurProvider: FC<Props> = ({ spec, options, children }) => {
+const BackgroundBlurProvider: FC<Props> = ({ spec, options, observer, children }) => {
   const logger = useLogger();
   const [isBackgroundBlurSupported, setIsBackgroundBlurSupported] = useState<
     boolean | undefined
   >(undefined);
-  const [processor, setProcessor] = useState<VideoFrameProcessor | undefined>();
+  const [processor, setProcessor] = useState<BackgroundBlurProcessor | undefined>();
 
   const blurSpec = useMemoCompare(
     spec,
@@ -97,6 +101,18 @@ const BackgroundBlurProvider: FC<Props> = ({ spec, options, children }) => {
     };
   }, [blurOptions, blurSpec]);
 
+  useEffect(() => {
+    if (!!processor && !!observer) {
+      processor.addObserver(observer);
+    }
+    
+    return () => {
+      if (!!processor && !!observer) {
+        processor.removeObserver(observer);
+      }
+    };
+  }, [observer, processor]);
+
   async function initializeBackgroundBlur(): Promise<
     BackgroundBlurProcessor | undefined
   > {

src/providers/BackgroundReplacementProvider/index.tsx

@@ -6,12 +6,12 @@ import {
   BackgroundReplacementOptions,
   BackgroundReplacementProcessor,
   BackgroundReplacementVideoFrameProcessor,
+  BackgroundReplacementVideoFrameProcessorObserver,
   ConsoleLogger,
   DefaultVideoTransformDevice,
   Device,
   LogLevel,
   NoOpVideoFrameProcessor,
-  VideoFrameProcessor,
 } from 'amazon-chime-sdk-js';
 import React, {
   createContext,
@@ -33,6 +33,10 @@ interface Props extends BaseSdkProps {
   /* A set of options that can be supplied when creating a background replacement video frame processor such as the background replacement image blob. For more information, refer to
    * [Amazon Chime SDK for JavaScript Background Filter Guide](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/15_Background_Filter_Video_Processor.md#adding-a-background-filter-to-your-application). */
   options?: BackgroundReplacementOptions;
+    /**
+   * Observer callback functions. The observer will be added to the background replacement processor on mount and removed on unmount.
+   */
+  observer?: BackgroundReplacementVideoFrameProcessorObserver;
 }
 
 interface BackgroundReplacementProviderState {
@@ -49,14 +53,15 @@ const BackgroundReplacementProviderContext = createContext<
 const BackgroundReplacementProvider: FC<Props> = ({
   spec,
   options,
+  observer,
   children,
 }) => {
   const logger = useLogger();
   const [
     isBackgroundReplacementSupported,
     setIsBackgroundReplacementSupported,
   ] = useState<boolean | undefined>(undefined);
-  const [processor, setProcessor] = useState<VideoFrameProcessor | undefined>(
+  const [processor, setProcessor] = useState<BackgroundReplacementProcessor | undefined>(
     undefined
   );
 
@@ -104,6 +109,18 @@ const BackgroundReplacementProvider: FC<Props> = ({
     };
   }, [replacementSpec, replacementOptions]);
 
+  useEffect(() => {
+    if (!!processor && !!observer) {
+      processor.addObserver(observer);
+    }
+    
+    return () => {
+      if (!!processor && !!observer) {
+        processor.removeObserver(observer);
+      }
+    };
+  }, [observer, processor]);
+
   async function initializeBackgroundReplacement(): Promise<
     BackgroundReplacementProcessor | undefined
   > {