Virtual background

Virtual Background enables users to blur their background or replace it with a solid color or an image. This feature is applicable to scenarios such as online conferences, online classes, and live streaming. It helps protect personal privacy and reduces audience distraction.

Virtual Background has the following features:

Feature	Example
Blurred background and image background
Video/Animated background
Portrait-in-picture	Allows the presenter to use slides as the virtual background while superimposing their video. The effect is similar to a weather news cast on television, preventing interruptions during a layout toggle.

Want to test Virtual Background? Try the online demo.

A typical transmission pipeline in the Agora Web SDK consists of a chain of procedures, including capture, preprocessing, encoding, transmitting, decoding, post-processing, and playback. In the preprocessing stage, extensions can modify the audio and video data in the pipeline to implement features such as virtual background and noise cancellation.

To create the environment necessary to implement virtual background into your app, open the project you created in SDK quickstart for Broadcast Streaming.

This section explains how to enable your users to choose a virtual background.

To enable and change virtual backgrounds, you add a button to the user interface. To do this, open /app/res/layout/activity_main.xml and add the following lines before </RelativeLayout>:

_9

<Button

_9

android:id="@+id/BackgroundButton"

_9

android:layout_width="wrap_content"

_9

android:layout_height="wrap_content"

_9

android:layout_below="@+id/LeaveButton"

_9

android:layout_alignStart="@id/remote_video_view_container"

_9

android:layout_alignEnd="@id/remote_video_view_container"

_9

android:onClick="setVirtualBackground"

_9

android:text="Set virtual background" />

1. Import the required Agora libraries

   Add the following statements after the last import statement in /app/java/com.example.<projectname>/MainActivity.

   
   

   _2

   import io.agora.rtc2.video.VirtualBackgroundSource;

   _2

   import io.agora.rtc2.video.SegmentationProperty;

   
   

2. Define variables to keep track of the virtual background state

   In the MainActivity class, add the following declarations:

   
   

   _2

   int counter = 0; // to cycle through the different types of backgrounds

   _2

   boolean isVirtualBackGroundEnabled = false;

   
   

3. Enable virtual background

   When a user presses the button, you call enableVirtualBackground to enable background blur. When the user presses the button again, you change the virtual background to a solid color. On the next button press, you set a .jpg or .png image as the virtual background. To specify these background effects, you configure virtualBackgroundSource and SegmentationProperty. To do this, add the following method to the MainActivity class:

   
   

   _37

   public void setVirtualBackground(View view){

   _37

   counter++;

   _37

   if (counter > 3) {

   _37

   counter = 0;

   _37

   isVirtualBackGroundEnabled = false;

   _37

   showMessage("Virtual background turned off");

   _37

   } else {

   _37

   isVirtualBackGroundEnabled = true;

   _37

   }

   _37

   _37

   VirtualBackgroundSource virtualBackgroundSource = new VirtualBackgroundSource();

   _37

   _37

   // Set the type of virtual background

   _37

   if (counter == 1) { // Set background blur

   _37

   virtualBackgroundSource.backgroundSourceType = VirtualBackgroundSource.BACKGROUND_BLUR;

   _37

   virtualBackgroundSource.blurDegree = virtualBackgroundSource.BLUR_DEGREE_HIGH;

   _37

   showMessage("Blur background enabled");

   _37

   } else if (counter == 2) { // Set a solid background color

   _37

   virtualBackgroundSource.backgroundSourceType = VirtualBackgroundSource.BACKGROUND_COLOR;

   _37

   virtualBackgroundSource.color = 0x0000FF;

   _37

   showMessage("Color background enabled");

   _37

   } else if (counter == 3) { // Set a background image

   _37

   virtualBackgroundSource.backgroundSourceType = VirtualBackgroundSource.BACKGROUND_IMG;

   _37

   virtualBackgroundSource.source = "<absolute path to an image file>";

   _37

   showMessage("Image background enabled");

   _37

   }

   _37

   _37

   // Set processing properties for background

   _37

   SegmentationProperty segmentationProperty = new SegmentationProperty();

   _37

   segmentationProperty.modelType = SegmentationProperty.SEG_MODEL_AI;; // Use SEG_MODEL_GREEN if you have a green background

   _37

   segmentationProperty.greenCapacity = 0.5F; // Accuracy for identifying green colors (range 0-1)

   _37

   _37

   // Enable or disable virtual background

   _37

   agoraEngine.enableVirtualBackground(

   _37

   isVirtualBackGroundEnabled,

   _37

   virtualBackgroundSource, segmentationProperty);

   _37

   }

   
   

1. Generate a temporary token in Agora Console .

2. In your browser, navigate to the Agora web demo and update App ID, Channel, and Token with the values for your temporary token, then click Join.

3. In Android Studio, open app/java/com.example.<projectname>/MainActivity, and update appId, channelName and token with the values for your temporary token.

4. Connect a physical Android device to your development device.

5. In setVirtualBackground modify the value of virtualBackgroundSource.source to the absolute path of a .jpg or .png image file on your test device.

6. In Android Studio, click Run app. A moment later you see the project installed on your device.

   If this is the first time you run the project, grant microphone and camera access to your app.

7. Press Join to connect to the same channel as your web demo.

8. Press Set virtual background. The background is blurred in the local video of your test device and the remote video of the web demo. You see a message confirming that background blur has been enabled.

9. Press Set virtual background again. The background changes color to a solid blue. You see a message confirming that color background has been enabled.

10. Press the button again. You see an image in the background. You also see a message confirming that background image has been enabled.

11. Press the button again. Virtual background is disabled and the actual background is restored.

This section contains information that completes the information in this page, or points you to documentation that explains other aspects to this product. This section contains information that completes the information in this page, or points you to documentation that explains other aspects to this product.

• enableVirtualBackground
• VirtualBackgroundSource
• SegmentationProperty