npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-opentok

v2.1.0

Published

React Native OpenTok

Downloads

3

Readme

react-native-opentok

All Contributors

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.12.+

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

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

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