OpenTok Web Samples

Sample applications for using the OpenTok.js library with vanilla JavaScript.

For framework examples (Angular, React, Vue etc.) please see the Web Component example applications. For the electron app samples, these have been moved to Vonage Community

The code for this sample is found the following subdirectories:

• Archiving (source) -- This sample shows you how to record an OpenTok session.

• Basic-Audio-Transformer (source) -- This sample application shows how to use a basic audio transformer with the Vonage Video APIs. It is very similar to the Basic Video Chat example but it adds a low-pass filter to the published audio.

• Basic-Captions (source) -- This sample application shows how to use captions transcribing with the Vonage Video APIs.

• Basic-Background-Blur (source) -- This sample application shows how to add background blur with the Vonage Video APIs and Vonage ML Transformers library.

• Basic-Video-Transformer (source) -- This sample application shows how to use a basic video transformer with the Vonage Video APIs. It is very similar to the Basic Video Chat example but it adds a threshold processor to the published video.

• Basic Video Chat (source) -- This sample shows you how to connect to an OpenTok session, publish a stream, and subscribe to a stream.

• Basic-Video-Zoom (source) -- This sample shows you how to use a video transformer to zoom and center a publisher.

• Moderate-Background-Blur (source) -- This sample application shows how to add background blur with the Vonage Video APIs and Vonage ML Transformers library.

• Publish-Canvas (source) -- In this sample application we show you how to publish a custom stream from a Canvas tag.

• Publish-Video (source) -- In this sample application we show you how to publish a video file to an OpenTok Session.

• Publish-Devices (source) -- In this sample application we show you how to choose different Cameras and Microphones when publishing.

• Stereo-Audio (source) -- In this sample application we show you how to publish a stereo music file to an OpenTok Session.

• Signaling (source) -- This sample shows you how to use the OpenTok signaling API to implement text chat.

• Stream-Filter (source) -- This sample shows you how to apply custom grayscale, sepia and invert filters.

See the README file in each of these subdirectories for application-specific notes.

Each of these sample applications are described in the Web tutorials section of the OpenTok developer center.

Not seeing a sample application for what you are trying to do? File a new issue or upvote an existing one.

Configuring the application

1. Clone this repository.

2. Edit the config.js file and set the values for API_KEY, and TOKEN:

   To do this, log into your TokBox Account, and either create a new project or use an existing project. Then go to your project page and scroll down to the Project Tools section. From there, you can generate a session ID and token manually. Use the project’s API key along with the session ID and token you generated.

Important notes:

• You can continue to get the session ID and token values from your Account during testing and development, but before you go into production you must set up a server. We will discuss this in the Setting up the test web service section.

• The Archiving sample app requires you to set up the test web service.

Testing the application

1. The web app is in the index.html (in each sample directory). Open the index.html in a supported browser.

   For information about which browsers are supported by the OpenTok.js library see the browser support section of the documentation.

2. When prompted, grant the page access to your camera and microphone.

3. Mute the speaker on your computer, and then load the page again in another browser tab.

   You will see a person-to-person video chat session using OpenTok.

See the README file in each of these subdirectories for application-specific notes.

Setting up the test web service

The Learning OpenTok PHP repo includes code for setting up a web service.

1. Clone or download the repo and run its code on a PHP-enabled web server. If you do not have a PHP server set up, you can use Heroku to run a remote test server -- see Automatic deployment to Heroku.

2. After getting this web service running, edit the config.js file and set the value for SAMPLE_SERVER_BASE_URL to the URL for the web service:

   • If you deployed the test web service to a local PHP server, set this to the following:

     var SAMPLE_SERVER_BASE_URL = 'http://localhost:8080';

   • If you deployed this online, set this to the following:

     var SAMPLE_SERVER_BASE_URL = 'https://YOUR-SERVER-URL';

   Do not add the trailing slash of the URL.

The sample will load the OpenTok session ID, token, and API key from the web service. Also, the archiving sample will use the web service to start, stop, and view archives.

Other resources

See the following:

• API reference -- Provides details on the OpenTok.js API

• Developer guides -- Includes conceptual information and code samples for all OpenTok features