Use Virtual Backgrounds with the Agora React Native SDK

The Agora React Native SDK now supports using virtual backgrounds. You can use a solid color or pick an image for the background. We’ll take a look at how to bundle an image asset with React Native and how to select a user image to use as a virtual background.

Prerequisites

• An Agora developer account (It’s free! Sign up here)
• A basic understanding of React Native

To get us up to speed with a basic video calling app, let’s use this demo. You can follow the instructions in the readme to get the app working on your device. We’ll go over the code for using virtual backgrounds. You can find the source for this demo on GitHub.

We’ll need two open-source libraries: react-native-image-picker and react-native-fs. You can add them to the project by executing npm i --save react-native-image-picker react-native-fs

Using Virtual Backgrounds

The Agora SDK makes it really easy: you just call the enableVirtualBackground method on the engine object with your config to enable the feature. You don’t have to worry about things like segmentation or background removal.

We’ll define a property on our App class called virtualSource to create and store our config. We’ll add a waiting boolean to our state so that we can disable the start call button while the async code is being executed.

We can define a function useColor, that uses the Color class constructor to create a color object using the passed red, green and blue values (color range is 0 — 255). We can then update the virtualSource property and our state.

Using Background Blur

To bundle an image, you can copy it to the project directory and reference it using the required syntax. We can download the image using its URI while testing with RNFS. We can then update the source property of the config with the absolute path of the image.

Using a user image as the virtual background

We can use launchImageLibrary from react-native-image-picker to get access to the image URI. We handle accessing the image based on the OS and pass in the absolute path to the image to the config.

Finally, we can update our startCall function to enable the virtual background before joining a channel:

Conclusion

With the Agora SDK and open-source libraries, it’s really easy to add virtual backgrounds to your video calls and live streams. There are other cool features that you can find in the API Reference. You can read about how to build a video call app in just a few lines of code here.

I invite you to join the Agora Developer Slack community. Feel free to ask any questions about the project in the #react-native-help-me channel.