How to Build a React Native Video Calling App Using Agora.io

Date
December 2, 2019 Posted By
Agora Superstar Categories
Share with:

This blog was written by Ekaansh Arora, an Agora Superstar. The Agora Superstar program empowers developers around the world to share their passion and technical expertise, and create innovative real-time communications apps and projects using Agora’s customizable SDKs. Think you’ve got what it takes to be an Agora Superstar? Apply here: https://www.agora.io/en/superstars-program/

Adding video streaming functionality within a React Native application from scratch can be a daunting task that some might think impossible. Maintaining low-latency, load balancing, and managing user event states can be incredibly tedious. On top of that, people have to maintain cross-platform compatibility.

Well, there’s an easy way to solve all these issues. In this article, I will guide you to build a React Native video calling app by utilizing the magic of Agora’s Video SDK. We’ll go over the structure, setup, and execution of the app before diving into the logistics. You can get a cross-platform video call app going in few simple steps within a matter of minutes.

We’ll be using the Agora RTC SDK for React Native for the example below.

Creating an account with Agora

Sign up on https://dashboard.agora.io/en/signup and login to the dashboard. Navigate to the project list tab under projects and create a new project by clicking the green button as shown below.
Create a new project and retrieve the App ID. This will be used to authorize your requests while developing the application.

Structure of our example

This would be the structure of the application that we are looking at.
index.js
.
├── android
├── components
│ ├── Home.js
│ └── permission.js
│ └── Router.js
│ └── Video.js
├── ios
├── index.js
.

Let’s run the app

You’ll need to have the latest version of Node.js and NPM/Yarn installed.
  • Make sure you’ve registered an Agora account, setup up a project and generated an App ID.
  • Download and extract the zip file from master branch.
  • Run npm install or use yarn to install the app dependencies in the unzipped directory.
  • Navigate to ./components/Home.js and edit line 13 to enter your App ID that we generated as AppID: 'YourAppIDGoesHere'
  • Open a terminal and execute react-native link react-native-agora and react-native link react-native-vector-icons. This links the necessary files from your native modules.
  • Connect your device and run react-native run-android / react-native run-ios to start the app. Give it a few minutes to do its magic.
  • Once you see the home screen on your mobile (or emulator) enter a channel name and hit submit on the device.
  • Use the same channel name on a different device.
  • That’s it. You should have a video call going between the two devices.
The app supports up-to 5 people for now, but this can be extended simply by adding more view layouts in ./components/Video.js

Getting to how it works

permission.js

I’m using a basic function and exporting it to use it later on to request for camera and microphone permissions from the OS on android.

Router.js

We’re using react native router flux to navigate between landing page and video-call screen easily. We set up the two scenes as mentioned home and video.

Home.js

We have our required import statements and we set up our class based component Home. We define our App ID and Channel Name as state variables. We call the function from permission.js to get access to camera and mic.

Home component will be our landing screen when our app is launched.

It will have two fields to enter user App ID, Channel Name and a button to submit the data and start the call.

Next, we define a handleSubmit function to get input values and pass them to the Video.js component which is activated using the Router.js component. After that, we define the view and the styles for it. Then, we export our component to use with the router.

Video.js

We write the used import statements and define the Agora object as a native module and set the defaults from it.

We define the class based video component. In the constructor, we set our state variables, peerIds (array of connected peers), and uid (local user’s unique id), appid (agora app id), channelName, vidMute (True to mute local user’s video, False otherwise), and similarly, audMute for audio.

We set up our video stream configuration in const config and initialize the RTC engine, by calling RtcEngine.init(config).

Before we bring together the components, we define functions to execute user events, i.e. when a new user joins the call, we add their uid to the array; when user leaves the call, we remove their uid from the array; if the local users successfully joins the call channel, we start the stream preview.

We define functions to toggle audio and video feeds of the local user and to end the call by leaving the channel.

Next we define the view for different possible number of users; we start with 4 external users on the channel and move down to no users using conditional operator. We call this function inside our render method. We define styles for our internal components and export our component Video to use with the router.

That’s it, that’s how the app works. You can use pretty much the same execution to add multi-user video-calling in your own React Native application using Agora’s RTC SDK.