Skip to content

This is a step-by-step guide to to integrate EnableX Video SDK into your React Native Application for implementation of real time Video Calls. Begin with installing Node.js, Xcode (for Mac users), and Android Studio.

Notifications You must be signed in to change notification settings

EnableX/enx-rtc-react-native

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

EnableX Click2Call Application: Simplify Voice Communication with Dialer SDK for Real-Time Calls

Getting started

Prerequisites:

  1. Install node.js

  2. Install and update Xcode (you will need a Mac)

  1. Install and update Android Studio

Installation:

$ npm install enx-rtc-react-native --save

Mostly automatic installation

$ react-native link enx-rtc-react-native

IOS Installation

Note: Please make sure to have CocoaPods on your computer. If you've installed this package before, you may need to edit your Podfile and project structure because the installation process has changed.

  1. In your terminal, change into the ios directory of your React Native project.

  2. Create a pod file by running: pod init.

  3. Add the following to your pod file:

target '<YourProjectName>' do

# Pods for <YourProject>
pod 'EnxRTCiOS'
pod 'Socket.IO-Client-Swift', '~> 15.0.0'
end

  1. In case if you want Autolinking then don't do step 3. Add following in podfile: ... pod 'enx-rtc-react-native', :path => '../node_modules/enx-rtc-react-native/ios/RNEnxRtc.podspec' ...

  2. Now run, pod install

  3. After installing the EnxRTCiOS SDK, change into your root directory of your project.

  4. Now run, react-native link enx-rtc-react-native.

  5. Open <YourProjectName>.xcworkspace contents in XCode. This file can be found in the ios folder of your React Native project.

  6. Click File and New File

  7. Add an empty swift file to your project:

  • You can name this file anything i.e: EnxInstall.swift. This is done to set some flags in XCode so the Swift code can be used.
  1. Click Create Bridging Header when you're prompted with the following modal: Would you like to configure an Objective-C bridging header?

  2. Ensure you have enabled both camera and microphone usage by adding the following entries to your Info.plist file:

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

If you try to archive the app and it fails, please do the following:

  1. Go to Target
  2. Click on Build Phases
  3. Under the Link Binary With Libraries section, remove the libEnx.a and add it again

Android Installation

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.rnenxrtc.EnxRtcPackage; to the imports at the top of the file
  • Add new EnxRtcPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:

    include ':enx-rtc-react-native'
    project(':enx-rtc-react-native').projectDir = new File(rootProject.projectDir, 	'../node_modules/enx-rtc-react-native/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:

      compile project(':enx-rtc-react-native')
    
  3. Add following permisions in Android Manifest file:

     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
     <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <uses-permission android:name="android.permission.BLUETOOTH" />
     <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
    

Usage

import Enx from 'enx-rtc-react-native';

// TODO: What to do with the module?
Enx;

Extra Notes

Check ExtraNotes file in case of any issue.

Trial

Try a quick Video Call: https://try.enablex.io/
Sign up for a free trial https://www.enablex.io/free-trial/

About

This is a step-by-step guide to to integrate EnableX Video SDK into your React Native Application for implementation of real time Video Calls. Begin with installing Node.js, Xcode (for Mac users), and Android Studio.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •