Zoom Web SDK Virtual Background Images Question

Meeting SDK Web
1

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:

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
image424×527 24.7 KB

Troubleshooting Routes
The troubleshooting attempt types you’ve already exhausted, including testing with the appropriate sample app (found on Zoom · GitHub).

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.

2

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:

<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>
3

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