Creating a Video Chat Application with OpenTok and Nexmo In-App Messaging

Published January 08, 2019 by Manik Sachdeva
Categories:

In this blog post, we’re going to build a web application that allows users to video chat and send messages to each other using OpenTok and Nexmo In-App Messaging.

To see the full code, please check out the following repo. You can also check out our recent webinar that covers the application.

Prerequisites

Structure of the App

Create a directory and name it whatever you’d like:

We’ll go ahead and create a few files and subfolders inside the directory using the following commands:

Our project structure should now look like this:

Dependencies

We’ll create an NPM project and install all of the dependencies required for the project:

Now, let’s go ahead create our server by adding the server code to the server.js file.

Please note that we’ve created a server using ExpressJS and are returning empty credentials for both OpenTok and Nexmo. Don’t worry, we’ll generate the credentials in the next few steps, but before we do that let’s go ahead and create our Nexmo messaging application using the Nexmo CLI:

Using the app:create command, we’ll get the application ID for our video-messaging-app along with a private key which will be added to the directory. Please note that we’ve set the answer and event urls to example urls, but we can change these later. Using the conversation:create command, we have also created a conversation called Nexmo In-App Messaging. This will result in a conversation ID which we will use later to connect to the conversation. The user:create command also allows creates a user tied to the application. Please note the name of this user because we will use it as a part of our JWT generation process.

We’ll now create an OpenTok API project using the TokBox dashboard so you can get access to the API Key and Secret.

Now, let’s open our config.js file so we can store our credentials:

Make sure to add the appropriate credentials to the config.js file

Importing the config variables:

In our server.js file, let’s go ahead and import the config variables so we can use these to instantiate OpenTok and Nexmo classes.

Now let’s go ahead and update the GET request path so we can return valid credentials:

Using the code above, we’ll create the following each time someone visits the / path from their browser:

  • OpenTok session ID
  • OpenTok Token for the corresponding session ID
  • JWT Token for our Nexmo application with the appropriate ACLs

You can see this in action by visiting localhost:3000 in the browser:

Now that we’ve created a mechanism to get the credentials let’s go ahead and work on the client side of the application.

Open up the index.js file located in the js directory.

In the code above, we initialize an OpenTok Session by calling the initSession method on the OT object. We then create a publisher and set the following event listeners: streamCreated, streamDestroyed, and sessionConnected. These event listeners are used to subscribe to streams when a stream is created, print a message when a stream is destroyed, and publish to the session when we’re connected. We then proceed to connect to the session using the token we generated on the server.

Now that we’ve added the code for a video chat let’s add In-App Messaging.

The ChatApp class will be used to add our In-App messaging features. We will also grab the reference to a few DOM elements that we’ll create in our index.ejs file.

Let’s go ahead and add some helper methods to the ChatApp class for logging our events and errors to the console:

Moving on, we need to instantiate a ConversationClient and authenticate with the nexmoJWT token generated by our server:

Now that we have a reference to the conversation, let’s go ahead and set up our conversation events:

We can retrieve the conversation history by calling the getEvents method on the conversation object. Let’s go ahead and create a helper method so we can display the chat history on the DOM. As you can see below, we’re using the different types to distinguish between the events:

We should also set up some user events to know when the end user has triggered actions on the HTML page:

Let’s make sure to set call the setupUserEvents() method in our constructor:

Let’s recap what we did in the code above. We’ve created a class called ChatApp that creates a ConversationClient which we authenticate using the nexmoJWT token. We also set an event listener, text, on the conversation object to listen to any incoming messages. Please note that to retrieve older messages from the conversation, we use the getEvents method. We use some event listeners on the DOM to display information when things are changed.

Now that we’ve created the ChatApp class let’s go ahead and instantiate a ChatApp class when the onload event fires so we can use the DOM elements as needed.

After completing our index.js, let’s go ahead and add some information to our index.ejs file:

The code above is rendered by our server when someone visits the / path. As you can see, we pass in our credentials which we use for the OpenTok Session and Nexmo Conversation Client.

Lastly, let’s modify our server to render the index.ejs view with the right variables:

Now that we have everything set up, let’s add a start script to our package.json file so we can easily start the server:

Run npm start in your terminal and run the application!

Conclusion

In this blog, we’ve covered important OpenTok and Nexmo In-App Messaging concepts showcasing the ability to add live video and in-app messaging to web applications. To see the full code, please refer the following repo.

Leave a Reply

Your email address will not be published.