JSPM

  • Created
  • Published
  • Downloads 2318
  • Score
    100M100P100Q112815F
  • License MIT

React Native components for OpenTok iOS and Android SDKs

Package Exports

  • opentok-react-native

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (opentok-react-native) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

opentok-react-native

OpenTok Labs

React Native library for OpenTok iOS and Android SDKs

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

Pre-Requisites:

  1. Install node.js

  2. Install and update Xcode (you will need a Mac)

  1. Install and update Android Studio

Installation:

  1. In your terminal, change into your React Native project's directory

  2. In your terminal, run npm install opentok-react-native

iOS Installation

Note Please make sure to have CocoaPods on your computer.

  1. In you terminal, change into your ios directory.

  2. Create a pod file by running: pod init.

  3. Add the following to your pod file:

    platform :ios, '9.0'

    target '<YourProjectName>' do
      use_frameworks!

      # Pods for <YourProject>
        pod 'OpenTok'
    end
  1. Now run, pod install

  2. Open XCode

  3. Open <YourProjectName>.xcworkspace file in XCode. This file can be found in the ios folder of your React Native project.

  4. Click File and Add Files to

  5. 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
  1. Click Create Bridging Header when you're prompted with the following modal: Would you like to configure an Objective-C bridging header?

  2. Add the contents from the Bridging-Header.h file in ../node_modules/opentok-react-native/ios to <YourProjectName>-Bridging-Header.h

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

  1. In you terminal, change into your project directory.

  2. Run react-native link opentok-react-native

  3. Open your Android project in Android Studio.

  4. Add the following to your project build.gradle file:

        maven {
            url "http://tokbox.bintray.com/maven"
        }
  • It should look something like this:
  1. Sync Gradle

  2. Make sure the following in your app's gradle compileSdkVersion, buildToolsVersion, minSdkVersion, and targetSdkVersion are the same in the OpenTok React Native library.

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

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!