# Issue with Local Video Rendering When Using Virtual Background Blur

**URL:** <https://devforum.zoom.us/t/issue-with-local-video-rendering-when-using-virtual-background-blur/121704>\
**Category:** Video SDK\
**Created:** [November 29, 2024, 10:46pm UTC](https://devforum.zoom.us/t/issue-with-local-video-rendering-when-using-virtual-background-blur/121704 "2024-11-29T22:46:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![abarreca](https://avatars.discourse-cdn.com/v4/letter/a/c37758/32.png) [@abarreca](https://devforum.zoom.us/u/abarreca)\
**Post date:** [November 29, 2024, 10:46pm UTC](https://devforum.zoom.us/t/issue-with-local-video-rendering-when-using-virtual-background-blur/121704/1 "2024-11-29T22:46:59Z")

</div>

### **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:

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

```

1. Use the `updateVirtualBackgroundImage` method in a `toggleBlur` function:

```auto
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.

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [December 2, 2024, 2:10am UTC](https://devforum.zoom.us/t/issue-with-local-video-rendering-when-using-virtual-background-blur/121704/2 "2024-12-02T02:10:59Z")

</div>

Hey @abarreca

Thanks for your feedback.

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

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![abarreca](https://avatars.discourse-cdn.com/v4/letter/a/c37758/32.png) [@abarreca](https://devforum.zoom.us/u/abarreca)\
**Post date:** [December 3, 2024, 3:39pm UTC](https://devforum.zoom.us/t/issue-with-local-video-rendering-when-using-virtual-background-blur/121704/3 "2024-12-03T15:39:03Z")

</div>

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:

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

```

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

```auto
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!