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.

More resources

See the Video Express API reference. And see the Video Express readme at npmjs for more code samples and details on Video Express events.