Package Exports

opentok-react

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

Pre-Requisites

NodeJS
Register a TokBox account: https://tokbox.com/account/

Install

Add opentok-react as a dependency of your application:

npm install --save opentok-react

Include opentok.js before your application:

<script src="//static.opentok.com/v2/js/opentok.min.js"></script>

Example App

There is an example application provided in example/ and you can run it with the following steps:

git clone https://github.com/aiham/opentok-react.git
cd opentok-react/example/
cp config.template.js config.js
Edit config.js:
Add your OpenTok API key, Session ID and Token (https://tokbox.com/account/)
Add your Chrome Extension ID (https://tokbox.com/developer/guides/screen-sharing/js/)
npm install
npm run example
Visit http://localhost:8000 in your browser

Refer to the App.js, Publisher.js and Subscriber.js files in example/components/ for library usage.

Usage

The opentok-react library is comprised of:

createSession Helper
OTPublisher Component
OTSubscriber Component

The following sections explains how to import and use them in your React application.

Importing opentok-react

Import the opentok-react modules into your React application:

import { createSession, OTPublisher, OTSubscriber } from 'opentok-react';

createSession Helper

The createSession helper has been provided to easily create a session and monitor the current list of subscriber streams.

class MyApp extends React.Component {
  componentWillMount() {
    this.sessionHelper = createSession({
      apiKey: 'your-api-key',
      sessionId: 'your-session-id',
      token: 'your-session-token',
      onStreamsUpdated: streams => {
        console.log('Current subscriber streams:', streams);
      }
    });
  }

  componentWillUnmount() {
    this.sessionHelper.disconnect();
  }
}

The createSession helper returns an object with the following properties:

session - The Session instance.
streams - An up-to-date array of Stream instances.
disconnect - A clean up function. Call this when your component unmounts.

Use of this helper is optional and you can directly call OT.initSession and listen to streamCreated events if you prefer.

OTPublisher Component

The OTPublisher component will initialise a publisher and publish to a specified session upon mounting. You must specify a Session object using the session prop.

class MyApp extends React.Component {
  render() {
    return (
      <OTPublisher session={this.sessionHelper.session} />
    );
  }
}

Use the properties prop to specify a properties object for OT.initPublisher and the eventHandlers prop to specify an object of event handlers for Publisher#on.

class MyApp extends React.Component {
  constructor(props) {
    super(props);

    this.publisherProperties = {
      audioFallbackEnabled: false,
      showControls: false
    };

    this.publisherEventHandlers = {
      streamCreated: event => {
        console.log('Publisher stream created!');
      },
      streamDestroyed: event => {
        console.log('Publisher stream destroyed!');
      }
    };
  }

  render() {
    return (
      <OTPublisher
        session={this.sessionHelper.session}
        properties={this.publisherProperties}
        eventHandlers={this.publisherEventHandlers}
      />
    );
  }
}

TODO

Describe getPublisher() method.
Explain which properties OTPublisher will monitor for changes.
Explain that eventHandlers are dynamically updated.
Explain that this component will not cause publisher to be appended to body.

OTSubscriber Component

The OTSubscriber component will subscribe to a specified stream from a specified session upon mounting. You must specify a Stream object using the stream prop and a Session object using the session prop.

class MyApp extends React.Component {
  render() {
    return (
      <div>
        {this.sessionHelper.streams.map(stream => {
          return (
            <OTSubscriber
              key={stream.id}
              session={this.sessionHelper.session}
              stream={stream}
            />
          );
        })}
      </div>
    );
  }
}

TODO

Describe getSubscriber() method.
Describe properties prop.
Describe eventHandlers prop.
Explain which properties OTPublisher will monitor for changes.
Explain that eventHandlers are dynamically updated.
Explain that this component will not cause subscriber to be appended to body.

A Complete Example

import { createSession, OTPublisher, OTSubscriber } from 'opentok-react';

import React from 'react';
import ReactDOM from 'react-dom';

const config = {
  API_KEY: 'your-api-key',
  SESSION_ID: 'your-session-id',
  TOKEN: 'your-session-token'
};

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { streams: [] };
  }

  componentWillMount() {
    this.sessionHelper = createSession({
      apiKey: config.API_KEY,
      sessionId: config.SESSION_ID,
      token: config.TOKEN,
      onStreamsUpdated: streams => { this.setState({ streams }); }
    });
  }

  componentWillUnmount() {
    this.sessionHelper.disconnect();
  }

  render() {
    return (
      <div>
        <OTPublisher session={this.sessionHelper.session} />

        {this.state.streams.map(stream => {
          return (
            <OTSubscriber
              key={stream.id}
              session={this.sessionHelper.session}
              stream={stream}
            />
          );
        })}
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById('content'));

Custom Build

git clone https://github.com/aiham/opentok-react.git
cd opentok-react/
npm install
Modify code in src/
npm run build
Check that files in dist/ have been updated.

Tests

TODO