Hello World

Set up a simple browser-based audio-video chat in a few minutes.

Prerequisites

Setting up basic OpenTok client-side code on the web is relatively simple, but you'll need a few things to make sure it works properly:

  • Chrome or Firefox browser — OpenTok works with several browsers, but for this demo we recommend using Chrome or Firefox
  • Webcam and Microphone — your browser will ask you to share access to these

Set up a simple audio-video chat with OpenTok

Below is an editable HTML document loaded with the OpenTok.js library. Follow the steps under the HTML document to quickly set up a basic OpenTok chat.

See the Pen Hello World Embed (@tokbox) on CodePen.

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 = 'Generating...';
var sessionId = 'Generating...';
var token = 'Generating...';

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:

Go back to previous step