Add Texting Functionality to a Video Chat With Vonage Video API

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 add texting to a basic audio-video 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 own 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 should be able to have an audio-video chat application with text chat functionality. Text chat is implemented using the signaling API. The final code for this application can be found in this GitHub repository or remixed on Glitch. 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 the first introductory post in the series: Building a Basic Video Chat. If this is your first time using the Video API, we highly suggest you go through that because it covers the 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, basics of Text Chat With Vonage Video API. Implementing text chat with the Video API is done via the signalling API. This signalling mechanism allows clients connected to a session to send text and data to each other. We will only focus on text for now. The Video API Client SDK will dispatch an event when the client receives a signal. For a basic text chat where messages are visible to all connected clients, we will use the signal() method of the Session object. Participating clients will receive that signal by listening to the signal event dispatched by the Session object. We need another event listener to receive that message by listening to the signal event dispatched by the Session object. The data payload from that event will be used to print the message into the message area of the chat window. To make the chat more user-friendly, we also want to add a means of identifying who said what in the chat. We will make use of the user name input on the landing page to get that information, passing it on to the server as a query string in the URL. The following script on the landing.html page passes the room name and user name entered to the index.html page. When the index.html page loads, it will trigger a POST request to the session/:name route, extracting the submitted user name from the URL and passing it onto the server. We can make use of the stream name in the response to label streams so participants can hover over each participant's video stream to see a name. Both the initPublisher() method and the subscribe() method accepts an optional properties argument, which allows us to pass in customisation options for the stream. When participants send text messages, we want to POST them to the server to be stored in the database. We can save messages into the database by creating a saveMessage() function to do that. The final code on Glitch and GitHub contains everything we covered in this fairly lengthy post but re-organised so the code is cleaner and more maintainable. 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!