Prerequisites:
I will divide whole process in following three parts:
Before starting, let’s first create react-native app.
Make one server folder.
So let’s start with the first part.
Go to you Twilio console (click here to go to your console). We need to generate an API key and for that go to Settings > API keys. Then click on the plus icon.
Now give any friendly name and then click on Create API Key button. After that you will get the API key and Secret key. Copy them as well as copy ACCOUNT_SID from console and paste them at some safe place. We need them to generate tokens from the server. Here we are done with the first part, now we will work on our backend server.
Now from root folder, copy and paste following commands in the terminal. It will download the required packages.
git init -y && yarn add express nodemon dotenv twilio ngrok
Now make following changes in package.json file.
Now make one new file and name it as .env which will contain all of our API keys. So copy and paste all of your Twilio API keys like below:
Next step is to make index.js file which will contain our logic to generate Twilio tokens for participants to join a room. We will first import all of our packages that we downloaded. After that we will config our .env file.
After that we are taking out AccessToken
and VideoGrant
form twilio
package. AccessToken
will be used for generating JWT token.
Then we are making one route that is /getToken
, which accepts a get request and returns a JWT token. To generate a JWT token we need a username and if that is not provided then server will respond with status code 400 and an error message. After taking username from the query, we will provide all of our keys which are stored in .env
file to AccessToken
. And then we are providing username as identity to that AccessToken
. After that we’ll convert that AccessToken
to a JWT token and sending that back to the client.
Here’s the full code for index.js file.
so here our part two is also completed! Now we will move to part 3.
Come to your root folder in terminal and download following packages. You can copy and paste.
yarn add @react-navigation/native @react-navigation/stack react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view react-native-permissions react-native-twilio-video-webrtc axios react-native-vector-icons
Note* : Make sure to do react-native link react-native-vector-icons
after downloading packages.
Now before we start coding, we need to do little setup in-order to Twilio to work in our app.
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/ Folly .pods pec'
// We add the following code
permissions_path = '../node_modules/react-native-permissions/ios' pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec" pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone.podspec" // End of added code
target 'reactNativeVideoCallTests' do
iOS > ${YOUR_PROJECT_NAME} > info.plist
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')
android > app > build.gradle
, we tell gradle to implement this package:android > app > src > main > java > com > twiliointegration > MainApplication.java
and import following package:We are done with required setup, now we will start coding, so now overwrite App.js file with following:
Basically we are setting up navigation in our app. We have two pages one is home screen and second is video screen.
Next is Home screen: In this screen we will first get the permission of camera and mic from the user. Function getPermission
is responsible for getting the required permission.Next we will have a function that sends a get request to our server. Server will return a JWT token.
Complete code for Home screen:
Next we will work on video call screen. Following is the code for video call screen.
So far we are done with the both the screens now we need to write code for permission handler. Following is the code for handling permissions:
Now we are done with the complete code. You can run you server and app and check you app.
Here’s the GitHub Repo for this project: mishivam/react-native-twilio-integration (github.com)
This is where we share our knowledge and insights. Our aim is to impart industry insights to help our website visitors take away valuable information.
Explore More Blog ⟶