Quick Start Guide for OpenTok

Getting up and running using OpenTok can be as simple as cutting and pasting a few lines of code into a web page. This walkthrough will show you how to create a simple OpenTok web application to chat with friends.

Step 1: Sign-up to get your API key, session ID and token

Before you can begin using OpenTok, you must sign up using the developer dashboard. When you are finished and before you start coding, we need to collect a few key pieces of information necessary to create an OpenTok application. They are:

  • API key - This identifies your OpenTok account.
  • Session ID - Your session ID identifies the "room" in which participants will meet and chat.
  • Token - The token is a key that defines who can enter the "room", and once inside what they can do.

Get these from your OpenTok dashboard by following these instructions:

  1. Your first project

    After you login to the dashboard, and click through the Quick Start guide, retrieve your API key from Project A on the Project page.

    Cut and paste this somewhere safe because you will need it soon.

  2. Create a session and token

    Click on the "View Details" button associated with your project. Then click "Create New" to create a session ID, then click "Generate new" under Generate Token. Cut and paste your session and token IDs somewhere safe, because you will need them again.

    Note: Make sure to copy/paste the whole of the session ID and token.

Step 2. Insert the OpenTok.js library

To create an OpenTok-powered web application, you first need to add the OpenTok.js library in your HTML document.

<script src="//static.opentok.com/webrtc/v2.2/js/opentok.min.js" ></script>

Step 3: Code!

Copy and paste the code below into your HTML document.

<script type="text/javascript">
  var apiKey    = "YOUR API KEY HERE";
  var sessionId = "YOUR SESSION ID HERE";
  var token     = "YOUR TOKEN HERE";

  var session = OT.initSession(apiKey, sessionId);

  session.on("streamCreated", function(event) {
    session.subscribe(event.stream);
  });

  session.connect(token, function(error) {
    var publisher = OT.initPublisher();
    session.publish(publisher);
  });
</script>

Remember those values you saved in step 1? Cut and paste them into the obvious places at the top of the code you just put into your HTML document.

Step 4: View your app and share with friends!

Load the HTML document onto a web server, and view the application you just created.

Note: You may have to grant permissions to the browser to access your webcam and microphone.

I want to cheat. Can you just show me a demo?

Your favorite teacher in grade school just shed a tear. But we forgive you. Here, check out a demo of the app discussed above.

What Next?

Congratulations, you made your first OpenTok app, or at least we assume you did. So what's next from here?

IRC Live Chat

Have a quick question? Chat with TokBox Support on IRC. Join chat