Issue with Local Video Rendering When Using Virtual Background Blur

Video SDK
1

Video SDK Type and Version

@zoom/videosdk: “1.12.12”
React: “18.2.0”

Description

I am trying to implement the virtual background feature (blur effect) using the Zoom Video SDK. I followed the documentation and applied the following steps:

  1. Initialize the client:
await clientZoom.init('en-US', 'Global', {
    patchJsMedia: true,
    enforceVirtualBackground: true
});
  1. Use the updateVirtualBackgroundImage method in a toggleBlur function:
await mediaStream.updateVirtualBackgroundImage('blur');

The issue I am facing is that when I join a call, my local video does not render properly. However, the other participant in the meeting can see my video with the blur effect applied.

Error?

There is no error message, but the issue is that the local video is not displaying correctly, while the remote participant sees it blurred as expected.

Troubleshooting Routes

  • I have reviewed the documentation for the Video SDK.
  • I checked the Zoom Developer Changelog and other related forum posts but couldn’t find a solution.
  • I have not been able to test this with the sample app, as my issue is specific to React integration.

How To Reproduce

  1. Authentication method or app type: Using React SDK integration with Zoom Video SDK 1.12.12.
  2. Steps:
  • Initialize the client as shown above.
  • Join a meeting and observe the local video feed.
  • Use the updateVirtualBackgroundImage('blur') method when toggling the blur effect.
  1. Browser/client type and version: Tested on Google Chrome and React 18.2.0.
2

Hey @abarreca

Thanks for your feedback.

Could you share the problematic session IDs with us for troubleshooting purposes?

Thanks
Vic

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!