Update storybook to add changeBackgroundReplacementImage

CHANGELOG.md

@@ -11,7 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Add `changeBackgroundReplacementImage` function in the `BackgroundReplacementProvider` to enable the functionality of changing the background replacement image. `changeBackgroundReplacementImage` will take a `Blob` as parameter and return a `Promise`.
+- Add `changeBackgroundReplacementImage` function in the `BackgroundReplacementProvider` to enable the functionality of changing the background replacement image. `changeBackgroundReplacementImage` will take a `Blob` as its parameter and return a `Promise`.
 
 ### Removed
 

src/providers/BackgroundReplacementProvider/docs/BackgroundReplacementProvider.mdx

@@ -21,6 +21,12 @@ when mounted, which may impact performance.
 
   // A function to transform a video input device to a `DefaultVideoTransformDevice`.
   createBackgroundReplacementDevice: (device: Device) => Promise<DefaultVideoTransformDevice>;
+
+  // The current `backgroundBlurProcessor` applied to the video device that is generated when you call `createBackgroundBlurDevice`.
+  backgroundReplacementProcessor: BackgroundReplacementProcessor | undefined;
+
+  // A function to change the background replacement image.
+  changeBackgroundReplacementImage: (imageBlob: Blob) => Promise<void>;
 }
 
 ```
@@ -37,6 +43,8 @@ For more information, refer to [Video Processing APIs](https://github.com/aws/am
 
 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)
 
+You can change the background replacement image by `changeBackgroundReplacementImage`. The background can be set to either a custom color or an image, both of which need to be converted into a `Blob`.
+
 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.mdx

@@ -19,6 +19,7 @@ Lastly, make sure to construct a new `DefaultVideoTransformDevice` using `create
 
 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)
 
+You can change the background replacement image by `changeBackgroundReplacementImage`. The background can be set to either a custom color or an image, both of which need to be converted into a `Blob`.
 Background replacement related logs can be found in the browser developer tools when the `BackgroundReplacementProvider` is used within the app component tree.
 
 ## Return Value
@@ -30,6 +31,12 @@ Background replacement related logs can be found in the browser developer tools
 
   // A function to transform a video input device to a `DefaultVideoTransformDevice`.
   createBackgroundReplacementDevice: (device: Device) => Promise<DefaultVideoTransformDevice>;
+
+  // The current `backgroundBlurProcessor` applied to the video device that is generated when you call `createBackgroundBlurDevice`.
+  backgroundReplacementProcessor: BackgroundReplacementProcessor | undefined;
+
+  // A function to change the background replacement image.
+  changeBackgroundReplacementImage: (imageBlob: Blob) => Promise<void>;
 }
 
 ```