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',
  ],
});