Stream Video Chat With Texting Using Vonage Video API

Published May 04, 2020 by Hui Jing Chen

This series of tutorials will explore the Vonage Video API (formerly TokBox OpenTok) and what you can build with it. The Video API is very robust and highly customizable, and in each post, we’ll show how to implement a specific feature using the API. This time we will look at how to provide an option for people to watch a stream of your video chat and interact with each other via text chat.

As this application will require some server-side code, we will use Glitch for ease of setup. You can also download the code from this Glitch project and deploy it on your server or hosting platform of choice (may probably require some configuration tweaking based on the requirements of your platform).

We will not be using any front-end frameworks for this series, just vanilla Javascript, to keep the focus on the Video API itself. At the end of this tutorial, you will be able to join the video chat as either a Viewer or a Participant. The difference between these two roles is that viewers can see all published video streams and interact with others via text chat, while participant can additionally publish their video to the chat.

Screenshot of viewer page with text chat open

The final code for this application can be found in this GitHub repository or remixed on Glitch.

Prerequisites

Before we get started, you will need a Vonage Video API account, which you can create for free here. You will also need Node.js installed (if you are not using Glitch).

This tutorial builds on a previous tutorial: Add Texting Functionality to a Video Chat. It covers how to use the signaling API for texting capabilities in your video chat.

If this is your first time using the Video API, we highly suggest going through the first introductory post in the series: Building a Basic Video Chat, because it covers the following basic setup:

  • Create a Vonage Video API project
  • Setting up on Glitch
  • Basic project structure
  • Initializing a session
  • Connecting to the session, subscribing and publishing
  • Basic layout styles for a video chat

Initial Setup

As we are building onto a basic video chat with texting capabilities, start by remixing the project built in the previous tutorial. Click the big Remix button below to do that. 👇


remix this

Your folder structure should resemble something like this:

Folder structure of the project

As mentioned at the start, TokBox OpenTok is now Vonage Video API. We haven’t made any changes to our package names, so you will still reference OpenTok in your code.

To get the video chat up and running, go to the .env file and fill in your API key and secret for your project, which you can find from the Vonage Video API dashboard. Once that’s done, we will make some additions to the project to provide an interface for viewers.

Add the Required Markup

Our application will be made up of three pages: a landing page for users to create or join a session as well as to select if they want to be a viewer or a participant, and the two video chat pages for each role, respectively.

We will need to create an additional page for the viewer. Let’s add a viewer.html file to the views folder by clicking the New File button in the left sidebar. Name the file views/viewer.html and paste the following markup into the page. This page is almost the same as the index.html file, except it does not have a div for publisher.

Add a viewer.html to the views folder

We will also need to add a set of radio buttons for users to select their roles on the landing.html page.

Style the New Fieldset

You can add the following styles to make the default fieldset and radio buttons layout slightly nicer. Or restyle them all together based on your preferences.

Refactor the Client-Side Javascript

The script at the bottom of the landing page needs to be modified to redirect users to the correct page based on the user type they selected.

As for the client.js file, the variables declared at the top of the file also needs some tweaks as our URL format is slightly different in this tutorial.

Different functions in the server.js file will generate subscriber and publisher tokens, so this information will be included in the POST request when the page loads.

The final tweak is to the initializeSession() function, as only participants need to create a publisher and publish to the session.

Handle Routes on the Server

On the server.js file, we will need to make some additional changes to serve the correct files for viewers and participants, respectively.

As we now have two pages to take care of, let’s move the POST handler functionality into a separate function, which takes in userType as a parameter so we can use it during token generation.

The generateToken() function now takes in userType to differentiate the token tole for viewers and participants.

If all went well, you should be able to enter a room as a participant and video chat with other participants, as well as interact with viewers via text chat. If you entered the room as a viewer, you should be able to watch an on-going video chat (provided there is one happening) and chat with everyone in the session via text chat.

Screenshot of viewer page with text chat open

Do check out the final code on Glitch or GitHub and feel free to remix or clone the code and play around with it yourself.

What’s Next?

There are additional functionalities we can build with the Vonage Video API, which will be covered in future tutorials. But in the meantime, you can find out more at our comprehensive documentation site. If you run into any issues or have questions, reach out to us on our Community Slack. Thanks for reading!

Leave a Reply

Your email address will not be published.

Get the latest posts from Nexmo’s next-generation communications blog delivered to your inbox.

By signing up to our communications blog, you accept our privacy policy , which sets out how we use your data and the rights you have in respect of your data. You can opt out of receiving our updates by clicking the unsubscribe link in the email or by emailing us at [email protected].