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}
    />
  );
}