Virtual Background(BETA) - React Native

Virtual backgrounds let you replace your real background during video calls or meetings with a digital image or video. This can be useful for:

• Privacy: Hide your messy room or anything you don't want others to see.

• Focus: Minimize distractions and keep the focus on the conversation.

• Fun: Liven up the call with a cool background theme.

Virtual Background using MediaEffects library

The MediaEffects library allows seamless integration of advanced virtual background effects into video applications. With this library, users can apply various background effects—such as blur, solid colors, and images—during video calls, creating a more immersive and engaging experience.

info

The Virtual Background feature in VideoSDK can be utilized regardless of the meeting environment, including the pre-call screen.

Install the plugin

• You can install the MediaEffects plugin in your React Native app either using npm or yarn.

NPM

npm install "@videosdk.live/react-native-media-effects"

YARN

yarn add "@videosdk.live/react-native-media-effects"

• To enable virtual background on iOS, ensure the following line is in your Podfile.

use_frameworks! :linkage => :static

note

Note that after modifying your podfile, with above line, Flipper will not work and thus you need to comment the following line:

# :flipper_configuration => flipper_config,

Apply Virtual Background

• The MediaEffects library provides several methods to apply different types of background effects. These methods allow you to modify the background in real-time, enhancing the visual presentation according to your specific requirements.

• You can choose from the following methods depending on your needs:

1. applyImageBackground()

• The applyImageBackground(backgroundSource: string) method allows you to replace the background with an image. It takes the image URL as the backgroundSource parameter.

• Example:

  VideosdkMediaEffects.applyImageBackground(
    "https://cdn.videosdk.live/virtual-background/cloud.jpeg);

note

The image URL must use HTTPS; otherwise, it will not work.

2. applyBlurBackground()

• The applyBlurBackground(blurRadius: number) method applies a blur effect to the background. You can adjust the blur intensity by setting the blurRadius parameter.

• Example:

  VideosdkMediaEffects.applyBlurBackground(25.0);

3. applyColorBackground()

• The applyColorBackground(hexColor: string) method lets you set a solid color as the background using a hex color code (e.g., #FF0000 for red).

• Example:

  VideosdkMediaEffects.applyColorBackground("#FF0000");

Remove Virtual Background

• The removeBackground() method from the MediaEffects plugin provides users with a convenient way to revert their video background to its original state, removing any previously applied virtual background. This functionality ensures flexibility for users to switch between virtual and real backgrounds as needed.

Example:

VideosdkMediaEffects.removeBackground();

Example Code

import React from 'react';
import { Button, View } from 'react-native';
import VideosdkMediaEffects from '@videosdk.live/react-native-media-effects';

const VideoBackgroundScreen = () => {
  return (
    <View>
      // Apply Blur Background
      <Button title="Apply Blur Background" 
      onPress={() => VideosdkMediaEffects.applyBlurBackground(10)} />

      // Apply Color Background 
      <Button title="Apply Color Background" 
      onPress={() => VideosdkMediaEffects.applyColorBackground("#FF5733")} />

      // Apply Image Background
      <Button title="Apply Image Background" 
      onPress={() => VideosdkMediaEffects.applyImageBackground("https://example.com/background.jpg")} />

      // Remove Background
      <Button title="Remove Background" 
      onPress={() => VideosdkMediaEffects.removeBackground()} />
    </View>
  );
};

export default VideoBackgroundScreen;

API Reference

The API references for all the methods utilized in this guide are provided below.

• applyImageBackground()
• applyBlurBackground()
• applyColorBackground()
• removeBackground()