JavaScript Tutorial — Resizing video

This tutorial shows how you can control the size of the OpenTok video display, just as you would any other HTML element. Also, it demonstrates that you can show an OpenTok video multiple times in the web page.

Download the source code.

Testing the tutorial online

To run the tutorial:

1. Make sure that you have a webcam connected to your computer and configured to run.
2. Click the Start publishing link.

If the Flash Player Settings dialog is displayed, click the Allow button. This grants TokBox.com access to your camera and microphone.

You are now publishing a video stream to the session, and the video stream is displayed multiple times on the page, in different sizes.

As you follow the diagonal up and to the left from that corner, you can see scaled-down versions of the published stream, each of which maintains the original 4:3 aspect ratio.

For containers that display a stream with dimensions that do not match the 4:3 aspect ratio, the video image is be clipped. The video image is clipped so that the center-most part of the image is displayed. You can see this in some of the video displays of the movie.

Testing the code on your own computer

See the instructions in the Hello World tutorial.

Understanding the code

Note: You may want to look at the Basic Tutorial sample, if you have not already. It provides details on many of the basic concepts, like connecting to an OpenTok session, publishing an audio-video stream, and subscribing to streams.

A subscriber_width array and a subscriber_height array define the widths and heights to use for the displayed videos:

var subscriber_width = [120, 160, 220];
var subscriber_height = [90, 120, 165];

When you publish a stream, the Session object (defined in the OpenTok JavaScript library) dispatches a streamCreated event. The streamCreatedHandler() is the event handler for this event.

function streamCreatedHandler(event) {
    for (var i = 0; i < event.streams.length; i++) {
        if (event.streams[i].connection.connectionId == event.target.connection.connectionId) {
            for (var y = 0; y < 3; y++) {
                for (var x = 0; x < 3; x++) {
                    // Create a div for the subscriber to replace
                    var parentDiv = document.getElementById("cell_" + x + "_" + y);
                    var subscriberDiv = document.createElement("div");
                    subscriberDiv.id = "opentok_subscriber_" + x + "_" + y;
                    parentDiv.appendChild(subscriberDiv);

                    var subscriberProps = {width: subscriber_width[x], 
                                            height: subscriber_height[y], 
                                            subscribeToAudio: false};
                    event.target.subscribe(event.streams[i], subscriberDiv.id, subscriberProps);
                }
            }
        }
    }
}

The StreamEvent object, which defines the streamCreated event, has a streams property. This property is an array of Stream objects. The streamCreatedHandler() function checks each Stream object in the array to see if it matches the stream you just published. It does this by comparing the connection ID for the stream with that of your own connection. (Each user's connection to the session has a connection ID.) For more information on Session and Stream objects, see the Basic tutorial.

If the code finds a stream that matches your session (one that you published), it iterates through the cells of the HTML table. For each cell, the code creates a container div and calls the subscribe() method of the Session object. This adds the video to the page.

The last parameter of the subscribe() method is the properties parameter. The width and height properties of this object determine the width and height of the video displayed. Note that the code obtains these values from the subscriber_width and subscriber_height arrays:

var subscriberProps = {width: subscriber_width[x], 
                        height: subscriber_height[y], 
                        subscribeToAudio: false};