Add usage code for changeBackgroundReplacementImage in storybook (#961)

Author: dingyishen-amazon

CHANGELOG.md

@@ -12,6 +12,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 its parameter and return a `Promise`.
+- Add usage of `changeBackgroundReplacementImage` in storybook.
 
 ### Removed
 

src/providers/BackgroundReplacementProvider/docs/BackgroundReplacementProvider.mdx

@@ -43,7 +43,7 @@ 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`.
+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`. Refer to [BackgroundReplacementDropdown in aws-samples/amazon-chime-sdk](https://github.com/aws-samples/amazon-chime-sdk/blob/main/apps/meeting/src/components/DeviceSelection/CameraDevices/BackgroundReplacementDropdown.tsx) for usage.
 
 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`.
@@ -75,6 +75,7 @@ import {
   useMeetingManager,
   useBackgroundReplacement,
   useVideoInputs,
+  useLogger,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (
@@ -88,11 +89,14 @@ const App = () => (
 const MyChild = () => {
   const meetingManager = useMeetingManager();
   const { selectedDevice } = useVideoInputs();
-  const [isVideoTransformChecked, setIsVideoTransformCheckOn] = useState(false);
+  const [isVideoTransformCheckBoxOn, setisVideoTransformCheckBoxOn] =
+    useState(false);
   const {
     isBackgroundReplacementSupported,
     createBackgroundReplacementDevice,
+    changeBackgroundReplacementImage,
   } = useBackgroundReplacement();
+  const logger = useLogger();
 
   useEffect(() => {
     async function toggleBackgroundReplacement() {
@@ -121,6 +125,19 @@ const MyChild = () => {
     setisVideoTransformCheckOn((current) => !current);
   };
 
+  const changeBackgroundReplacementOption = async (hexColor: string) => {
+    let current = selectedDevice;
+    if (current === undefined) {
+      return;
+    }
+    try {
+      const blob = await createBlob(hexColor); // Refer to https://github.com/aws-samples/amazon-chime-sdk/blob/main/apps/meeting/src/utils/background-replacement.ts#L7 for the implementation.
+      await changeBackgroundReplacementImage(blob);
+    } catch (error) {
+      logger.error(`Error trying to change background replacement image ${error}`);
+    }
+  };
+
   return (
     <div>
       {isBackgroundReplacementSupported && (
@@ -129,6 +146,11 @@ const MyChild = () => {
             ? 'Background Replacement Enabled'
             : 'Enable Background Replacement'}
         </button>
+        <button
+            onClick={async () => await changeBackgroundReplacementOption('#000000')}
+        >
+          'Change background replacement to Black'
+        </button>
       )}
     </div>
   );

src/providers/BackgroundReplacementProvider/docs/useBackgroundReplacement.mdx

@@ -19,7 +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`.
+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`. Refer to [BackgroundReplacementDropdown in aws-samples/amazon-chime-sdk](https://github.com/aws-samples/amazon-chime-sdk/blob/main/apps/meeting/src/components/DeviceSelection/CameraDevices/BackgroundReplacementDropdown.tsx) for usage.
 Background replacement related logs can be found in the browser developer tools when the `BackgroundReplacementProvider` is used within the app component tree.
 
 ## Return Value
@@ -60,6 +60,7 @@ import {
   useMeetingManager,
   useBackgroundReplacement,
   useVideoInputs,
+  useLogger,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (
@@ -78,7 +79,9 @@ const MyChild = () => {
   const {
     isBackgroundReplacementSupported,
     createBackgroundReplacementDevice,
+    changeBackgroundReplacementImage,
   } = useBackgroundReplacement();
+  const logger = useLogger();
 
   useEffect(() => {
     async function toggleBackgroundReplacement() {
@@ -107,6 +110,19 @@ const MyChild = () => {
     setisVideoTransformCheckBoxOn((current) => !current);
   };
 
+  const changeBackgroundReplacementOption = async (hexColor: string) => {
+    let current = selectedDevice;
+    if (current === undefined) {
+      return;
+    }
+    try {
+      const blob = await createBlob(hexColor); // Refer to https://github.com/aws-samples/amazon-chime-sdk/blob/main/apps/meeting/src/utils/background-replacement.ts#L7 for the implementation.
+      await changeBackgroundReplacementImage(blob);
+    } catch (error) {
+      logger.error(`Error trying to change background replacement image ${error}`);
+    }
+  };
+
   return (
     <div>
       {isBackgroundReplacementSupported && (
@@ -115,6 +131,11 @@ const MyChild = () => {
             ? 'Background Replacement Enabled'
             : 'Enable Background Replacement'}
         </button>
+        <button
+            onClick={async () => await changeBackgroundReplacementOption('#000000')}
+        >
+          'Change background replacement to Black'
+        </button>
       )}
     </div>
   );