Video Calls in React Native backed by Twilio

Twilio is widely known within the software development field as the pioneer in Cloud Communications Platforms. It provides a powerful set of programmable communication services like voice, video, SMS, AI bots, and most recently, emails (after the acquisition of Sendgrid). In the development process, these services allow us to work on features like phone verification, account recovery, in-app chat, or even in-app video calls.

In this article, we are going to be building a React Native demo app with an in-app video call functionality provided by Twilio Programmable Video. This will require existing knowledge on React, React Native, Cocoapods, and React Native Navigation.

Twilio provides both JavaScript and IOS/Android SDKs. But when talking about React Native, there is no direct support from Twilio. We can use the JavaScript SDK for some services but for others (like Facebook SDK) this isn’t possible, as this relies heavily on browser APIs, and that could not be replicated by developing a polyfill or a shim. Another alternative would be to port the native Android/IOS SDK to React Native. For this demo we will use this package: Twilio Video (WebRTC) for React Native.

The package, which is currently active and maintained by the community, implements Twilio’s WebRTC video functionality of the Native IOS/Android Twilio SDK and exposes it to the JavaScript bridge to be used on the React Native project.

Let’s get started: the first thing to do is to sign up for a trial on Twilio and verify both email and phone number. After that, go to the programmable video dashboard and click on Show API Credentials. From here, copy and save the Account SID. Then, in the programmable video API keys section, click on the plus button to generate new API keys to be used on our custom server to provide user authentication on the frontend before accessing the video call. Save these keys securely for later.

Now that we are done with the Twilio configuration, let’s initialize the React Native project and install React Navigation, dotenv, and the Twilio package:

As we added react-native-dotenv, we need to register it on the babel.config.js to avoid issues while running:

Regarding the IOS platform configuration and native dependencies, before we install the pods, we need to increment the IOS target to 11 on the Podfile. This is necessary because Twilio’s Native Video SDK only has support for iOS 11.0+:

We also need to set the required permissions on the app by adding the react-native-permissions dependency on the Podfile and then adding the permissions request text in the Info.plist:

Now we are ready to install the pod dependencies and start the app. React Native will autolink them to the IOS project, so there is no need to worry about anything else.

On Android, besides giving the required permissions, we need to do extra steps, because we need to link the Twilio package manually. To add the permissions, we add the following to the AndroidManifest.xml:

To add the Twilio package, we add the reference in the file android/settings.gradle as follows:

On the android/build.gradle, we also increase the minimum supported Android version, due to a known bug when compiling the latest Twilio native package:

Also, on the android/app/build.gradle, we tell gradle to implement this package:

‍

Finally, we expose the native dependency to React Native by adding it in the MainApplication.java:

‍
Now we can start the app on Android as follows:

Once we have the default app up and running on both platforms with the required dependencies, we’re ready to add our server, which will be serving Twilio client tokens based on users who want to join the video call. We do this by creating a new folder called server and initializing a NodeJS project inside it, with a few dependencies required to compile, serve a REST endpoint, and add the Twilio logic to fetch a user access token:

To get the server up and running, we need to create the following:
A server/.babelrc file to configure Babel:

A start script in the package.json:

A server/.env file to set the Twilio API key we generated earlier, along with the Twilio Account SID and the service port:

Finally, we add the server logic to a server/index.js file to get our endpoint functionality:

Basically, we are exposing a single GET endpoint called getToken, which receives a userName parameter and generates and returns an access token for this user with video grants on our video service.

To run the server, we just call the start script. That will give us the public URL of the REST API we need to use on the frontend:

‍

Now, moving to the React Native part: in order to integrate this server, let’s create an .env file on the root folder with the following:

Then we override the App.js with the following:

This code serves an App with two screens:

- The first screen handles permissions to access the camera and microphone for both platforms. It will also request a user name and room name, and generate a proper user access token to be used on the video call when redirecting to the next screen.

- The second screen implements the Twilio WebRTC package with the user access token and the selected room name. A scaled local camera feed is displayed on the bottom right, along with some action buttons that can disable, mute, or flip the camera. After the other party joins the call, their camera feed will be displayed on the screen below the local feed and action buttons.

Before running the app, remember that the IOS/Android simulator does not provide a camera integration, so in order to test properly, we should run the app in the actual devices. We can do this by executing the following commands with the connected devices: For IOS:

For Android:

The deviceId can be obtained by checking connected devices with adb:

On the first screen, we need to enter a user name and a room name to join, and then press Connect to Video Call. Just remember to use the same room name on both devices so they can see each other.

Then, on the second screen, the library will connect to Twilio Video Service using the access token and it will trigger the respective call events that are handled within our app.

To summarize, we just created a simple React Native app to illustrate video call capability using Twilio, as well as highlighting this great Twilio WebRTC library for React Native.

Something to keep in mind is that this is far from a production architecture. This is because some things like user access token generation, user connections, room creation, and those extra flows around the call and users should be handled properly on the backend.

The source code created on this tutorial can be found on https://github.com/ReyRod/reactNativeVideoCall

‍