React Native Video UIKit helps you develop a Video UI quickly without having to read through vast React Native SDK Documentation and handling all complexities that comes along the development process. It provides easy way to get started with a Video UI for Hybrid Apps.

Install through NPM. v1.0
Released: August 22, 2022

Table of Contents

Overview

EnableX introduces React Native Video UIKit to help integrating EnableX Video quickly into your React Native App. React Native Video UIKit is a wonderful Framework for Video Application Development for Android and iOS Platform (Phone, Tab etc.) with many customization options to meet your requirement.

You code less, only 3 lines of Code does all the magic of getting a video communication done. Thus, using UIKit helps you get a seamless Video UI with all Device Support in almost 95% reduced effort and time.

How to use React Native Video UIKit?

Follow the given steps:

  • Open Terminal.
  • Go to React Native Project directory.
  • Run the following command to install React Native UI Kit:
npm install enx-uikit-react-native 
  • Run the following command to install React Native Video SDK:
npm install enx-rtc-react-native 

Requirement

  • Vscode and Android Studio (Recommended to use Latest version).
  • Enablex Developer Account (Sign up).
  • A valid token to join room.
  • XCode (Recommended to use Latest version).
  • An iOS or Android Device for testing the Application.
  • Basic understanding of React Native development.

Define Device Permissions

For Android: Open the AndroidManifest.xml file and add the required device permissions to the file. 

<manifest> 
... 
<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.RECORD_AUDIO" /> 
<uses-permission android:name="android.permission.CAMERA" /> 
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  
... 
</manifest> 

After adding the permission in AndroidManifest.xml file, do code in your app level to show dialog to grant permissions. 

For iOS: Open info.plist and add NSCameraUsageDescription and NSMicrophoneUsageDescription. This is needed to add permission into your application.

Now go to your project folder through terminal > iOS > and install POD using the following command:

pod install

Initializing the Enx React Native UIKit 

To use React Native UIKit SDK, install it using npm first and then import EnxVideoView into your App using command given below and pass Token to EnxVideoView.

import {EnxVideoView} from "enx-uikit-react-native" 

<EnxVideoView 
	token={tokenObj} 
	embedUrl= {URL of Video Embed to get Config Info} 
	setting = {this.state.setting} 
	onDisconnect = {this.onDisconnect}  
	connectError = {this.connectError} 
	customButtonHandler = {this.customButtonHandler} 
/> 
  • token: Use EnableX Video Room Token to join Video Session. Refer How to Create Token?
  • embedUrl: Use URL of Low Code Video Embed to get Configuration Information in case you look to get Embed Tool Settings imported into the UIKit.
  • setting: Settings of Topbar and Bottombar in the Video Session Interface. Use true to enable a feature, false otherwise. Also, use Color Code for different elements as needed. Example given below:
setting: [ 
	/* Enable Tools in Bottombar */
	bottomOption=[ 
		{	AUDIO: true	}, 
		{	VIDEO: true	}, 
		{	SWITCH_CAMERA: true },
		{	SWITCH_AUDIO: true }, 
		{	GROUP_CHAT: true }, 
		{	DISCONNECT: true },
		{	CUSTOM_BUTTON: true, 
			imagePath: require('./image_asset/recording_on.png')
		} 
	], 
	/* Enable Tools in Topbar */
	topOption=[ 
		{	USER_LIST: true	}, 
		{	MENU: true	} 
	], 
	bottomBarColor={ 
		COLOR: '#FF0000' 
	}, 
	topBarColor={ 
		COLOR: '#FF0000' 
	} 
] 
  • onDisconnect: Get notified when user gets disconnected from Video Room.
  • connectError: Get notified when user fails to connect to Video Room.
  • customButtonHandler: To handle event for the custom button.

Features

  • For Participants and Moderators
    • Mute Self-Audio
    • Mute Self-Video
    • Switch Camera
    • Switch Audio Device
    • Group and Private Chat
    • Participant List
    • Switch Audio Device
    • Disconnect Call
  • For Moderators only
    • Record Session
    • Mute Room
    • Mute Participant-Audio
    • Mute Participant-Video
    • Drop Participant from room