DEV Community

Agik Setiawan
Agik Setiawan

Posted on

Add Virtual Background List ini Zoom SDK

Open
https://developer.chrome.com/origintrials/#/trials/active

Generate token from "SharedArrayBuffers in non-isolated pages on Desktop platforms" list menu.

Add Meta tag in HTML

<meta
      http-equiv="origin-trial"
      content="YOUR_TOKEN_HERE"
    />
Enter fullscreen mode Exit fullscreen mode

First code we must have DOM with ID

let meetingSDKElement: any = document.getElementById('meetingSDKElement');
client.join({
        sdkKey: zoom.sdkKey,
        signature: signature,
        meetingNumber: 1234,
        password: encrypted_password,
        userName: "test",
        userEmail: "test@gmail.com",
    });
Enter fullscreen mode Exit fullscreen mode

After init and join, add code below for register list of virtual background image

client.updateVirtualBackgroundList([
            {
                id: 'abc',
                url: '/images/abc.jpg',
                fileName: 'John Doe',
                displayName: 'John Doe',
            },
            {
                id: 'kp',
                url: '/images/vb/test.jpg',
                fileName: 'test.jpg',
                displayName: 'Test image',
            }
        ])
Enter fullscreen mode Exit fullscreen mode

Next, Inside setting menu in host screen, find the virtual background menu and then change virtual background with image that registered before.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay