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.
- 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
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:
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