Hello World

Step 1 of 5: Authentication

Copy the code snippet below and add it to the HTML document under // credentials (use the copy button.)

var apiKey = '47905421';
var sessionId = '1_MX40NzkwNTQyMX5-MTc0NDg2ODcxNDU1M353dmQvT1hKV1dGdUJlQXFISVdXSDYzZ1N-UH5-';
var token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI0NzkwNTQyMSIsImlzdCI6InByb2plY3QiLCJpYXQiOjE3NDQ4Njg3MTQsImV4cCI6MTc0NDk1NTExNSwic2Vzc2lvbl9pZCI6IjFfTVg0ME56a3dOVFF5TVg1LU1UYzBORGcyT0RjeE5EVTFNMzUzZG1RdlQxaEtWMWRHZFVKbFFYRklTVmRYU0RZeloxTi1VSDUtIiwiY3JlYXRlX3RpbWUiOjE3NDQ4Njg3MTUsIm5vbmNlIjowLjc5NjA1MzE5MjU0NTc0NzcsInJvbGUiOiJwdWJsaXNoZXIiLCJleHBpcmVfdGltZSI6MTc0NDk1NTExNSwiaW5pdGlhbF9sYXlvdXRfY2xhc3NfbGlzdCI6IiIsInNjb3BlIjoic2Vzc2lvbi5jb25uZWN0In0.85IDkoLXSczoABWaeTt0Pb_vIU4mJeAmeC5IQ0A6gwE';

You must pass a valid API key, session ID, and token when connecting to an OpenTok session. These credentials are usually generated by your server but we generated them for you this time.

OK, I added it

Step 2 of 5: Connect to the session and create a publisher

Copy the code snippet below and add it to the HTML document under // connect to session. This will create a publisher video, so your browser may ask for access to your camera and microphone.

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

// create publisher
var publisher = OT.initPublisher();
session.connect(token, function(err) {
// publish publisher

});

This code initializes the session and publisher and then connects to the session. You should see your video in the output panel.

OK, I see my video Go back to previous step

Video not displaying? Try clicking the icon in your URL bar to adjust your webcam permissions.

Step 3 of 5: Publish the publisher

Copy the code snippet below and add it to the HTML document under // publish publisher.

session.publish(publisher);

This code publishes the audio-video stream to the session using your webcam and microphone.

OK, I added it Go back to previous step

Step 4 of 5: Create a subscriber

Copy the code snippet below and add it to the HTML document under // create subscriber. You may need to scroll down in the HTML document.

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

This code allows you to subscribe to new streams published by other clients in the session.

OK, I added it Go back to previous step

Step 5 of 5: Add a second video publisher to create a one-to-one video chat

Mute the speaker on your computer (to prevent audio feedback). Then click the button below to launch a second client in a new browser tab (using Codepen). This should create a second publisher, and you will see two video streams on the page.

Clicking the button below will launch a Codepen in a new tab in your browser, after which you can return to this tab.

Go back to previous step

That's it!

You just set up a (very) basic 1-to-1 video chat using OpenTok. This is a great first step, but the code used here is a bare minimum implementation designed for quickly seeing OpenTok in action. You'll need to do a little more setup before launching a production app, including deploying a server.

Next Steps:

Tutorial: Set up a basic client — Create a complete OpenTok application for web, iOS, Android, Windows, or Linux

Video API Basics — Quickly learn the fundamentals of how OpenTok works (with pictures)

Go back to previous step

Suggestions

Prerequisites

Set up a simple audio-video chat with OpenTok

Step 1 of 5: Authentication

Step 2 of 5: Connect to the session and create a publisher

Step 3 of 5: Publish the publisher

Step 4 of 5: Create a subscriber

Step 5 of 5: Add a second video publisher to create a one-to-one video chat

That's it!

Next Steps: