This tutorial shows how 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.)
This version of the app uses a peer-to-peer session (more information). You can also try the multi-party version, which supports more than two connections.
You can wave to the camera and say "hello world."
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 JavaScript library, the <head> section of the webpage includes the following line:
<script src="http://static.opentok.com/v1.1/js/TB.min.js" ></script>
This one script includes the entire OpenTok JavaScript library. The src URL
will change with future versions of the OpenTok API. However, TokBox
will maintain this version at the original URL.
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 JavaScript library. (See the OpenTok 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. The Basic Tutorial describes these in more detail.
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. To see how this works, look at the
Basic Tutorial.
You can download the source code and test it on your own computer:
Flash Player Settings for local testing:
If the web page asks you to set the Flash Player Settings, or if you do not see a display of your camera in the page, do the following:
The Flash Player Global Security Settings panel is displayed.
This grants the HTML pages in the folder you selected to communicate with Flash content served by tokbox.com. (It also grants this communication from this folder to other servers, so be careful to select a specific folder.)
Now that you have looked at this simple example, go ahead and read the Basic Tutorial. Then look at the other tutorials to learn more of the OpenTok functionality.
You may also want to look at the OpenTok documentation.