Closed kodai305 closed 2 years ago
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
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.
Close the issue for now. Feel free to reopen it if you have more questions.
@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:
What does “enter a meeting with background blur ON” mean?
What does “when I turn it ON in the device settings screen” mean?
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.
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.
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 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.
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.
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?
Have you reviewed our existing documentation?
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