Skip to main content

Virtual Background

Add support for virtual backgrounds with the help of a package.

The package supports:

  • Blurred background
  • Select from a list of images
  • Upload your own

To add virtual background you need to install the following package.

npm install @dytesdk/background-changer-module

Usage

import backgroundModule from '@dytesdk/background-changer-module';

function MyComponent() {
return (
<DyteMeeting
onInit={(meeting: Meeting) => {
meeting.modules.initAndAdd(backgroundModule);
}}
clientId={clientId}
meetingConfig={meetingConfig}
/>
);
}

To add your own images

import { createAndGetModule } from '@dytesdk/background-changer-module';

const backgroundModule = createAndGetModule({
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',
'https://assets.dyte.io/backgrounds/bg_7.jpg',
],
});

function MyComponent() {
return (
<DyteMeeting
onInit={(meeting: Meeting) => {
meeting.modules.initAndAdd(backgroundModule);
}}
clientId={clientId}
meetingConfig={meetingConfig}
/>
);
}