Vonage Video API Integration with React

Photo by Jakob Owens on Unsplash

What is Vonage Video API ?

The Vonage Video API (formerly TokBox OpenTok) makes it easy to embed high-quality interactive video, voice, messaging, and screen sharing into web and mobile apps.

The platform comprises an easy-to-use self-service API (available in JavaScript or Flash AS3) and a cloud infrastructure that provides routing, messaging and signal processing support.

The developer uses the API to write an app. TokBox runs the cloud infrastructure that makes it all happen.

Why Vonage Video API ?

• OpenTok allows developers to weave live, group video chat directly into their web experience application
• OpenTok gives the developer complete control over chat and user experience.
• The publish/subscribe model lets developers implement 1–1, group, 1:many, random pairings, many:1, and even more types of chat.
• Having individual control over the layout, sizing and animation of each individual video stream allows the video chat to be a native, fully-integrated part of the web experience.
• It takes the complexity of operating and running a real-time video chat infrastructure off the developers’ plate

Setting up the project structure

All OpenTok applications require both a client and a server component.

The client-side code is what loads in an end-user’s browser and handles the majority of OpenTok functionality, including connecting to the session, publishing audio-video streams to the session, and subscribing to other client’s streams.

The server code is what creates sessions in the OpenTok cloud, Generates tokens for clients, and sends session IDs and tokens to clients.

Now let’s set up a Basic Web Client

Pre-requisites: NodeJS , NPM and React installed on your machine

LEt’s start by creating a react app:

npx create-react-app my-app
cd my-app
npm start

Then install OpenTok plugin

npm i --save @opentok/client

Creating the project files

In your project create a file VideoComponent.js on the same level with the App.js

Require the installed plugin:

const OT = require(“@opentok/client”);

Return 2 div, one for the publisher and another for the subscriber.

<div id=”videos”>
  
  <div id=”publisher”></div>
  <div id=”subscriber”></div>
</div>

Setting up authentication

In order to connect to an OpenTok session, the client will need access to some authentication credentials: API Key, Session ID, and Token .

In a production application, these credentials should be generated by a server, but to speed things up we will just hard code the values for now.

// replace these values with those generated in your TokBox Account
const apiKey = “YOUR_API_KEY” ;
const sessionId = “YOUR_SESSION_ID” ;
const token = “YOUR_TOKEN” ;

• apiKey is generated to single OpenTok account.
• sessionId is generated to a single chat session ( it can be used for several users ).
• token is generated to a single user and it uses the sessionId itself ( to allow the access to the session to only users with the related tokens ).

** You’ll need to adjust the above code with your values which can be generated from the created OpenTokAPI project.

To do this: log into your TokBox Account, either create a new OpenTok API project or use an existing OpenTok API project, then go to your project page and scroll down to the Project Tools section — from there, you can generate a Session ID and Token manually.

** You can continue to get the keys from your account during development and testing, but before production you must set up a server.

Connecting to sessions

What is a session ?

• Every OpenTok video chat occurs within a session.
• You can think of a session as a “room” where clients can interact with one another in real-time.
• Sessions are hosted on the OpenTok cloud and manage user connections, audio-video streams, and user events (such as a new user joining).
• Each session is associated with a unique session ID.
• To allow multiple clients to chat with one another, you would simply have them connect to the same session (using the same session ID).

Still in our VideoComponent.js file:

let session, publisher, subcriber;
export const initializaSession = () => {
 session = OT.initSession(apiKey, sessionId);
 // create a publisher
 publisher = OT.initPublisher(
    "publisher",
    {
       insertMode: "append",  
       width: "100%",
       height: "100%"
    },
    handleError
 );
 // subscribe to newly created stream
 session.on("streamCreated", function (event) {
     subscriber = session.subscribe(
         event.stream,
         "Subscriber",
         {
            insertMode: "append",
            width: "100%",
            height: "100%",
         },
         handleError
    );
 });

 // connect to the session
 session.connect(token, function (error) {
   // If the connection is successful, publish to the session
   if (error) {
       handleError(error);
   } else {
       session.publish(publisher, handleError);
   }
 });
 // do some action upon destroying the created stream
 session.on("streamDestroyed", function (event) {
     console.log("The Video chat has ended");
 });
}

Now we have created our files, added the code we need to start a stream, create a publisher, connect to the stream and subscribe to it,

Now everything is set and you can call initializeSession()

This method initializes a session object and then connects to the session.

You can add stop publishing stream by calling unpublish method on session object

session.unpublish(publisher);

Till This step you’ll have a fully functioning vide chat application. The following section is for extra customization of the user experience

Functionality customization

Publisher:

By default, a Publisher object is initialized to publish to audio and video, if they are available.

• Publishing audio or video only:

const pubOptions = {
      publishAudio: true, 
      publishVideo: false
};
publisher = OT.initPublisher(“publisher”, pubOptions);

• You can also toggle audio and video on and off

publisher.publishVideo(state);
publisher.publishAudio(state);

• You can switch the video input device (camera) used as the video source for a Publisher

publisher.cycleVideo();

Subscriber:

By default, a Subscriber object is initialized to subscribe to audio and video, if they are available.

• Subscribing to audio or video only

const subsOptions = {
     subscribeToAudio: true, 
     subscribeToVideo: false
};
subscriber = session.subscribe( stream,”Subscriber”,subsOptions );

• You can toggle audio and video on and off

subscriber.subscribeToVideo(state);
subscriber.subscribeToAudio(state);

• You can change audio level for subscriber

const subsOptions = {audioVolume: true}; // set it initially
subscriber.setAudioVolume(7); // set it after subscribtion

UI customization

Displaying publisher name:

When you create a Publisher, you can (optionally) specify a name to be displayed in the video:

publisher = OT.initPublisher(
     “publisher”,
      { 
        name: “John”, 
        style: { nameDisplayMode: “on” } 
      }
);

The style.nameDisplayMode property can be set to one of three values:

• auto: The name is displayed when the stream is first displayed and when the user mouses over the video (the default).
• off: The name is not displayed.
• on: The name is displayed.

Once you have created the Publisher, you can change the name display mode

publisher.setStyle({ nameDisplayMode: “off” });

When you subscribe to a stream, you can specify whether the name is displayed in the Subscriber video

subscriber = session.subscribe(
     Stream,
     “Subscriber”,
     { 
       style: { nameDisplayMode: “on” } 
     }
);

Once you have created the Subscriber, you can change the name display mode

subscriber.setStyle({ nameDisplayMode: “off” });

Displaying video controls:

By default, the user interface for a Publisher or a Subscriber includes a mute audio button. For a Publisher, the user can click to toggle the mic on and off. For a Subscriber, the user can click to toggle the speaker on and off.

• When you publish a stream, you can specify whether the mute button is displayed

publisher = OT.initPublisher(
   “publisher”,
   { 
      style: { buttonDisplayMode: “off” } 
   }
);
subscriber = session.subscribe(
   stream,
   “subscriber”,
   { 
      style: { buttonDisplayMode: “off” } 
   }
);

** You can remove the default controls and add your own customized ones.

Conclusion

OpenTok blows up the traditional video conferencing model by allowing developers to weave live, group video chat directly into their web experience in whatever manner makes most sense to their web application.

References

• Vonage Video APIs:

Video API

Video API basics:

Video API Basics

Setup a basic web client:

Set up a simple web client

Customizing functionality:

Adjusting audio and video - OpenTok docs

Customizing the ui:

Customizing the UI - JavaScript - OpenTok docs

You may also want to check my simple React video chat application in the following link:

samah-gaber/vonage-video-chat-application

Thank you for your time. Any comments and feedback are most welcomed 😊