Virtual Background (BETA) - Javascript

This feature allows participants to blur own Video Background or set custom image backgrounds for increasing best productivity and protect personal privacy during Video communication.

info

• Currently, This feature is only available on Google Chrome, Safari, Firefox and Brave browser.
• This feature is in Beta release, so feel free to reach out to us on Discord. We'd love to hear feedback from you.

1. Install VideoSDK Media Processor package

NPM

npm install --save @videosdk.live/videosdk-media-processor-web

YARN

yarn add @videosdk.live/videosdk-media-processor-web

2. Start, Update and Stop Virtual Background

Three major method is used for handling Virtual Background Processor.

• Start

This method accepts two parameters MediaStram and config, return processed MediaStream.

1. MediaStream : Source of MediaStream.

2. config : This object accepts type and imageUrl property. type property accepts filter type image or blur. imageUrl is the path of the image and will ignore on blur filter type.

   NOTE : If you want to display specific background image, do make sure it is uploaded on CDN.

// Meeting Initializer
meeting = window.VideoSDK.initMeeting({...});

const startVirtualBackground = async () => {
  // Instantiate VirtualBackgroundProcessor Class
  const videoProcessor = new window.VirtualBackgroundProcessor();

  // Initialize processor if not ready
  if (!videoProcessor.ready) {
    await videoProcessor.init();
  }

  // Configuration for starting processor
  const config = {
    type: "image", // "blur"
    imageUrl: "https://cdn.videosdk.live/virtual-background/cloud.jpeg",
    // Here is a list of background images you can use for your project.
    // imageUrl: "https://cdn.videosdk.live/virtual-background/beach.jpeg",
    // imageUrl: "https://cdn.videosdk.live/virtual-background/san-fran.jpeg",
    // imageUrl: "https://cdn.videosdk.live/virtual-background/paper-wall.jpeg",
  };

  // Getting stream from webcam
  const stream = await window.VideoSDK.createCameraVideoTrack({});
  const processedStream = await videoProcessor.start(stream, config);

  // Pass `processedStream` in VideoSDKs `changeWebcam` method
  meeting.changeWebcam(processedStream);
};

• Update Processor

This method is used for updating filter as well as virtual background image during meeting.

const config = {
  type: "image", // "blur"
  imageUrl: "https://cdn.videosdk.live/virtual-background/cloud.jpeg",
};

videoProcessor.updateProcessorConfig(config);

• Stop

This method is used to stop virtual background processor.

const videoProcessor = new VirtualBackgroundProcessor();

const stopVirtualBackground = async () => {
  videoProcessor.stop();

  // Pass webcam MediaStream in VideoSDK `changeWebcam` method
  const stream = await window.VideoSDK.createCameraVideoTrack({});
  meeting.changeWebcam(stream);
};