Apps written with the OpenTok React Native SDK 2.27+ can interoperate with OpenTok apps written with version 2.25+ of the OpenTok client SDKs:
The OpenTok React Native SDK is built on top of the OpenTok Android SDK and iOS SDK. For details, see the following:
In your terminal, change into your React Native project's directory
Add the library using npm
or yarn
.
npm install opentok-react-native
yarn add opentok-react-native
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.
In you terminal, change into the ios
directory of your React Native project.
Create a pod file by running: pod init
.
For React Native < 0.60, add this to your Podfile:
target '<YourProjectName>' do
# Pods for <YourProject>
pod 'OTXCFramework', '2.27.0'
end
Now run, pod install
After installing the OpenTok iOS SDK, change into your root directory of your project.
For React Native < 0.60, now run react-native link opentok-react-native
.
Open <YourProjectName>.xcworkspace
contents in XCode. This file can be found in the ios
folder of your React Native project.
Click File
and New File
Add an empty swift file to your project:
OTInstall.swift
. This is done to set some flags in XCode so the Swift code can be used.Click Create Bridging Header
when you're prompted with the following modal: Would you like to configure an Objective-C bridging header?
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:
In your terminal, change into your project directory.
If you have already run react-native link opentok-react-native
for the iOS installation, please skip this step.
react-native link opentok-react-native
Open your Android project in Android Studio.
Sync Gradle
Make sure the following in your app's gradle compileSdkVersion
, buildToolsVersion
, minSdkVersion
, and targetSdkVersion
are greater than or equal to versions specified 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.
Bintray support has ended (official announcement: https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/). In your app build.gradle file you need to remove reference to jcenter
and replace it with mavenCentral
. Example:
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
...
repositories {
google()
mavenCentral()
}
...
}
allprojects {
repositories {
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
mavenCentral {
// We don't want to fetch react-native from Maven Central as there are
// older versions over there.
content {
excludeGroup "com.facebook.react"
}
}
google()
maven { url 'https://www.jitpack.io' }
}
}
This simplest use of these opentok-react-native componenents:
<OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
<OTPublisher style={{ width: 100, height: 100 }}/>
<OTSubscriber style={{ width: 100, height: 100 }} />
</OTSession>
Replace your-api-key
, your-session-id
, and your-session-token
with your
OpenTok project API key,
an OpenTok session ID,
and a token for the session.
Note that you add the OTPublisher and OTSubscriber components and children of
the OTSession component. Use the style
and className
properties to use CSS
to adjust publisher and subscriber layout.
The OpenTok React Native library provides a React interface for using the OpenTok Android and iOS client SDKs. The following advanced features of the OpenTok Android and iOS client SDKs are unsupported in the OpenTok React Native library:
Custom audio drivers -- An application using OpenTok React Native use the device microphone
to capture audio to transmit to a published stream. And it uses the device speakers (or headphones)
to play back audio from subscribed streams. However, you can set the enableStereoOutput
property
of the OTSession object to enable stereo output.
Custom video capturers -- (BaseVideoCapturer) -- The OpenTok React Native OTPublisher uses
the standard video capturer that uses video directly from the device's camera. However, you can set
the videoSource
property of an OTPublisher component to "screen" to publish a screen-sharing stream.
Custom video renderers -- The OTSubscriber and OTPublisher components implement a standard
video renderer that renders streams and provides user interface controls for displaying
the stream name and muting the microphone or camera. Publishers and subscribers use
mPublisher.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL)
iOS delegate callback queue -- For iOS, you cannot assign the delegate callback queue (the GCD queue). See the docs for the OTSession.apiQueue property in the OpenTok iOS SDK.
To build Android and iOS apps that use these features, use the OpenTok Android SDK and the OpenTok iOS SDK.
To see this library in action, check out the opentok-react-native-samples repo.