Twilio migration guide (Web)

This guide walks you through how to migrate your existing Twilio Video implementation to the Vonage Video SDK. It focuses on the Vonage Video API and maps Twilio concepts to their Vonage equivalents so that you can move your app with minimal friction.

Overview

Twilio and Vonage Video APIs have very similar concepts. This starter guide aims to assist you in migrating your video application. The main difference is that in Twilio you need to create a room SID whereas in Vonage you create a sessionId. You then create authentication tokens which are used on the client side to connect to rooms in Twilio or sessions in Vonage. The following diagrams detail the main differences:

Vonage Twilio migraiton illustration 1 Vonage Twilio migraiton illustration 1

Get Video SDK credentials

Create a Video Developer Account to access SDK the Vonage API Customer Dashboard. Once you sign up, you will need to create a Vonage Application with the Video Capability enabled. Once you are logged into the Customer Dashboard:

  1. Go to 'Build and Manage' and then 'Applications'.
  2. Click on '+ Create a New Application.'
  3. Enter in a name for the application.
  4. If needed, change the API Key to the account this application will be registered to. For most customers, you can leave this at the pre-selected setting.
  5. Under 'Authentication,', click on 'Generate public and private key.' A download will start for the private key, which will be used to authenticate your account when you access our APIs. For example, you will use this with the Server SDKs to managing your video sessions.
  6. Scroll down and toggle 'Video' on. We do not need to enter any URLs or settings at this point, but if you want to enable different callbacks for events you can enter in URLs for your application here.
  7. Scroll down and click 'Generate new application.'
  8. At the top of the Application page will be the Application ID you just created. Click the Copy icon to save it for later.

Install

Install the Vonage Video Client SDK for JS:

npm install @vonage/client-sdk-video

Or, use the CDN script tag:

Authentication

The Vonage Video SDK uses tokens to authenticate users. When generating a token you can set the user’s role (subscriber, publisher, or moderator). Optionally, you can also assign a string of metadata to the token (i.e. to identify the connected client). Please refer to our Create Token Overview article for all of the options you can use when generating tokens. Tokens should be generated on the server-side and sent to the client-side on-demand.

Create a video session

A "Session" is like a "room". All clients using the same Session ID will be able to communicate with each other.

Like Tokens, Sessions are created on the server-side. Please refer to our Session Creation Overview article for greater detail, including the various configuration options available.

To create a session and generate a token we recommend using one of our server SDKs.

This code snippet in NodeJS shows how you can create a simple API to generate token and Session IDs in your backend.

The applicationID, sessionId, and token from the server-side will be used on the client-side to authenticate the client session.

Connect to a video session

To connect a client endpoint to a Vonage Video session you need a Application ID, Session ID, and token.

Twilio

Vonage

Publishing Video

Vonage Video SDKs handle the video quality automatically, based on network conditions and device capabilities. That said, you can configure certain properties, such as resolution, framerate, and audio fallback. For more information, please see the exhaustive listing of all publisher configurable options.

Please Note: A single publisher object can handle both audio and video. You may selectively control audio or video using methods provided by this object.

Turn the camera on

Once your session is connected, you can create a video track to show the local preview - At Vonage, we call this the publisher preview.

Twilio

Vonage

At this point, you should see the local preview, but it is not published to the session yet. To publish video to the session, add the following line of code:

Turn the camera off

The Vonage SDK offers simple methods to control the camera.

Twilio

Vonage

This will only stop publishing Video to the session. You can still see your local preview

Render a remote user video

Similar to the Twilio participantConnected and trackSubscribed event listeners, Vonage also triggers connectionCreated and streamCreated events when a remote participant connects to the session and starts sending video.

Twilio

Vonage

Audio

Twilio Video is track-based, which means you must loop through each audio track to start the audio, and add the audio element to the DOM. Vonage can manage both audio and video using a single Publisher object. When you start publishing with default options, we publish both audio and video. However, if you would prefer to have an audio-only session, you may configure the publisher to not publish Video. For more information, please see our list of publisher options.

Mute microphone

When using Twilio, you must loop through each audio track to mute the microphone. Vonage simplifies this by providing a single invocable method.

Twilio

Vonage

Unmute microphone

When using Twilio Video, you must loop through each audio track to unmute the microphone. Vonage simplifies this by providing a single invocable method.

Twilio

Vonage

Text chat

You can exchange data (i.e. text chat messages or custom JSON messages) between individual participants in a session, as well as all participants in a session. This is accomplished using our client SDK, as shown below:

Establish event listeners to receive a signal at this end point.

Event Listeners

Vonage and Twilio have event listeners to help you maintain the state for all participants connected.

Participant connection changes

These events are fired when an end-point joins the session:

Twilio

Vonage

Additionally, Vonage sends events to notify participants of temporary network disconnections and supports automatic reconnection if the client connection is lost.

Leave and End sessions

Replace the Twilio disconnect function with the Vonage disconnect function.

Twilio

Vonage

More information: