Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs
Visit the Vonage API Developer PortalApps written with the OpenTok React Native SDK 2.28+ can interoperate with OpenTok apps written with version 2.26+ 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:
Install node.js
Install and update Xcode (you will need a Mac). (See the React Native iOS installation instructions.)
Install and update Android Studio. (See the React Native Android installation instructions.)
See the system requirements for the OpenTok Android SDK and OpenTok iOS SDK. (The OpenTok React Native SDK has the same requirements for Android and iOS.)
In your terminal, change into your React Native project's directory.
Add the library using npm or yarn:
npm install opentok-react-nativeyarn add opentok-react-nativeInstall the iOS pods:
npx pod-install
For React Native versions prior to 0.60:
Add this to your Podfile:
target '<YourProjectName>' do
# Pods for <YourProject>
pod 'OTXCFramework', '2.27.3'
end
Run react-native link opentok-react-native.
These steps are not necessary in React Native version 0.60 and later.
Ensure you have enabled both camera and microphone usage by adding the following entries to the 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>
When you create an archive of your app, the privacy manifest settings required by Apple's App store are added automatically with this version of the OpenTok React Native SDK.
If you try to archive the app and it fails, please do the following:
Go to Target.
Click Build Phases.
Under the Link Binary With Libraries section, remove libOpenTokReactNative.a and add it again.
In your terminal, change into your project directory.
For React Native versions prior to 0.60:
react-native link opentok-react-nativeThis step is not necessary in React Native version 0.60 and later.
Run bundle install.
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.
For older Android devices, add the following permissions to the AndroidManifest.xml file:
android.permission.BLUETOOTH -- The default audio device supports
Bluetooth audio. If your app does not use the default audio device and does not
use Bluetooth, you can remove this permission.
android.permission.BLUETOOTH_CONNECT -- You need to enable this for API level 31 and above. If you want
to use the Bluetooth device with Android SDK DefaultAudioDevice targeting API level 31 and above, please
ask for runtime permissions in the app or enable the ("Nearby devices/Bluetooth") permission manually in
the app settings.
android.permission.BROADCAST_STICKY -- We have determined that this is unused by
the OpenTok Android SDK, and we will remove this permission from an upcoming release.
android.permission.CAMERA -- If your app does not use the default video capturer
and does not access the camera, you can remove this permission.
android.permission.INTERNET -- Required.
android.permission.MODIFY_AUDIO_SETTINGS -- If your app does not use the default audio
device and does not access the microphone, you can remove this permission.
android.permission.READ_PHONE_STATE -- The OpenTok Android SDK requests this permission in API level 22
and lower, and 31 and above.
android.permission.RECORD_AUDIO -- If your app does not use the default audio
device and does not access the microphone, you can remove this permission.
For newer versions of Android — API Level 23 (Android 6.0) and later — you do not need to add these to your app manifest. The OpenTok React Native SDK adds them automatically. However, if you use Android 21+, certain permissions require you to prompt the user.
Your app can remove any of these permissions that will not be required. See this post and this Android documentation. For example, this removes the android.permission.CAMERA permission:
<uses-permission android:name="android.permission.CAMERA" tools:node="remove"/>
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.