Vonage Video API Integration with React

Photo by Jakob Owens on Unsplash

What is Vonage Video API ?

Why Vonage Video API ?

Setting up the project structure

Now let’s set up a Basic Web Client

npx create-react-app my-appcd my-appnpm start
npm i --save @opentok/client

Creating the project files

const OT = require(“@opentok/client”);
<div id=”videos”>

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

Setting up authentication

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

Connecting to sessions

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"); });}
session.unpublish(publisher);

Functionality customization

Publisher:

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

Subscriber:

const subsOptions = {
subscribeToAudio: true,
subscribeToVideo: false
};
subscriber = session.subscribe( stream,”Subscriber”,subsOptions );
subscriber.subscribeToVideo(state);subscriber.subscribeToAudio(state);
const subsOptions = {audioVolume: true}; // set it initiallysubscriber.setAudioVolume(7); // set it after subscribtion

UI customization

Displaying publisher name:

publisher = OT.initPublisher(
“publisher”,
{
name: “John”,
style: { nameDisplayMode: “on” }
}
);
publisher.setStyle({ nameDisplayMode: “off” });
subscriber = session.subscribe(
Stream,
“Subscriber”,
{
style: { nameDisplayMode: “on” }
}
);
subscriber.setStyle({ nameDisplayMode: “off” });

Displaying video controls:

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

Front end developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store