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:
- You can name this file anything i.e: 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:

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

Android Installation

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.
- Run 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 sunset

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' }
    }
}

Docs

See the docs.

Samples

To see this library in action, check out the opentok-react-native-samples repo.

Development and Contributing

Interested in contributing? We :heart: pull requests! See the Contribution guidelines.

Getting Help

We love to hear from you so if you have questions, comments or find a bug in the project, let us know! You can either:

Open an issue on this repository
See https://support.tokbox.com/ for support options
Tweet at us! We're @VonageDev on Twitter
Or join the Vonage Developer Community Slack

2.27.1 (March 2024)

[Fix]: On Android, OTPublisher components failed with an error when either PermissionsAndroid.PERMISSIONS.CAMERA or PermissionsAndroid.PERMISSIONS.RECORD_AUDIO were not true. This version fixes that, by having audio-only or video-only publishers skip the PermissionsAndroid.PERMISSIONS.CAMERA or PermissionsAndroid.PERMISSIONS.RECORD_AUDIO check if the videoTrack or audioTrack property of the properties prop of the OTPublisher component is set to false. You can set these props to false based on these permissions:

import { PermissionsAndroid } from 'react-native';
// ...

<OTPublisher
  properties={{
    videoTrack={{(Platform.OS === 'ios' || PermissionsAndroid.CAMERA)}}
  }}
/>

Note: In Android 6.0 (API Level 23) and higher, the OpenTok React Native SDK automatically adds these permissions. However, an app or user can disable them independently of the SDK.

[Fix]: On Android, setting the videoTrack property of the properties prop of the OTPublisher component false resulted in the app to crash. This version fixes the issue (issue #652).
[Fix]: Fixes some TypeScript definitions (issue #725).

Keywords

FAQs

What is opentok-react-native?

Is opentok-react-native popular?

Is opentok-react-native well maintained?

Package last updated on 14 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install