# Virtual Background not working in Preview Camera

**URL:** <https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923>\
**Category:** Web\
**Created:** [January 23, 2023, 10:04am UTC](https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923 "2023-01-23T10:04:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![shoaib](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/shoaib/32/28580_2.png) [@shoaib](https://devforum.zoom.us/u/shoaib)\
**Post date:** [January 23, 2023, 10:04am UTC](https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923/1 "2023-01-23T10:04:50Z")

</div>

**Description**  
We want to show virtual background in [preview camera](https://marketplace.zoom.us/docs/sdk/video/web/essential/test/#preview-camera).  
And for that we found one API → `previewVirtualBackground` but it is expecting _HTMLCanvasElement_ as param, and for preview camera we use _HTMLVideoElement_ as mentioned [here](https://marketplace.zoom.us/docs/sdk/video/web/essential/test/#preview-camera).

 ![Screenshot 2023-01-23 at 3.28.47 PM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/5/c/5c17fa58b549bf3001949fa414535106c861d41a.png)

Is there any way to do it or any other API which we can use for this case?

---

<div class="post-metadata">

**Author:** ![rehema.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rehema.zoom/32/40323_2.png) [@rehema.zoom](https://devforum.zoom.us/u/rehema.zoom)\
**Post date:** [January 23, 2023, 2:07pm UTC](https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923/2 "2023-01-23T14:07:26Z")

</div>

Hi @shoaib ,

Thanks for your question. What browser are you seeing this error on? The reason may be that a virtual background requires [SharedArrayBuffer](https://developers.zoom.us/docs/sdk/overview/websdk-gallery-view/) be enabled (on Chrome or Edge), and SharedArrayBuffer calls for a ‘canvasElement’, rather than a ‘videoElement’. Can you try rendering with a canvas element and see if it works?

I definitely see how the documentation can be a bit misleading and will request a change to the team.

Thanks,  
Rehema

---

<div class="post-metadata">

**Author:** ![shoaib](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/shoaib/32/28580_2.png) [@shoaib](https://devforum.zoom.us/u/shoaib)\
**Post date:** [January 23, 2023, 5:37pm UTC](https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923/3 "2023-01-23T17:37:42Z")

</div>

hey @rehema.zoom ,  
There is no error, the issue is that I need to show Virtual Background in Local Preview Video for that I found this API: `previewVirtualBackground` but it requires a `canvasElement` which we don’t have in Local Preview Component.

Preview camera renders video on _HTMLVideoElement_ only as also mentioned [here](https://marketplace.zoom.us/docs/sdk/video/web/essential/test/#preview-camera).

 ![Screenshot 2023-01-23 at 10.42.45 PM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/b/0/b00a91360621fd90ed980da2ad7b22110743f90f.jpeg)

You can see in above mentioned code, to start a preview video we pass a _HTMLVideoElement_ in `localVideoTrack.start()`, So there is no `canvasElement` element that we can pass in `previewVirtualBackground` API.

I’ve tried the Preview in [demo app](https://github.com/zoom/videosdk-web-sample/blob/master/react-demo/src/feature/preview/preview.tsx) as well, there also Virtual Background is not working in Local Preview.

---

<div class="post-metadata">

**Author:** ![rehema.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rehema.zoom/32/40323_2.png) [@rehema.zoom](https://devforum.zoom.us/u/rehema.zoom)\
**Post date:** [January 26, 2023, 3:19pm UTC](https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923/4 "2023-01-26T15:19:29Z")

</div>

Got it, thank you for the clarification. Just to rule out some other issues, what browser are you using for your app and testing the demo app in? I’m doing some continued research on the API and will reach back out when I have an update.

Thanks,  
Rehema

---

<div class="post-metadata">

**Author:** ![shoaib](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/shoaib/32/28580_2.png) [@shoaib](https://devforum.zoom.us/u/shoaib)\
**Post date:** [January 26, 2023, 4:08pm UTC](https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923/5 "2023-01-26T16:08:23Z")

</div>

hey @rehema.zoom ,  
I’ve tried it in both Chrome and Firefox.

---

<div class="post-metadata">

**Author:** ![rehema.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rehema.zoom/32/40323_2.png) [@rehema.zoom](https://devforum.zoom.us/u/rehema.zoom)\
**Post date:** [January 26, 2023, 4:39pm UTC](https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923/6 "2023-01-26T16:39:30Z")

</div>

Hi @shoaib ,

Thanks for the follow-up. Previewing a virtual background is actually not available for the pre-session preview of your video; it’s only available once you’re in a session. The API mentioned in this thread is for in-session use only; my apologies for the confusion. I hope this provides some clarity! I will work on making sure the documentation more clearly states this.

Thanks,  
Rehema

---

<div class="post-metadata">

**Author:** ![shoaib](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/shoaib/32/28580_2.png) [@shoaib](https://devforum.zoom.us/u/shoaib)\
**Post date:** [January 27, 2023, 2:07pm UTC](https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923/7 "2023-01-27T14:07:20Z")

</div>

Hey @rehema.zoom ,  
Got it, Thanks for clarifying.  
Is there **any plan or ETA** on addition of an API for this use-case,  
because user would want to first check Virtual Background pre-session as well before actually applying it, right? → It is a highly probable expectation from the customer’s perspective.

---

<div class="post-metadata">

**Author:** ![shoaib](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/shoaib/32/28580_2.png) [@shoaib](https://devforum.zoom.us/u/shoaib)\
**Post date:** [January 31, 2023, 12:58pm UTC](https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923/8 "2023-01-31T12:58:21Z")

</div>

hey @rehema.zoom, any update on the above query?

---

<div class="post-metadata">

**Author:** ![rehema.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rehema.zoom/32/40323_2.png) [@rehema.zoom](https://devforum.zoom.us/u/rehema.zoom)\
**Post date:** [January 31, 2023, 2:25pm UTC](https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923/9 "2023-01-31T14:25:33Z")

</div>

Hi @shoaib ,

Thanks for your feedback.I checked with the team and, at this time, there is no plan to add virtual background to the video preview. This is due to significant differences in the tech stack used for the preview component (for the web platform).

Thanks,  
Rehema

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [March 3, 2023, 12:26am UTC](https://devforum.zoom.us/t/virtual-background-not-working-in-preview-camera/81923/10 "2023-03-03T00:26:32Z")

</div>

Closed on March 3, 2023, 12:26am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
