• This repository has been archived on 19/Nov/2020
  • Stars
    star
    202
  • Rank 193,691 (Top 4 %)
  • Language
    Objective-C
  • Created over 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Native OpenTok

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

platform :ios, '9.0'

target '<YOUR_PROJECT_NAME>' 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
  1. Run pod install.
  2. Open <YOUR_PROJECT_NAME>.xcworkspace file (you'll need to use it as a starting file from now on).
  3. Add OPENTOK_API_KEY key to your Info.plist:
<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"
        }
    }
}
  1. Add OPENTOK_API_KEY to your AndroidManifest.xml(within <application> tag):
<meta-data android:name="OPENTOK_API_KEY" android:value="YOUR_OPENTOK_API_KEY" />
  1. 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_SIGNAL_RECEIVED
  • ON_SESSION_CONNECTION_CREATED
  • ON_SESSION_CONNECTION_DESTROYED
  • ON_SESSION_DID_CONNECT
  • ON_SESSION_DID_DISCONNECT
  • ON_SESSION_DID_FAIL_WITH_ERROR
  • ON_SESSION_STREAM_CREATED
  • ON_SESSION_STREAM_DESTROYED
  • ERROR_NO_SCREEN_CAPTURE_VIEW
  • ON_ARCHIVE_STARTED_WITH_ID
  • ON_ARCHIVE_STOPPED_WITH_ID
  • ON_SESSION_DID_BEGIN_RECONNECTING
  • ON_SESSION_DID_RECONNECT

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:

  • 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'
<Publisher
  style={{ height: 100, width: 200 }}
  sessionId={sessionId}
  onPublishStart={() => { 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'

<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!

More Repositories

1

react-native-paper

Material Design for React Native (Android & iOS)
TypeScript
12,811
star
2

linaria

Zero-runtime CSS in JS library
TypeScript
11,659
star
3

haul

Haul is a command line tool for developing React Native apps, powered by Webpack
TypeScript
3,643
star
4

react-native-testing-library

πŸ¦‰ Simple and complete React Native testing utilities that encourage good testing practices.
TypeScript
3,078
star
5

react-native-builder-bob

πŸ‘·β€β™‚οΈ Simple set of CLIs to scaffold and build React Native libraries for different targets
JavaScript
2,771
star
6

react-native-pager-view

React Native wrapper for the Android ViewPager and iOS UIPageViewController.
TypeScript
2,711
star
7

repack

A Webpack-based toolkit to build your React Native application with full support of Webpack ecosystem.
TypeScript
1,471
star
8

reassure

Performance testing companion for React and React Native
TypeScript
1,269
star
9

react-native-slider

React Native component exposing Slider from iOS and SeekBar from Android
TypeScript
1,189
star
10

react-native-ios-kit

The missing React Native UI Kit for iOS
JavaScript
521
star
11

react-theme-provider

A set of utilities that help you create your own React theming system in few easy steps
JavaScript
466
star
12

react-native-fbads

Facebook Audience SDK integration for React Native
Java
439
star
13

super-app-showcase

Monorepository template for super app development with React Native and Re.Pack
JavaScript
413
star
14

react-native-image-editor

A library providing an API for cropping images from the web and the local file system.
Kotlin
373
star
15

react-native-brownfield

Set of helpers to make your brownfield integration smooth and easy.
Kotlin
241
star
16

react-native-paper-login-template

The easiest way to start with your application.
TypeScript
239
star
17

component-docs

πŸ“ Simple documentation for your React components
TypeScript
137
star
18

react-native-open-source-board

OSS board with triaged React Native issues.
125
star
19

async-storage

Cross platform storage for React, built on top of AsyncStorage
JavaScript
109
star
20

react-native-material-palette

Bringing Material Palette API to React Native
JavaScript
105
star
21

ts-regex-builder

Maintainable regular expressions for TypeScript and JavaScript.
TypeScript
83
star
22

react-native-multibundle

JavaScript
57
star
23

eslint-config-callstack

ESLint preset extending Flow, Prettier and Jest
JavaScript
52
star
24

repack-examples

Repository with examples for Re.Pack
Java
50
star
25

ai-meeting-transcription

AI Tool for meeting transcriptions
Jupyter Notebook
36
star
26

react-native-socket-mobile

React Native module for the Socket Mobile SDK.
JavaScript
35
star
27

web3-react-native-dapp-wagmi

TypeScript
30
star
28

fabric-library-with-custom-cpp-example

Add custom cpp state to your fabric library
Java
29
star
29

super-app-example

This repository presents a compact super-app example from Callstack's blog, illustrating the use of a monorepo structure together with Re.Pack and Module Federation.
Java
27
star
30

hapi-graphql-boilerplate

JavaScript
26
star
31

react-native-detox-example

Example integration of Detox and Jest
Objective-C
23
star
32

linaria-styled

Zero-runtime CSS in JS library for building React components
18
star
33

web3-cross-platform-dapp

TypeScript
17
star
34

parcel-plugin-linaria

Parcel plugin for Linaria (Experimental)
JavaScript
17
star
35

benz-ql

GraphQL server for the Mercedes APIs
JavaScript
16
star
36

generator-node-module

A Yeoman module to author Node libraries with Prettier, Jest, Flow and Babel.
JavaScript
16
star
37

react-native-snapshot-tests

An example of snapshot testing with React Native
Objective-C
16
star
38

delightful-ux-training-app

JavaScript
15
star
39

universal-react-app

JavaScript
12
star
40

workshop-navigation

Navigation in React Native workshop.
JavaScript
12
star
41

ai-cli

AI assistant in your terminal.
TypeScript
11
star
42

github-comment-bot

JavaScript
10
star
43

news-mini-app-showcase

JavaScript
9
star
44

ReactNativeNotes

Notes demo application showing the abilities of React Native for desktop connected with UWP development
TypeScript
9
star
45

talk-universal-react

JavaScript
8
star
46

ai-summarization

AI summarization tool
Jupyter Notebook
7
star
47

react-native-releases-script

Script to generate changelog for RN releases
7
star
48

web3-react-native-dapp-viem

TypeScript
6
star
49

callstack-hackathon-team-ferran

callstack-hackaton-team-ferran
JavaScript
5
star
50

callstack-hackathon-team-dratwa-wojtek

JavaScript
3
star
51

reassure-examples

Examples for Reassure setup with different frameworks.
JavaScript
3
star
52

web3-react-native-testing

Best practices for testing React Native web3 dapps
TypeScript
3
star
53

DMAIC-Performance-Workshop

Dedicated app for the DMAIC Performance Workshop
TypeScript
2
star
54

.github

Templates for all Callstack OSS projects
2
star
55

react-native-paper-codemod

JavaScript
2
star
56

web3-react-native-siwe

Sign-In With Ethereum (SIWE) implementation in React Native
TypeScript
2
star
57

AppleVisionBGFX

Usage of BGFX in visionOS
C++
2
star
58

sample-weather-app

JavaScript
1
star
59

callstack.github.io

Organisation Github Page
HTML
1
star
60

react-native-visionos-docs

Documentation website for react-native-visionos
JavaScript
1
star
61

workshop-universal-sunshine

Universal React Native & React app based on Sunshine: https://github.com/udacity/Sunshine-Version-2
1
star