1. JS
  2. AS

JavaScript Tutorial — Hello World Tutorial

This tutorial shows how to connect to an OpenTokTM 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.

Download the source code.

Testing the tutorial online

To run the tutorial at the top of this page:

  1. Make sure that you have a webcam connected to your computer and configured to run.
  2. In the example at the top of this page, if the Flash Player Settings dialog is displayed, click the Allow button. This grants the application access to your camera and microphone.

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

  3. Mute the speaker on your computer. (For this test app, this will prevent audio feedback.)
  4. Copy the URL for this page into the Clipboard.
  5. Open a new browser window, and have it open to the copied URL.

    6. For test purposes, you can view the page in the new browser window on your computer. Or you can open it on another computer (as would happen in a real session.)

    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 wave to the camera and say "hello world."

Understanding the code

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.

Adding the OpenTok JavaScript library

To add the OpenTok JavaScript library, the <head> section of the webpage includes the following line:

<script src="http://staging.tokbox.com/v0.91/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, TokBoxTM will maintain this version at the original URL.

Connecting to an OpenTok session

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(1127, "devtoken");

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

Testing the code on your own computer

You can download the source code and test it on your own computer:

  1. Click the Download the source code link at the top of this page (just beneath the example).
  2. Extract the ZIP file you download, and open the helloworld.html file in a web browser.

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:

  1. Open this link in a new browser window: http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html.

    2. The Flash Player Global Security Settings panel is displayed.

  2. In the Alway trust files in these locations list click the Edit locations link and select Add location.
  3. Click Browse for folder, navigate to the folder that contains the files you downloaded, and then click the Open button.
  4. Click the Always Allow button.

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

  5. Reload the local version of the HTML file in your web browser.

Next steps

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.

IRC Live Chat

Have a quick question? Chat with other developers.  Join chat

TokBox staff may not be online right now. To reach them during off-hours, visit the forums.