Hello World
Set up a plain browser-based audio-video talk in a few minutes.
Prerequisites
Setting up basic OpenTok client-side code on the web is relatively elementary, but you’ll need a few things to make sure it works decently:
- 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 plain audio-video talk with OpenTok
Below is an editable HTML document loaded with the OpenTok.js library. Go after the steps under the HTML document to quickly set up a basic OpenTok talk.
Step one of Five: Authentication
Copy the code snippet below and add it to the HTML document under // credentials (use the copy button.)
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.
Step two of Five: Connect to the session
Copy the code snippet below and add it to the HTML document under // connect to session .
var session = OT.initSession(apiKey, sessionId)
This code initializes the session and then connects to it. You still need some code to begin publishing to the session.
Step three of Five: Create a publisher
Copy the code snippet below and add it to the HTML document under // create publisher .
This will create a publisher movie, so your browser may ask for access to your camera and microphone.
var publisher = OT.initPublisher();
This code permits you to publish an audio-video stream to the session using your webcam and microphone.
Movie not displaying? Attempt clicking the icon in your URL bar to adjust your webcam permissions.
Step four of Five: 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.
This code permits you to subscribe to fresh rivulets published by other clients in the session.
Step five of Five: Add a 2nd movie publisher to create a one-to-one movie talk
Mute the speaker on your computer (to prevent audio feedback), then click the button below to launch a 2nd client in a fresh browser tab (using Codepen). This should create a 2nd publisher, and you will see two movie rivulets on the page.
Clicking the button below will launch a Codepen in a fresh tab in your browser, after which you can comeback to this tab.
That’s it!
You just set up a (very) basic 1-to-1 movie talk using OpenTok. This is a fine very first step, but the code used here is a nude minimum implementation designed for quickly observing OpenTok in act. You’ll need to do a little more setup before launching a production app, including deploying a server.