Create a React Native Video Calling App Using Twilio

In this post, we are going to build a React Native Android app for Video calls using Twilio.
Let’s get started with Twilio.

Twilio is a cloud based service that enables powerful communication between mobile devices, applications, services, and systems throughout the business in order to bridge the gap between conventional communication.

For that, please create a Twilio account by clicking here.

When you create your account successfully you will be redirected to Dashboard. Now we need the ACCOUNT SID for our application to generate a token as shown below.

To generate a token we also need an API key and a secret key. For that go to Settings > API keys.

Click on plus icon to generate API keys as shown below.

Provide a name and click on Create API Key.

You will get the API key and Secret key as shown below.

You can generate a token by using the code below which uses an npm package.

npm install twilio --save

We can also generate tokens in different languages. For that, we can follow this link. We need to select the video option on the page there. We are using the same code here.

const AccessToken = require('twilio').jwt.AccessToken;
const VideoGrant = AccessToken.VideoGrant;

For every token, we need to change the identity value. We cannot use the same token at two different places.

The other way to create a token is by using Twilio tools by following this link, which resembles the image shown below.

To fetch the token we must provide an identity and a room name.
This was all about the Twilio part of the app.

Installing Dependencies:

Here we are using the React Native starter kit which we can clone by using this github link.
Run the below command in the terminal project directory.

npm install https://github.com/blackuy/react-native-twilio-video-webrtc --save

And replace the code in App.js file with the below code.

App.js:

import React, {
Component
} from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
Button,
TouchableOpacity,
PermissionsAndroid, TouchableHighlight
} from 'react-native';
import {
TwilioVideoLocalView, // to get local view
TwilioVideoParticipantView, //to get participant view
TwilioVideo
} from 'react-native-twilio-video-webrtc';
// make sure you install vector icons and its dependencies
import MIcon from 'react-native-vector-icons/MaterialIcons';
import normalize from 'react-native-normalize';
import MCIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
export async function GetAllPermissions() {
// it will ask the permission for user
try {
// if (Platform.OS === "android") {
const userResponse = await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.CAMERA,
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
]);
return userResponse;
// }
} catch (err) {
console.log(err);
}
return null;
}
export default class Example extends Component {
state = {
isAudioEnabled: true,
isVideoEnabled: true,
isButtonDisplay: true,
status: 'disconnected',
participants: new Map(),
videoTracks: new Map(),
roomName: '',
token: '',
}

componentDidMount() {
// on start we are asking the permisions
GetAllPermissions();
}

We must make sure that we install all the dependencies required by executing the following command inside the project directory.

npm install

Before running this app we need to make some configurations to use Twilio and use camera and audio.

To make those goto android folder and in settings.gradle file add the following two lines.

include ':react-native-twilio-video-webrtc'
project(':react-native-twilio-video-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-twilio-video-webrtc/android')

In android > app > build.gradle file , Search for dependencies and add the below code inside the block.

compile project(':react-native-twilio-video-webrtc')

In android > app > src > main > java > com > reactnativestarter > MainApplication.java add the below line.

import com.twiliorn.library.TwilioPackage;

And replace the getPackages() method with below code.

@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();

// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new TwilioPackage());

return packages;
}

Now we need to modify AndroidManifest.xml for requesting the permissions to the user.
Add the below code in AndroidManifest.xml file.

And also make sure that the client side room creation is enabled in your twilio account as shown in the below image.

Running the App:

Run the application by executing the react-native run-android command from the terminal window.

Below are the screenshots of the app running on two different android devices.

Thanks for the read!

This story is authored by Dheeraj Kumar and Santosh Kumar. Dheeraj is a software engineer specializing in React Native and React based frontend development. Santosh specializes in Cloud Services based development.

Originally published at http://blog.zenof.ai.

ZenOf.AI

AI | Machine Learning | Big Data