Enable video with BackgroundBlur filter when joining the meeting

[kodai305]

What happened and what did you expect to happen?

I would like to attend meetings with background blur ON.

To be more precise, I want to enter a meeting with background blur ON when I turn it ON in the device settings screen.

I tried the following code and the video is on and BackgroundBlur has a checkbox, but the blur effect is not on. What should I do?

  useEffect(() => {
    async function toggle() {
      if (meetingStatus === MeetingStatus.Succeeded) {
        await toggleVideo();
        await toggleBackgroundBlur();
      }
    }
    toggle();
  }, [meetingStatus]);

Have you reviewed our existing documentation?

• [X] Amazon Chime SDK for JavaScript GitHub issues
• [X] Amazon Chime SDK React Components Library GitHub issues
• [X] Storybook documentation
• [X] README page
• [X] How-to documentation
• [X] React SDK meeting demo

Reproduction steps

none

Amazon Chime SDK React Components Library version

^3.2.0

What browsers are you seeing the problem on?

chromec

Browser version

103.0.5060.114

Device Information

Mac

Meeting and Attendee ID Information.

No response

Browser console logs

none

Add any other context about the problem here.

No response

[michhyun1]

Have you checked out the usage documentation for useBackgroundBlur hook? https://github.com/aws/amazon-chime-sdk-component-library-react/blob/f1b599441543e90c1d20fd41d0a03ec7ba995c23/src/providers/BackgroundBlurProvider/docs/useBackgroundBlur.stories.mdx#usage

[xuesichao]

Hi @kodai305 , I figured out a way to achieve this. I have pushed the code change to this enable-bb-when-starting-video branch. You can check this git diff as reference.

[xuesichao]

Close the issue for now. Feel free to reopen it if you have more questions.

[xuesichao]

@kodai305 , I think I misunderstood you use case. Could you explain it a bit more?

To be more precise, I want to enter a meeting with background blur ON when I turn it ON in the device settings screen

Could we ask customer to explain it a bit further? My questions are:

1. What does “enter a meeting with background blur ON” mean?

   1. The background blur feature is enabled but the camera needs to be enabled manually by clicking a button after joining the meeting?
   2. Or, the video will be automatically enabled with background blur feature enabled after joining the meeting?

2. What does “when I turn it ON in the device settings screen” mean?

   1. What does device settings screen do? Is it exactly same as the Device Setting page of React meeting demo?
   2. How does customer enable the Background Blur feature? Which component/hook/API does customer use?

The code I posted in the previous post is to achieve that the background blur feature is enabled once joining the meeting. The user needs to enable camera by clicking the video button. And once the video is enabled, the background blur filter is already applied.

[xuesichao]

If anyone want to automatically enable camera with background blur feature applied, check the code in enable-video-with-bb-on-start branch. Code details are in this git diff.

Why does following code not work?

useEffect(() => {
    async function toggle() {
      if (meetingStatus === MeetingStatus.Succeeded) {
        await toggleVideo();
        await toggleBackgroundBlur();
        }
    }
    toggle();
  }, [meetingStatus]);

toggleVideo() method simply requests media stream for meetingManager.selectedVideoInputDevice from browser and display LocalVideoTile.

toggleBackgroundBlur() method mainly transforms the original meetingManager.selectedVideoInputDevice to a corresponding BackgroundBlurDevice.

The issue is that when putting them in the same useEffect hook. After calling one of both, the other one does not get updated even though its dependencies have changed. So we have to call them separately in order to give the later method a timing to get updated. If we don't need to call them together at the same time, then, regardless of the order in which they are called, the result should be always correct.

The solution is simple, we use lower level APIs (audioVideo.* and meetingManager.*) to enable BackgroundBlur feature, start the camera and then display the video tiles. Finally, update the states (isVideoEnabled, activeVideoTransformOption).

Note: This solution can also guarantee that the VideoTransformInputControl component works correctly.

[xuesichao]

Hi, we figure out an easier way to achieve this: Check the code in this branch: https://github.com/aws-samples/amazon-chime-sdk/tree/enable-video-with-bb-on-start-simple And the commit details: https://github.com/aws-samples/amazon-chime-sdk/compare/main...enable-video-with-bb-on-start-simple

Previous Solution vs. This Solution

Previous Solution Pros: This solution enables Background Blur filter first and then enables video. It has a faster response. Cons: The implementation is complex and includes low level APIs.

This Solution Pros: Very simple implementation and no low level APIs. Cons: This solution enables video first and then enables Background Blur filter. It request media stream twice so it's a bit slower and you can observe a short pause to transform from original media stream to background blur enabled media stream.

[devalevenkatesh]

Hi @kodai305 due to no activity I am closing this issue. Please feel free to re-open if you still have the same issue. Suggest checking out Sichao's solution above.