Suggestions

close search

Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs

Visit the Vonage API Developer Portal

Vonage Video Express

Getting Started

Vonage Video Express is a JavaScript library to quickly create a multiparty video conference web application. It works on top of the Vonage Video API for JavaScript.

Important notes:

Before using Video Express, be sure to activate the Video Express add-on for your account.

  1. Go to your Video API Account and click Account Settings in the left-hand menu.
  2. In the list of Account add-ons, find Video Express and click Add to account. Then follow the remaining instructions to enable the add-on.

Vonage Video Express 1.0 currently supports 25 simultaneous participants in a room. If you add more than 25 people in a session, you will need to ensure that participants’ network and hardware performance is sufficient.

A Quick Start

  1. Install the Video Express package:

    • Installation using the npm package

      $ npm i --save @vonage/video-express
    • We can also use a script tag in the <head> section of the HTML page, to include Vonage Video Express in our application

      <script src="https://static.opentok.com/v1/js/video-express.js"></script>
  2. Currently, Vonage Video Express doesn't include a default UI. So you will need to add CSS to style the room components in your app:

    For a quick start, copy the video-express-styles.css file and include it in your head section:

    <link rel="stylesheet" href="/path/to/video-express-styles.css" media="screen" charset="utf-8">
  3. Add a div element within the body section. This will be the room container. The SDK will append all of its DOM components within this container:

    <body>
     <div id="roomContainer"></div>
    </body>
  4. Use this code snippet to create a room and to join the video conference. To create the room object, you will need to provide your OpenTok API key, an OpenTok session ID, and a token for the session:

    <script type="text/javascript">
     const room = new VideoExpress.Room({
       apiKey: '', // add your OpenTok API key
       sessionId: '', // add your OpenTok Session ID
       token: '', // add your OpenTok token
       roomContainer: 'roomContainer',
     });
    
     room.join();
    </script>

    See the OpenTok developer guides on Session Creation and Token Creation.