This tutorial shows how to use the OpenTok on WebRTC JavaScript library to connect to an OpenTok session, display any existing streams and publish a video stream to the session. Although this is not a traditional "hello world" sample, it does show the most basic application to use the most basic OpenTok functionality.
To run the tutorial at the top of this page:
The example now connects to a sample OpenTok session. It displays any other video streams in the session (if there are any), and it displays and publishes your video to the session.
This URL connects to the same OpenTok session used by this page.
The new page now connects to the session. Upon connection the video stream from the other page is displayed on the page and the new published video stream appears on both pages.
You can open the link on another computer (as would happen in a real session.)
You can wave to the camera and say "hello world."
View the source code for the iframe that contains the sample above.
This application shows the simplest example of connecting to an OpenTok session, displaying video streams existing in the session, and publishing a video stream to a session.
We assume you know how to create HTML Web pages and have a basic understanding of JavaScript and the HTML Document Object Model. If you are not comfortable with those technologies, then you should consider using the TokBox Embed option instead.
To add the OpenTok on WebRTC JavaScript library, the <head> section of the webpage includes the following line:
<script src="http://static.opentok.com/webrtc/v2.0/js/TB.min.js" ></script>
This one script includes the entire OpenTok on WebRTC JavaScript library. The src URL
will change with future versions of the OpenTok API. However, TokBox will maintain this version at the
original URL.
Additionally, the code includes the following meta tag:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
This meta tag is required for the OpenTok on WebRTC library to run in Internet Explorer with the Chrome Frame plug-in.
The first step in using an OpenTok session is to create and initialize a Session object.
The Session object is defined in the OpenTok JavaScript library. You initialize a Session
object by calling the TB.initSession() method with the session ID pertaining to
the OpenTok session. In this case, it is the ID for the sample session used for this demo:
var session = TB.initSession("1sdemo00855f8290f8efa648d9347d718f7e06fd");
The TB object and Session object are defined in the OpenTok on WebRTC JavaScript library. (See the OpenTok on WebRTC JavaScript API reference for details.)
Once the initialization is complete, you can connect to the session by calling
the connect() method of the Session object. The connect()
method takes two arguments: the API key and the token string:
session.connect(apiKey, token);
The API key identifies you as an OpenTok developer. (In this case, it is a sample API key used for the tutorial.) The token string defines a user.
Before calling the connect() method of the Session object, the code
adds event listeners that enable the OpenTok controller to send events to JavaScript
functions:
session.addEventListener("sessionConnected", sessionConnectedHandler);
session.addEventListener("streamCreated", streamCreatedHandler);
The sessionConnectedHandler() function calls a function that subscribes to the
existing streams in the session, and it publishes your camera's video to the session:
function sessionConnectedHandler (event) {
subscribeToStreams(event.streams);
session.publish();
}
function subscribeToStreams(streams) {
for (var i = 0; i < streams.length; i++) {
var stream = streams[i];
if (stream.connection.connectionId != session.connection.connectionId) {
session.subscribe(stream);
}
}
}
The publish() method of a Session object lets you publish
your webcam's audio-video stream to the session.
The streamCreatedHandler() function processes streams that are added
to a session (after you initially connect):
function streamCreatedHandler(event) {
subscribeToStreams(event.streams);
}
Both the sessionConnected event and the streamCreated event
objects contain a streams property, which is an array of streams.
The subscribeToStreams() function calls the subscribe()
method of the OpenTok Session object to subscribe to each stream.
Note that the subscribeToStreams() function checks to make sure that
a stream does not correspond to the one you are publishing (as determined by the
session.connection.connectionId property).
When the code calls publish() and subscribe(), this simple sample
app simply adds video streams in new DIV elements appended to the HTML body. However,
you can (and usually will) want to assign streams to HTML elements you define. The
publish() and subscribe() methods each take an optional
replaceElementId parameter. For details, see the documentation on the Session class in the
OpenTok on WebRTC JavaScript library
reference.