react-native-opentok

by callstack

React Native OpenTok

202 Stars 82 Forks Last release: Not found 275 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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:

  • react-native
    >=0.49.3

Supported OpenTok SDK version: -

OpenTok SDK
2.13.+

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: ```ruby source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '9.0'

target '' do nodemodulespath = '../node_modules'

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

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

postinstall do |installer| installer.podsproject.targets.each do |target| if target.name == "React" target.removefromproject end end end

4. Run `pod install`.
5. Open .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 OPENTOKAPIKEY YOURAPIKEY NSCameraUsageDescription ${PRODUCTNAME} Camera Usage NSMicrophoneUsageDescription ${PRODUCTNAME} Microphone Usage ``` 7. Run the project πŸŽ‰.

Android

  1. Run
    react-native link
    .
  2. Edit your
    android/build.gradle
    file and update allprojects section:
    gradle
    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
     tag):
    
    xml
    
    
  4. Run the project πŸŽ‰.

API Reference

setApiKey(apiKey: string): void

Override Api key.

js
OpenTok.setApiKey('YOUR_API_KEY');

connect(sessionId: string, token: string): Promise

Connects to choosen session.

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

js
OpenTok.disconnect('YOUR_SESSION_ID');

disconnectAll(): void

Disconnects all available sessions.

js
OpenTok.disconnectAll();

sendSignal(sessionId: string, type: string, message: string): Promise

Send signal to chosen session.

js
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: - ONSIGNALRECEIVED - ONSESSIONCONNECTION_CREATED - ONSESSIONCONNECTION_DESTROYED - ONSESSIONDID_CONNECT - ONSESSIONDID_DISCONNECT - ONSESSIONDIDFAILWITH_ERROR - ONSESSIONSTREAM_CREATED - ONSESSIONSTREAM_DESTROYED - ERRORNOSCREENCAPTUREVIEW - ONARCHIVESTARTEDWITHID - ONARCHIVESTOPPEDWITHID - ONSESSIONDIDBEGINRECONNECTING - ONSESSIONDID_RECONNECT

on(name: string, callback: Function)

Event listener, for events listed above.

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

removeListener(name: string): void

Removes listener.

js
OpenTok.removeListener(OpenTok.events.ON_SIGNAL_RECEIVED);

Components

Publisher

Component used for publishing the video to the stream.

Available props: -

sessionId: string
- ID of the session (you need to connect it before using this component). -
onPublishStart?: Function
- Invoked when publishing starts. Optional. -
onPublishStop?: () => void
- Invoked when publishing stops. Optional. -
onPublishError?: () => void
- Invoked when publish error occurs. Optional. -
mute?: boolean
- This props tells Publisher if should publish audio as well or not. Optional. Defaults to false. -
video?: boolean
- This props tells Publisher if should publish video as well or not. Optional. Defaults to true. -
videoScale?: string
- Whether the video should scale to
fill
the frame or
fit
into the frame. -
zOrderMediaOverlay?: boolean
- On android, calls SurfaceView.setZOrderMediaOverlay. Optional. Defaults to true. -
cameraDirection?: string
- Whether the camera should face
front
(towards screen) or
back
(away from screen). -
screenCapture?: boolean
- Stream screen if
true
instead of camera. -
screenCaptureSettings?: { fps?: number }
- Screen sharing settings. -
fps?: number
- Specify frames per second for a stream (default:
15
). - every View property.

Available methods: -

switchCamera()
: switches to the next camera. Goes back to first one when out of cameras. Calling this will overwrite
cameraDirection
.
import { Publisher } from 'react-native-opentok'
 { console.log('started')}}
/>

Subscriber

Component used for subscribing to the stream.

Available props: -

sessionId: string
- ID of the session (you need to connect it before using this component). -
onSubscribeStart?: Function
- Invoked when stream starts. Optional. -
onSubscribeStop?: () => void
- Invoked when stream stops. Optional. -
onSubscribeError?: () => void
- Invoked when subscribing error occurs. Optional. -
mute?: boolean
- This props tells Subscriber if should subscribe audio as well or not. Optional. Defaults to false. -
video?: boolean
- This props tells Subscriber if should subscribe video as well or not. Optional. Defaults to true. -
videoScale?: string
- Whether the video should scale to
fill
the frame or
fit
into the frame. -
zOrderMediaOverlay?: boolean
- On android, calls SurfaceView.setZOrderMediaOverlay. Optional. Defaults to true. - every View property.
import { Subscriber } from 'react-native-opentok'

{ 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

 has 
screenCapture
prop set to
true
.

Available props: - every View property except

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


  {/* some children */}


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

πŸ’» | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | <!-- ALL-CONTRIBUTORS-LIST:END -->

Credits

Thanks to TokBox for native SDKs development.

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.