Newcomer

Solved

How to let users use their own virtual background image？

Forum|Forum|1 year ago
August 23, 2024
4 replies
3 views

Hello,

We are using Zoom Web SDK, now user can set virtual background from limited selections(images) preloaded with SDK. It seems there is no way to allow user to upload or use their own virtual background image

Meeting Features

Best answer by schapdelaine

Hello @help888
@Humashankar you are half right and half wrong. You cannot upload virtual background, but you can provide your own images to be used as virtual background.

I have a solution for this. I am not sure why the forum deleted my previous answer. Probably because I included javascript code in it.
Basically, you can provide your own virtual background by using the method

updateVirtualBackgroundList on ZoomMtg class. You pass it an object with three properties:
error, optional, that is a function

success, optional, that is function

vbList, an array with objects inside having the following required properties:

displayName, string, you can put anything inside

fileName: string, this doesnt seem to have a use, but maybe use the same name as your filename in the url

id: string, you can put any value, but must be unique

url: string, a url to a picture you want to use

I call that method in the success callback of the join method. And this works for me!

Humashankar

Community Champion | Customer

Hi @help888

The Zoom Web SDK does not currently have a built-in feature to allow users to upload and use their own virtual background images directly. you can try to implement a custom solution.

Also if you wish you can also make use of this form

Sending feedback to Zoom

Hope this helps - Happy to help further!!
Thank you very much and have a great one!
Warm regards

S

schapdelaine

Newcomer

Check my reply.

S

schapdelaine

Newcomer

You can actually override the virtual background in the client meeting sdk.
Note that virtual backgrounds work when ArrayBuffer is accessible in the page. For this I have my zoom client implementation in a standalone page with no third party loaded.

So basically, just put this in the window.ZoomMtg.join success callback

const vbListing = [{

displayName: 'My Space Background',

fileName: 'facts-about-space-hero.jpg',

id: 'ANYTHING',

url: 'https://c02.purpledshub.com/uploads/sites/48/2023/04/facts-about-space-hero.jpg?w=940&webp=1'

}];

window.ZoomMtg.updateVirtualBackgroundList({

error: function(error) { console.log('updateVirtualBackgroundList error', error) },

success: function() { console.log('updateVirtualBackgroundList success') },

vbList: vbListing

})

S

schapdelaineAnswer

Newcomer

Hello @help888
@Humashankar you are half right and half wrong. You cannot upload virtual background, but you can provide your own images to be used as virtual background.

I have a solution for this. I am not sure why the forum deleted my previous answer. Probably because I included javascript code in it.
Basically, you can provide your own virtual background by using the method

updateVirtualBackgroundList on ZoomMtg class. You pass it an object with three properties:
error, optional, that is a function

success, optional, that is function

vbList, an array with objects inside having the following required properties:

displayName, string, you can put anything inside

fileName: string, this doesnt seem to have a use, but maybe use the same name as your filename in the url

id: string, you can put any value, but must be unique

url: string, a url to a picture you want to use

I call that method in the success callback of the join method. And this works for me!

H

help888Author

Newcomer

Thank you very much!

Getting Started

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded