React Native Video UIKit – EnableX Developer Centre

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.2
Released: October 7, 2022

Overview
What’s New in v1.2?
How to use
Features

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.

What’s new with React Native UIKit v1.2?

Participant List: Configuration options for Participant List with optional call-to-actions against each participants, e.g. Audio/Video Hard Mute, Force Disconnect, Private Chat etc.
File Share: Users can now share files among everyone or private with other specific users in-session.
Annotation: Android users can now annotate on stream and receive annotations by others whereas iOS users can only receive annotation by others.
Canvas Streaming: Canvas Object Streaming features is also available now.
Screen Share: Android users now can present Screen Share and view others share, whereas iOS users can only receive screen shared by others.

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.

Customize Participant List with Options

You can configure the participant list with few optional action items as per your need. To enable these, put “true” against each and the enabled action will be made available against each participant in the Participant List.

To configure pass the following array in setting:

participantOption=[ 
	{VIDEO: true},		// To enable hard stop Video
	{AUDIO: false},		// To enable hard mute Audio 
	{CHAT: true},		// To enable Private Chat
	{DISCONNECT: true},	// To enable force disconnect 
]

Given below overall setting array:

setting: [ 
	participantOption=[ 
		{VIDEO: true},		// Enable hard stop Video
		{AUDIO: false},		// Enable hard mute Audio 
		{CHAT: true},		// Enable Private Chat
		{DISCONNECT: true},	// Enable force disconnect 
	],

	bottomOption=[ 
		{SWITCH_CAMERA:true},	// Enable Switch Camera
		{VIDEO: true},		// Enable Video Mute
		{AUDIO: true},		// Enable Audio Mute
		{SWITCH_AUDIO:true},	// Enable Switch Mic
		{GROUP_CHAT:true},	// Enable Group Chat
		{DISCONNECT: true},	// Enable Disconnect
		{	CUSTOM_BUTTON:false,
			imagePath:require('./image_asset/recording_on.png')
		} 
	], 

	topOption=[ 
		{USER_LIST:true},	// Enable Participant List
		{MENU:true},		// Enable Menu
	], 

	bottomBarColor={ 
		COLOR:'#D3D3D3'		// Bottombar Color
	}, 

	topBarColor={ 
		COLOR:'#D3D3D3'		// Topbar Color
	}, 
]

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
- Annotation
- Screen Share
- Canvas Streaming
For Moderators only
- Record Session
- Mute Room
- Mute Participant-Audio
- Mute Participant-Video
- Drop Participant from room

Table of Contents