Add usage code for changeBackgroundReplacementImage in storybook (#961)

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>
  );