opentok-react-native

React Native library for using OpenTok.

This library is now officially supported by Vonage.

In this repo, you'll find the OpenTok React Native library.

Important: This version of the OpenTok React Native SDK includes components built with the React Native new architecture. This version is only supported in the React Native new architecture (such as React Native 0.76+). It is not supported in the React Native old architecture (such as older versions of React Native). This beta pre-release version is not intended for use in final production apps.

This version supports Client SDK updates for v2.31.0.

The only difference from previous versions is that you need to use a version of React Native that supports the new architecture (0.76+) and you need to register the OpenTok React Native packages in your application:

For Android, register the OpentokReactNativePackage, OTRNPublisherPackage, and OTRNSubscriberPackage packages in the MainActivity file for your app. See step 6 of the "Android Installation" section below.
For iOS, register the OTRNPublisherPackage and OTRNSubscriberPackage packages in the AppDelegate file for your app. See step 4 of the "iOS Installation" section below.

Prerequisites

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.)

System requirements

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.)

Installation

In your terminal, change into your React Native project's directory.
Add the library using npm or yarn:

npm install opentok-react-native@2.31.0-beta.2
yarn add opentok-react-native@2.31.0-beta.2

iOS Installation

Install the iOS pods:
```
cd ios;
bundle exec pod install
```

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 app has an Objective-C++ AppDelegate file (AppDelegate.mm), add these classes to the list of packages in the NSMutableDictionary returned by the thirdPartyFabricComponents() function:

     #import "OTRNPublisherComponentView.h"
     #import "OTRNSubscriberComponentView.h"

     @implementation AppDelegate
  
         // ...
  
         - (NSDictionary> *)thirdPartyFabricComponents
         {
           NSMutableDictionary * dictionary = [super thirdPartyFabricComponents].mutableCopy;
           dictionary[@"OTRNPublisher"] = [OTRNPublisherComponentView class];
           dictionary[@"OTRNSubscriber"] = [OTRNSubscriberComponentView class];
           return dictionary;
         }
     
     @end

If your app uses a Swift AppDelegate file (AppDelegate.swift), you will need to have its implementation of the RCTAppDelegate.application(_, didFinishLaunchingWithOptions) method use a bridging header to call a method in an Objective-C++ file that calls the [RCTComponentViewFactory registerComponentViewClass:] method, passing in the OTRNPublisherComponentView and OTRNSubscriberComponentView classes.

For example, add a bridging header for your app:

#ifndef BasicVideoTS_Bridging_Header_h
#define BasicVideoTS_Bridging_Header_h

#import "FabricComponentRegistrar.h"

#endif

Then create FabricComponentRegistrar.h and FabricComponentRegistrar.cpp files:

// FabricComponentRegistrar.hpp

#import 

@interface FabricComponentRegistrar : NSObject
+ (void)registerCustomComponents;
@end

//  FabricComponentRegistrar.mm
#include "FabricComponentRegistrar.h"
#import 
#import 
#import "OTRNPublisherComponentView.h"
#import "OTRNSubscriberComponentView.h"

@implementation FabricComponentRegistrar

+ (void)registerCustomComponents {
    RCTComponentViewFactory *factory = [RCTComponentViewFactory currentComponentViewFactory];
    [factory registerComponentViewClass:[OTRNPublisherComponentView class]];
    [factory registerComponentViewClass:[OTRNSubscriberComponentView class]];
}

Finally, call the FabricComponentRegistrar.registerCustomComponents() method in the AppDelegate.swift RCTAppDelegate.application(_, didFinishLaunchingWithOptions) method:

override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    self.moduleName = "BasicVideoTS"
    self.dependencyProvider = RCTAppDependencyProvider()

    // You can add your custom initial props in the dictionary below.
    // They will be passed down to the ViewController used by React Native.
    self.initialProps = [:]

return super.application(application, didFinishLaunchingWithOptions: launchOptions)
   let result = super.application(application, didFinishLaunchingWithOptions: launchOptions)
   FabricComponentRegistrar.registerCustomComponents()
   return result
}

If your app will use the OTPublisher.setVideoTransformers() or OTPublisher.setAudioTransformers() method, you need to include the following in your Podfile:
```
pod 'VonageClientSDKVideoTransformers'
```

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.

Android Installation

In your terminal, change into your project directory.
For React Native versions prior to 0.60:
- Run react-native link opentok-react-native
This 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.
The SDK automatically adds Android permissions it requires. You do not need to add these to your app manifest. However, certain permissions require you to prompt the user. See the full list of required permissions in the Vonage Video API Android SDK documentation.

In the MainApplication.kt file for your app, register the OpenTok OpentokReactNativePackage, OTRNPublisherPackage, and OTRNSubscriberPackage packages. Do this by modifying the MainApplication file by adding these to the list of packages returned by the getPackages() function:

import com.opentokreactnative.OTRNPublisherPackage
import com.opentokreactnative.OTRNSubscriberPackage
import com.opentokreactnative.OpentokReactNativePackage;

// ...

override fun getPackages(): List<ReactPackage> =
    PackageList(this).packages.apply {
        add(OTRNPublisherPackage())
        add(OTRNSubscriberPackage())
        add(OpentokReactNativePackage())
    }
    // ...

If your app will use the OTPublisher.setVideoTransformers() or OTPublisher.setAudioTransformers() method, you need to include the following in your app/build.gradle file:
```
implementation "com.vonage:client-sdk-video-transformers:2.31.0"
```

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 ❤️ 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