Issue with Local Video Rendering When Using Virtual Background Blur

Video SDK
3

Hi Vic, thanks for you response! I was able to resolve the issue by removing an extra div that I had mistakenly added inside the video-player-container.

Additionally, I initialized the Zoom client like this:

await clientZoom.init('en-US', 'Global', {
  patchJsMedia: true,
  enforceMultipleVideos: true,
  enforceVirtualBackground: true
})

I also created a function to toggle the blurred background effect:

const toggleBlurBackground = async () => {
  const mediaStream = client.getMediaStream();

 try {
    if (!isBackgroundBlurred) {
      await mediaStream.updateVirtualBackgroundImage('blur');
      setIsBackgroundBlurred(true);
    } else {
      await mediaStream.updateVirtualBackgroundImage('');
      setIsBackgroundBlurred(false);
    }
  } catch (error) {
    console.error('Error when toggling background blur:', error);
  }
};

Thanks again for your help!