callstack / react-native-opentok

React Native OpenTok
202 stars 79 forks source link

NOTE: This repository is not maintained anymore, feel free to fork it and modify for your own convinience. If you are interested in maintaining this reposiotry, please reach out to us on Discord: Chat

react-native-opentok

React Native OpenTok is wrapper over native TokBox OpenTok SDK. The OpenTok platform, developed by TokBox, makes it easy to embed high-quality interactive video, voice, messaging, and screen sharing into web and mobile apps. OpenTok uses WebRTC for audio-video communications πŸ‘€πŸŽ§. For more info on how OpenTok works, check out OpenTok Basics.

Requirements:

Supported OpenTok SDK version:

Table of contents

Installation

React native OpenTok SDK depends on native OpenTok SDK implementations. You need to integrate OpenTok SDK into your existing application. Following steps needs to be done in order to have library working correctly:

Add library using yarn πŸ“¦ (or npm):

yarn add react-native-opentok

iOS

  1. Install CocoaPods on your computer.
  2. Within you application ios/ directory please run pod init.
  3. Replace content within your brand-new Podfile with:
    
    source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '9.0'

target '' do node_modules_path = '../node_modules'

pod 'yoga', path: "#{node_modules_path}/react-native/ReactCommon/yoga/yoga.podspec" pod 'React', path: "#{node_modules_path}/react-native"

pod 'RNOpenTok', path: "#{node_modules_path}/react-native-opentok/ios" end

post_install do |installer| installer.pods_project.targets.each do |target| if target.name == "React" target.remove_from_project end end end

4. Run `pod install`.
5. Open <YOUR_PROJECT_NAME>.xcworkspace file (you'll need to use it as a starting file from now on).
6. Add `OPENTOK_API_KEY` key to your `Info.plist`:
```xml
<key>OPENTOK_API_KEY</key>
<string>YOUR_API_KEY</string>
<key>NSCameraUsageDescription</key>
<string>${PRODUCT_NAME} Camera Usage</string>
<key>NSMicrophoneUsageDescription</key>
<string>${PRODUCT_NAME} Microphone Usage</string>
  1. Run the project πŸŽ‰.

Android

  1. Run react-native link.
  2. Edit your android/build.gradle file and update allprojects section:
    allprojects {
    repositories {
        ...
        // -------------------------------------------------
        // Add this below the existing maven property above
        // -------------------------------------------------
        maven {
            url "http://tokbox.bintray.com/maven"
        }
    }
    }
  3. Add OPENTOK_API_KEY to your AndroidManifest.xml(within <application> tag):
    <meta-data android:name="OPENTOK_API_KEY" android:value="YOUR_OPENTOK_API_KEY" />
  4. Run the project πŸŽ‰.

API Reference

setApiKey(apiKey: string): void

Override Api key.

OpenTok.setApiKey('YOUR_API_KEY');

connect(sessionId: string, token: string): Promise<boolean | Error>

Connects to choosen session.

const connectToSession = async () => {
  try {
    await OpenTok.connect('YOUR_SESSION_ID', 'YOUR_TOKEN');
  } catch (e) {
    console.log(e)
  }
}

disconnect(sessionId: string): void

Disconnects from chosen session.

OpenTok.disconnect('YOUR_SESSION_ID');

disconnectAll(): void

Disconnects all available sessions.

OpenTok.disconnectAll();

sendSignal(sessionId: string, type: string, message: string): Promise<boolean | Error>

Send signal to chosen session.

const connectToSession = async () => {
  try {
    await OpenTok.connect('YOUR_SESSION_ID', 'YOUR_TOKEN');
  } catch (e) {
    console.log(e)
  }
}

events

Constants for events thrown in app. Available values:

on(name: string, callback: Function)

Event listener, for events listed above.

OpenTok.on(OpenTok.events.ON_SIGNAL_RECEIVED, e => console.log(e));

removeListener(name: string): void

Removes listener.

OpenTok.removeListener(OpenTok.events.ON_SIGNAL_RECEIVED);

Components

Publisher

Component used for publishing the video to the stream.

Available props:

Available methods:

import { Publisher } from 'react-native-opentok'
<Publisher
  style={{ height: 100, width: 200 }}
  sessionId={sessionId}
  onPublishStart={() => { console.log('started')}}
/>

Subscriber

Component used for subscribing to the stream.

Available props:

import { Subscriber } from 'react-native-opentok'

<Subscriber
  style={{ height: 100, width: 200 }}
  sessionId={sessionId}
  onSubscribeStart={() => { console.log('started')}}
/>

ScreenCapture

Component used for capturing a stream of it's children for screen sharing.

Everything inside this component will be streamed as long as <Publisher> has screenCapture prop set to true.

Available props:

import { Publisher, ScreenCapture } from 'react-native-opentok';

<ScreenCapture>
  {/* some children */}
</ScreenCapture>
<Publisher screenCapture>

Usage

Simply import the library and use methods/components listed above.

import OpenTok from 'react-native-opentok';

Check out example project.

Contributors


MichaΕ‚ Chudziak

πŸ’»

Drapich Piotr

πŸ’»

Mike Grabowski

πŸ’»

Jakub BeneΕ‘

πŸ’»

Radek Czemerys

πŸ’»

Jacob Caban-Tomski

πŸ’»

damiantw

πŸ’»

Credits

Thanks to TokBox for native SDKs development.

This project follows the all-contributors specification. Contributions of any kind welcome!