Vonage Video API Web Samples

Sample applications for using the Vonage Video API 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:

• Advanced-Noise-Suppression (source) -- This sample application shows how to add a background Noise Suppression feature to the Vonage Video APIs. It is very similar to the Basic Video Chat example but it adds a NoiseSuppressionTransformer from the @vonage/noise-suppression library along with the MediaProcessor and MediaProcessorConnector from @vonage/media-processor. This method allows for additional audio transformers to be applied.

• Archiving (source) -- This sample shows you how to record a Vonage Video 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-Background-Blur (source) -- This sample application shows how to add background blur with the Vonage Video APIs.

• 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 a Vonage Video 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.

• Live-Broadcast (source) -- This sample shows you how to do a live broadcast using WebRTC, HLS, and RTMP.

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

• Moderate-Noise-Suppression (source) -- This sample application shows how to add a background Noise Suppression feature to the Vonage Video APIs. It is very similar to the Basic Video Chat example but it adds a createVonageNoiseSuppression from the @vonage/noise-suppression 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 a Vonage Video session.

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

• SIP (source) -- In this sample application we show you how to Vonage's Voice API to provide SIP connectivity to video calls.

• Stereo-Audio (source) -- In this sample application we show you how to publish a stereo music file to a Vonage Video session.

• Signaling (source) -- This sample shows you how to use the Vonage Video 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 Vonage Video 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 value of SAMPLE_SERVER_BASE_URL to the URL of a copy of our Learninv Video Sample Server. If you do not have a copy of the sample server running, some demos may allows you to set values for APPLICATION_ID, SESSION_ID, and TOKEN:

Do we have a way to generate the session Id and token from the Vonage dashboard?

To do this, log into your Vonage Account, and head to the Video Playground located under "Developer Tools" > "Video" > "Playground." Here you can configure options for a new video session, and get values for the Application ID, Session ID, and Token.

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 Vonage Video 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 Vonage Video.

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

Setting up the test web service

The Sample Vonage Video NodeJS Server App repo includes code for setting up a web service.

May be able to use VCR fka NeRu

1. Clone or download the repo and run its code on a Node-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 Node 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 Vonage Video session ID, token, and Application ID 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 Vonage Video API

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