Skip to main content
Version: 0.1.x

Virtual Background (BETA)

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 install --save @videosdk.live/videosdk-media-processor-web

2. Instantiate Virtual Background Processor​

// Import package
import { VirtualBackgroundProcessor } from "@videosdk.live/videosdk-media-processor-web";

// Instantiate VirtualBackgroundProcessor Class
const videoProcessor = new VirtualBackgroundProcessor();

3. Start, Update and Stop Virtual Background​

Three major method is used for handling Virtual Background Processor.

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.

import { useMeeting, createCameraVideoTrack } from "@videosdk.live/react-sdk";
import { VirtualBackgroundProcessor } from "@videosdk.live/videosdk-media-processor-web";

const {
  //...
  changeWebcam,
  //...
} = useMeeting({});

// Instantiate VirtualBackgroundProcessor Class
const videoProcessor = new VirtualBackgroundProcessor();

const startVirtualBackground = async () => {
  // 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 createCameraVideoTrack({});
  const processedStream = await videoProcessor.start(stream, config);

  // Pass `processedStream` in VideoSDKs `changeWebcam` method
  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);

This method is used to stop virtual background processor.

import { useMeeting, createCameraVideoTrack } from "@videosdk.live/react-sdk";

const {
  //...
  changeWebcam,
  //...
} = useMeeting({});

const videoProcessor = new VirtualBackgroundProcessor();

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

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

Extras​

You can also pass this processed stream during initialization of the meeting as well

import { useState, useEffect } from "react";
import {
  MeetingProvider,
  createCameraVideoTrack,
} from "@videosdk.live/react-sdk";
import { VirtualBackgroundProcessor } from "@videosdk.live/videosdk-media-processor-web";

const [mediastream, setMediaStream] = useState(null);

// Instantiate VirtualBackgroundProcessor Class
const videoProcessor = new VirtualBackgroundProcessor();

useEffect(async () => {
  const stream = await createCameraVideoTrack({});

  if (!videoProcessor.ready) {
    await videoProcessor.init();
  }
  const processedStream = await videoProcessor.start(stream, {
    type: "image", // "blur"
    imageUrl: `https://cdn.videosdk.live/virtual-background/cloud.jpeg`,
  });
  setMediaStream(processedStream);
}, []);

return (
  mediastream && (
    <MeetingProvider
      config={{
        meetingId,
        micEnabled: true,
        webcamEnabled: true,
        name: "TestUser",
        customCameraVideoTrack: mediastream, // Pass processed MediaStream in VideoSDK
      }}
      //...
    >
      <></>
    </MeetingProvider>
  )
);