opentok-react-native
![OpenTok Labs](https://d26dzxoao6i3hh.cloudfront.net/items/0U1R0a0e2g1E361H0x3c/Image%202017-11-22%20at%2012.16.38%20PM.png?v=2507a2df)
React Native library for OpenTok iOS and Android SDKs
In this repo, you'll find the OpenTok React Native library:
Pre-Requisites:
-
Install node.js
-
Install and update Xcode (you will need a Mac)
- Install and update Android Studio
Installation:
-
In your terminal, change into your React Native project's directory
-
In your terminal, run npm install opentok-react-native
iOS Installation
Note Please make sure to have CocoaPods on your computer.
-
In you terminal, change into your ios
directory.
-
Create a pod file by running: pod init
.
-
Add the following to your pod file:
platform :ios, '9.0'
target '<YourProjectName>' do
use_frameworks!
# Pods for <YourProject>
pod 'OpenTok'
end
-
Now run, pod install
-
Open XCode
-
Open <YourProjectName>.xcworkspace
file in XCode. This file can be found in the ios
folder of your React Native project.
-
Click File
and Add Files to
-
Add the following files from ../node_modules/opentok-react-native/ios
to the project:
OTPublisher.h
OTPublisher.m
OTPublisherManager.swift
OTPublisherView.swift
OTRN.swift
OTScreenCapturer.swift
OTSessionManager.m
OTSessionManager.swift
OTSubscriber.h
OTSubscriber.m
OTSubscriberManager.swift
OTSubscriberView.swift
-
Click Create Bridging Header
when you're prompted with the following modal: Would you like to configure an Objective-C bridging header?
-
Add the contents from the Bridging-Header.h
file in ../node_modules/opentok-react-native/ios
to <YourProjectName>-Bridging-Header.h
-
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>
Android Installation
-
In you terminal, change into your project directory.
-
Run react-native link opentok-react-native
-
Open your Android project in Android Studio.
-
Add the following to your project build.gradle
file:
maven {
url "http://tokbox.bintray.com/maven"
}
- It should look something like this:
![](https://dha4w82d62smt.cloudfront.net/items/1W1p0Z27471J210d3M2r/Image%202018-03-08%20at%202.12.38%20PM.png?X-CloudApp-Visitor-Id=2816462&v=8ce583bb)
-
Sync Gradle
-
Make sure the following in your app's gradle compileSdkVersion
, buildToolsVersion
, minSdkVersion
, and targetSdkVersion
are the same in the OpenTok React Native library.
-
As for the older Android devices, ensure you add camera and audio permissions to your AndroidManifest.xml
file:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
<uses-feature android:name="android.hardware.microphone" android:required="true" />
Newer versions of Android–API Level 23
(Android 6.0)–have a different permissions model that is already handled by this library.
Samples
To see this library in action, check out the opentok-react-native-samples repo.
Contributing
If you make changes to the project that you would like to contribute back then please follow the contributing guidelines. All contributions are greatly appreciated!