Virtual Background Plugin (Beta)

Step 1: Add required dependency

Install @100mslive/react-native-video-plugin library

npm install @100mslive/react-native-video-plugin

Step 2: Create instance of HMSVirtualBackgroundPlugin

// Import from `@100mslive/react-native-video-plugin` library
import { HMSVirtualBackgroundPlugin } from '@100mslive/react-native-video-plugin';

...

const virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin();

Step 3: Create instance of HMSVideoTrackSettings

let videoSettings = new HMSVideoTrackSettings({
    initialState: HMSTrackSettingsInitState.MUTED
    // The virtual background plugin to use for the video track. @type {HMSVirtualBackgroundPlugin}
    videoPlugin: virtualBackgroundPlugin,
});

let trackSettings = new HMSTrackSettings({
    video: videoSettings,
});

Step 4: Pass the Track Settings to the HMSSDK

const hmsInstance = await HMSSDK.build({
    trackSettings,
});

Step 5: How to enable and disable virtual background

Hold on to a reference to the instance of HMSVirtualBackgroundPlugin and use enable and disable methods on it to enable/disable the virtual background.

const virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin();

...

let isVBEnabled = false;

// Enable VB
await virtualBackgroundPlugin.enable();
isVBEnabled = true;

// Disable VB
await virtualBackgroundPlugin.disable();
isVBEnabled = false;

Step 6: How to apply Blur as virtual background

Enable the blur background using the setBlur method. You should pass blur percentage ranging from 0-100

const virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin();

...
// state for tracking if VB is enabled
let isVBEnabled = false;

// If VB is disabled, first enable it before calling `setBlur` method
if (isVBEnabled === false) {
  await virtualBackgroundPlugin.enable();
  isVBEnabled = true;
}

await virtualBackgroundPlugin.setBlur(100);

Step 7: How to apply Image as virtual background

Enable the background image using the setBackground method. It accepts image source (either a object with height, width and uri properties or a static image file).

Here is how to use a static image file -

const virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin();

...
// state for tracking if VB is enabled
let isVBEnabled = false;

// If VB is disabled, first enable it before calling `setBlur` method
if (isVBEnabled === false) {
  await virtualBackgroundPlugin.enable();
  isVBEnabled = true;
}

const image = require('<PATH_TO_IMAGE_HERE>'); // ex: require('../assets/VB-1.jpg')
await virtualBackgroundPlugin.setBackground(image);

Here is how to use remote image file, setBackground method accepts object of following type -

export interface ImageURISource {
  width: number;

  height: number;

  /**
   * `uri` is a string representing the resource identifier for the image, which
   * could be an http address, a local file path, or the name of a static image
   * resource (which should be wrapped in the `require('./path/to/image.png')`
   * function).
   */
  uri:
}

...

await virtualBackgroundPlugin.setBackground({
  width,
  height,
  uri: 'file://...', // path of image stored in device
});

Using library like react-native-image-picker -

import { launchImageLibrary } from 'react-native-image-picker';

...

// You can use result from library like `react-native-image-picker` to use images from photo library
const result = await launchImageLibrary({ mediaType: 'photo', selectionLimit: 1 });

// getting first image
const imageObject = response.assets?.[0];

// If image is selected, use it as background
if (imageObject) {
  await virtualBackgroundPlugin.setBackground(imageObject);
}