Virtual Background - Android

Virtual backgrounds allow you to replace your actual background during video calls or meetings with an image, a solid color, or even a blur effect. 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 enables the integration of sophisticated virtual background effects within your video applications. By leveraging this library, users can replace their physical backgrounds with custom images or static backdrops, 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 library

You can install our Android library by using Maven Central package repositories.

• Add the dependency in your app/build.gradle file.

app/build.gradle

dependencies {
	implementation 'live.videosdk:videosdk-media-effects:0.0.2'
	// other app dependencies
}

Apply Virtual Background

• The applyVideoProcessor() method of the VideoSDK class enables dynamic changes to the video background during a live session.

• This method accepts an instance of the VideoFrameProcessor class as its parameter.

• The following classes implement the VideoFrameProcessor interface. Depending on your requirements, you can create an instance of the appropriate class and pass it to the applyVideoProcessor() method:

  1. BackgroundImageProcessor : The BackgroundImageProcessor class takes a Uri as a parameter and uses it as the video stream background.
  2. BackgroundBlurProcessor: The BackgroundBlurProcessor class takes a float value for the blur radius and a Context to apply a blur effect to the video stream background. It supports range between 0 to 25.
  3. BackgroundColorProcessor: The BackgroundColorProcessor class takes an int value for the color and sets it as the background for the video stream.

Change Virtual Background

• To change the virtual background, users can utilize a set of setters that allow easy switching between a new image, a blur effect, or a solid color. This functionality supports dynamic customization, enhancing the user's video experience by enabling seamless background updates in real-time.

• You can use following setters to change Virtual Background:

  1. setBackgroundSource(Uri uri): This method of the BackgroundImageProcessor class takes a Uri as a parameter to update the current background image for the video stream.
  2. setBlurRadius(float opacity): This method of the BackgroundBlurProcessor class takes a float value for the blur radius to adjust the blur effect of the current background.
  3. setBackgroundColor(int color): This method of the BackgroundColorProcessor class takes an int value as a parameter to update the current background color for the video stream.

Remove Virtual Background

• The removeVideoProcessor() method from the VideoSDK class 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

Kotlin

Class MeetingActivity : AppCompatActivity() {
    private var backgroundImageProcessor: BackgroundImageProcessor? = null
    private var backgroundBlurProcessor: BackgroundBlurProcessor? = null
    private var backgroundColorProcessor: BackgroundColorProcessor? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        //...

        //To Apply Virtual Background
        findViewById<View>(R.id.applyBackground).setOnClickListener { view: View? ->
            val uri =
                Uri.parse("https://st.depositphotos.com/2605379/52364/i/450/depositphotos_523648932-stock-photo-concrete-rooftop-night-city-view.jpg")
            backgroundImageProcessor = BackgroundImageProcessor(uri)
      //    backgroundBlurProcessor = BackgroundBlurProcessor(25f, this)
      //    backgroundColorProcessor = BackgroundColorProcessor(Color.BLUE)
            VideoSDK.applyVideoProcessor(backgroundColorProcessor)
        }

        //To Change Virtual Background
        findViewById<View>(R.id.changeBackground).setOnClickListener { view: View? ->
            val newUri =
                Uri.parse("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=pexels-pixabay-531880.jpg&fm=jpg")
            backgroundImageProcessor!!.setBackgroundSource(newUri)
      //    backgroundColorProcessor!!.setBackgroundColor(Color.CYAN)
      //    backgroundBlurProcessor!!.setBlurRadius(17f)
        }
        
        //To Remove Virtual Background
        findViewById<View>(R.id.changeBackground).setOnClickListener { view: View? ->
            VideoSDK.removeVideoProcessor()
        }
    }
}

Java

public class MeetingActivity extends AppCompatActivity {

    private BackgroundImageProcessor backgroundImageProcessor;
    private BackgroundBlurProcessor backgroundBlurProcessor;
    private BackgroundColorProcessor backgroundColorProcessor;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //...

        //To Apply Virtual Background
        findViewById(R.id.applyBackground).setOnClickListener(view -> {
            Uri uri = Uri.parse("https://st.depositphotos.com/2605379/52364/i/450/depositphotos_523648932-stock-photo-concrete-rooftop-night-city-view.jpg");
            backgroundImageProcessor = new BackgroundImageProcessor(uri);
        //   backgroundBlurProcessor = new BackgroundBlurProcessor(25,this);
        //   backgroundColorProcessor = new BackgroundColorProcessor(Color.BLUE);
            VideoSDK.applyVideoProcessor(backgroundColorProcessor);
        });

        //To Change Virtual Background
        findViewById(R.id.changeBackground).setOnClickListener(view -> {
            Uri newUri = Uri.parse("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=pexels-pixabay-531880.jpg&fm=jpg");
            backgroundImageProcessor.setBackgroundSource(newUri);
        //    backgroundColorProcessor.setBackgroundColor(Color.CYAN);
        //    backgroundBlurProcessor.setBlurRadius(17);    
        });
        
        //To Remove Virtual Background
        findViewById(R.id.removeBackground).setOnClickListener(view -> {
            VideoSDK.removeVideoProcessor();
        });
    }
}

API Reference

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

• applyVideoProcessor()
• removeVideoProcessor()