Vonage Video Express

Deprecation Notice

Vonage Video Express is now deprecated. While the library remains available for existing integrations, we recommend that all new projects and customers looking to migrate use the Video API Reference App.

Why the Change?

The Video API Reference App provides a more robust, modern, and customizable foundation for building multiparty video applications. It offers:

Best Practices: Up-to-date implementation of the Core Video SDKs.
Production-Ready UI: Highly customizable components for Web, iOS, and Android.
Advanced Features: Better support for complex layouts and modern browser capabilities.

Next Steps:

New & Existing Users: Please start your journey with the Video API Reference App Overview.
For additional guidance, Contact Vonage Video support (support@api.vonage.com).

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.

Go to your Video API Account and click Account Settings in the left-hand menu.
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

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
widgets.copy
```
<script src="https://static.opentok.com/v1/js/video-express.js"></script>
```

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">

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>

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 developer guide.

And see these sample apps on GitHub:

video-express-react-app — A multi-party video app with Video Express and Create React App. In addition to features provided by Video Express, the app includes room and participant name selection, archiving (recording), and more.
Vonage Video Express iOS and Android demo — an app that uses Video Express in web views (such as WKWebView in iOS and WebView in Android) for mobile apps.