React components for OpenTok.js
- NodeJS
- Register a TokBox account: https://tokbox.com/account/user/signup
Add opentok-react
as a dependency of your application:
npm install --save opentok-react
Include opentok.js
before your application:
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
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.
The following sections explains how to import and use opentok-react
in your React application.
Import the opentok-react
components into your React application:
import { OTSession, OTPublisher, OTStreams, OTSubscriber, createSession } from 'opentok-react';
Or require
it if you need to use CommonJS modules:
var otReact = require('opentok-react');
var OTSession = otReact.OTSession;
var OTPublisher = otReact.OTPublisher;
var OTStreams = otReact.OTStreams;
var OTSubscriber = otReact.OTSubscriber;
var createSession = otReact.createSession;
class MyApp extends React.Component {
render() {
return (
<OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
<OTPublisher />
<OTStreams>
<OTSubscriber />
</OTStreams>
</OTSession>
);
}
}
class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = { streams: [] };
}
componentWillMount() {
this.sessionHelper = createSession({
apiKey: 'your-api-key',
sessionId: 'your-session-id',
token: 'your-session-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>
);
}
}
The opentok-react
library is comprised of:
OTSession
ComponentOTPublisher
ComponentOTStreams
ComponentOTSubscriber
ComponentcreateSession
Helper
TODO
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}
/>
);
}
}
- Describe
getPublisher()
method. - Explain which properties
OTPublisher
will monitor for changes. - Explain that this component will not cause publisher to be appended to body.
TODO
The OTSubscriber
component will subscribe to a specified stream from a specified session upon mounting. You must provide 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>
);
}
}
- Describe
getSubscriber()
method. - Describe
properties
prop. - Describe
eventHandlers
prop. - Explain which properties
OTPublisher
will monitor for changes. - Explain that this component will not cause subscriber to be appended to body.
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 instead use the OTSession
component or directly call OT.initSession and listen to streamCreated events if you prefer.
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.
TODO