Skip to main content

Virtual Background

To add virtual backgroung you need to use a different CDN link Instead of dyte.js use dyte.bg.js

<script src="https://cdn.dyte.in/lib/dyte.bg.js"></script>

Usage

<script>
const client = new DyteClient({ clientId: "orgId|clientId" });

const meeting = client.Meeting({
roomName: "<roomName>",
authToken: "<authToken>",
});
meeting.initBackgroundRemoval();

meeting.init("root");
</script>

To add your own images

const meeting = client.Meeting({
roomName: '<roomName>',
authToken: '<authToken>',
});
meeting.initBackgroundRemoval({
defaultImageUrl: undefined,
imageUrls: [
'https://assets.dyte.io/backgrounds/bg_0.jpg',
'https://assets.dyte.io/backgrounds/bg_1.jpg',
'https://assets.dyte.io/backgrounds/bg_2.jpg',
'https://assets.dyte.io/backgrounds/bg_3.jpg',
'https://assets.dyte.io/backgrounds/bg_4.jpg',
'https://assets.dyte.io/backgrounds/bg_5.jpg',
'https://assets.dyte.io/backgrounds/bg_6.jpg',
],
});