1-to-1 RTC: A Sample React Native App with EnableX React Native Toolkit
This is a Sample React Native App demonstrates the use of EnableX platform Server APIs and React Native Toolkit to build 1-to-1 RTC (Real-Time Communication) Application. It allows developers to ramp up on app development by hosting on their own devices.
This App creates a virtual Room on the fly hosted on the Enablex platform using REST calls and uses the Room credentials (i.e. Room Id) to connect to the virtual Room as a mobile client. The same Room credentials can be shared with others to join the same virtual Room to carry out an RTC session.
EnableX Developer Center: https://developer.enablex.io/
1. How to get started
1.1 Prerequisites
1.1.1 App Id and App Key
- Register with EnableX [https://portal.enablex.io/cpaas/trial-sign-up/]
- Create your Application
- Get your App ID and App Key delivered to your email
1.1.2 Sample React Native Client
- Clone or download this Repository [https://github.com/EnableX/One-to-One-Video-Calling-Open-Source-React-Native-Application.git]
1.1.3 Test Application Server
You need to set up an Application Server to provision Web Service API for your React Native Application to enable Video Session.
To help you to try our React Native Application quickly, without having to set up Applciation Server, this Application is shipped pre-configured to work in a "try" mode with EnableX hosted Application Server i.e. https://demo.enablex.io.
Our Application Server restricts a single Session Duations to 10 minutes, and allows 1 moderator and not more than 3 participants in a Session.
Once you tried EnableX React Native Sample Application, you may need to set up your own Application Server and verify your Application to work with your Application Server. Refer to point 2 for more details on this.
1.1.4 Configure React Native Client
- Open the App
- Go to EnxJoinScreen.js and change the following:
/* To try the App with Enablex Hosted Service you need to set the kTry = true When you setup your own Application Service, set kTry = false */
public static final boolean kTry = true;
/* Your Web Service Host URL. Keet the defined host when kTry = true */
const kBaseURL = "https://demo.enablex.io/"
/* Your Application Credential required to try with EnableX Hosted Service
When you setup your own Application Service, remove these */
const kAppId = "App_id"
const kAppkey = "App_key";
Note: The distributable comes with demo username and password for the Service.
1.2 Test
1.2.1 Open the App
- Open the App in your Device. You get a form to enter Credentials i.e. Name & Room Id.
- You need to create a Room by clicking the "Create Room" button.
- Once the Room Id is created, you can use it and share with others to connect to the Virtual Room to carry out an RTC Session.
Note:- In case of emulator/simulator your local stream will not create. It will create only on real device.
2 Server API
EnableX Server API is a Rest API service meant to be called from Partners' Application Server to provision video enabled meeting rooms. API Access is given to each Application through the assigned App ID and App Key. So, the App ID and App Key are to be used as Username and Password respectively to pass as HTTP Basic Authentication header to access Server API.
For this application, the following Server API calls are used:
- https://www.enablex.io/developer/video-api/server-api/rooms-route/#get-rooms - To get list of Rooms
- https://www.enablex.io/developer/video-api/server-api/rooms-route/#get-room-info - To get information of the given Room
- https://www.enablex.io/developer/video-api/server-api/rooms-route/#create-token - To create Token for the given Room
To know more about Server API, go to: https://www.enablex.io/developer/video-api/server-api
3 React Native Toolkit
React Native App to use React Native Toolkit to communicate with EnableX Servers to initiate and manage Real Time Communications.
3.1 Platform oriented Dependency Installation
3.1.1 iOS dependency
- Step 1: In your terminal, change into the
ios
directory of your React Native project. - Step 2: Now run,
pod install
- Step 3: Change root directory of your Project
- Step 4: Now run,
react-native link enx-rtc-react-native
. - Step 5: Run pod install in iOS project folder
- Step 5: Disable Bitcode in Build Settings for pod 'EnxRTCiOS' and 'enx-rtc-react-native' NOTE: Make sure you are using EnxRTCiOS version 1.5.6 else pod update.
3.1.2 Android dependency
After installing nodemodules, change the manifest file of react-native-navigation in android Project, because of 3rd party dependency issue as follows:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.reactnativenavigation">
<uses-sdk tools:overrideLibrary="com.shazam.android.widget.text.reflow"/>
<application>
<activity
android:name="com.facebook.react.devsupport.DevSettingsActivity"
android:exported="false"/>
</application>
</manifest>
4 Application Walk-through
4.1 Create Token
We create a Token for a Room Id to get connected to EnableX Platform to connect to the Virtual Room to carry out an RTC Session.
To create Token, we make use of Server API. Refer following documentation: https://www.enablex.io/developer/video-api/server-api/rooms-route/#create-token
4.2 Connect to a Room, Initiate & Publish Stream
We use the Token to get connected to the Virtual Room. Once connected, we intiate local stream and publish into the room. Refer following documentation for this process: https://www.enablex.io/developer/video-api/client-api/react-native-toolkit/room-connection/
4.3 Play Stream
We play the Stream into EnxPlayerView Object.
<EnxPlayerView
key={String(element.streamId)}
streamId={String(element.streamId)}
style={{ width: width, height: height }}
/>
4.4 Handle Server Events
EnableX Platform will emit back many events related to the ongoing RTC Session as and when they occur implicitly or explicitly as a result of user interaction. We use Call Back Methods to handle all such events.
/* Example of Call Back Methods */
/* Call Back Method: onRoomConnected
Handles successful connection to the Virtual Room */
roomConnected: event => {
/* You may initiate and publish stream */
}
/* Call Back Method: onRoomError
Error handler when room connection fails */
roomError: event => {
/* Room Error */
}
/* Call Back Method: onStreamAdded
To handle any new stream added to the Virtual Room */
streamAdded: event => {
/* Subscribe Remote Stream */
}
/* Call Back Method: onActiveTalkerList
To handle any time Active Talker list is updated */
activeTalkerList: event => {
/* Handle Stream Players */
}
5 Trial
Try a quick Video Call: https://try.enablex.io/ Sign up for a free trial https://portal.enablex.io/cpaas/trial-sign-up/
6 NOTE
If you are using downgraded version of react-native (0.60.5),Or you find any error like this:
Native Module EnxRoomManager tried to override EnxRoomManager. Check the getPackages() method in MainApplication.java.
then kindly follow the below steps also, so that everything will work perfectly:
After running command npm install,
- Go to the nodemodules folder in your app
- Go to the enx-rtc-reat-native folder
- Find nodemodules folder in enx-rtc-react-native folder and delete it
- After that sync up your project files.