# Zoom Web SDK Virtual Background Images Question

**URL:** <https://devforum.zoom.us/t/zoom-web-sdk-virtual-background-images-question/96604>\
**Category:** Web\
**Created:** [October 11, 2023, 2:46pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-virtual-background-images-question/96604 "2023-10-11T14:46:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![saikiran694](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/saikiran694/32/50587_2.png) [@saikiran694](https://devforum.zoom.us/u/saikiran694)\
**Post date:** [October 11, 2023, 2:46pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-virtual-background-images-question/96604/1 "2023-10-11T14:46:09Z")

</div>

### Before Creating a New Topic:

_If you’re experiencing unexpected Video SDK behavior please search the forum with relevant keywords (e.x. error message) and follow the guidance outlined in those posts. Please also leverage the following support links:_

- Zoom Developer Changelog for Dev Product Changes: [https://marketplace.zoom.us/docs/guides/stay-up-to-date/changelog/](https://marketplace.zoom.us/docs/guides/stay-up-to-date/changelog/)
- General Troubleshooting: [Support](https://devsupport.zoom.us/hc/en-us)
- To Submit a Ticket for Unexpected Video SDK Behavior: [Official Zoom Support | Help Center](https://support.zoom.us/hc/en-us)
- For General & Integrations Related Guidance: [https://community.zoom.com/](https://community.zoom.com/)

* * *

**Description**  
I have updated the Virtual background Images in my user account. But when I join the meeting in Component view meeting SDK, I still can see only the 4 default images from Zoom - PFA. I have done some reading and it looks like Zoom SDK comes with a set of bundled images and it does not pull the background images in real time from the account? And if we want to update those images, we have to use the SDK’s - updateVirtualBackgroundList() - function. Is my understnading correct? And do you have any plans in future to make this integration real time like the web client?

**Browser Console Error**  
The full error message or issue you are running into.

**Which Web Meeting SDK version?**  
Knowing the version can help us to identify your issue faster. [e.g. 1.9.9]

**Meeting SDK Code Snippets**  
The code snippets that are causing the error / issue so we can reproduce.

**To Reproduce(If applicable)**  
Steps to reproduce the behavior:

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

**Screenshots**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/2/1/2123c1d0fdd704fb0031082c2e3b26fdb4b30631.jpeg)

**Troubleshooting Routes**  
The troubleshooting attempt types you’ve already exhausted, including testing with the appropriate sample app (found on [Zoom · GitHub](https://github.com/zoom)).

**Device (please complete the following information):**

- Device: [e.g. Macbook Pro]
- OS: [e.g. macOS 11]
- Browser: [e.g. Chrome]
- Browser Version [e.g. 88.0.4324.150 (Official Build) (x86\_64)]

**Additional context**  
Add any other context about the problem here.

---

<div class="post-metadata">

**Author:** ![sigmazoomadmin](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/sigmazoomadmin/32/53487_2.png) [@sigmazoomadmin](https://devforum.zoom.us/u/sigmazoomadmin)\
**Post date:** [October 31, 2023, 7:09pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-virtual-background-images-question/96604/2 "2023-10-31T19:09:22Z")

</div>

I can confirm. Cannot get background images to work properly via the SDK examples.

Here is what I ended up doing to force it to work. It is far from finished, but I believe solutions should be shared. Additionally, here is the documentation on how I figured it out:

> **[ZoomMtg | Zoom Meeting SDK for Web - 2.17.0](https://marketplacefront.zoom.us/sdk/meeting/web/modules/ZoomMtg.html)**
>
> Documentation for Zoom Meeting SDK for Web - 2.17.0

```auto
<script>
    
    var urlSearchParams = new URLSearchParams(window.location.search);
    var params = Object.fromEntries(urlSearchParams.entries());
    
    window.vbImageInfo = {
        displayName: 'Company Default',
        fileName: 'zoombg.jpg', // possibly just needs to be random
        id: 'companyBg2', // possibly just needs to be random
        url: 'https://dev.mysite.org/images/zoombg.png'
    };

    ZoomMtg.setZoomJSLib('@Html.Raw(zoomJsLib)', '/av');
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();

    window.ZoomMtg.setZoomJSLib('@Html.Raw(zoomJsLib)', '/av');
    window.ZoomMtg.preLoadWasm();
    window.ZoomMtg.prepareJssdk();

    

    window.ZoomMtg.init({
        isSupportAV: true,
        leaveUrl: atob(params.basePage),
        success: function (data) {
    
            window.ZoomMtg.join({
                signature: params.zoomSignature,
                sdkKey: params.zoomAPIkey,
                userEmail: params.email,
                meetingNumber: params.meetingNumber,
                userName: params.name,
                passWord: params.meetingPassword,
                
                success: function(e) {
                    window.ZoomMtg.updateVirtualBackgroundList({
                        error: function (e) {
                            console.log(e)
                            // This function will be called if there's an error
                            console.log('An error occurred while updating the virtual background list.');
                        },
                        success: function (e) {
                            console.log(e)
                            // This function will be called if the operation is successful
                            console.log('Successfully updated the virtual background list.');

                            ZoomMtg.setVirtualBackground({
                                error: function (z) {
                                    console.log(z);
                                    // This function will be called if there's an error
                                    console.log('An error occurred while setting the virtual background.');
                                },
                                success: function () {
                                    // This function will be called if the operation is successful
                                    console.log('Successfully set the virtual background.');
                                },
                                id: window.vbImageInfo.id // using the id property from your vbImageInfo object
                            });
                        },
                        vbList: [window.vbImageInfo] // using your vbImage object as a single-item list
                    });
                }
            });

        },
        error: function (data) {
            debugger;
        }
    });

</script>

```

---

<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:** [December 1, 2023, 5:10am UTC](https://devforum.zoom.us/t/zoom-web-sdk-virtual-background-images-question/96604/3 "2023-12-01T05:10:17Z")

</div>

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