Adding PubNub Chat to an Agora Video Web App

Adding PubNub Chat to an Agora Video Web App

In this tutorial, I will show you how to integrate the PubNub Web SDK to add text-based chat to a web app that uses the Agora Web SDK. Digital communication is ubiquitous in society, and more teams are looking to add voice, video, and text chat features to their products. Agora ...

Digital communication is ubiquitous in society, and more teams are looking to add voice, video, and text chat features to their products. Agora and PubNub offer tools that enable teams to quickly and easily build real-time applications that utilize voice, video, and text chat features to connect their users in more meaningful ways.

In this tutorial, I will show you how to integrate the PubNub Web SDK to add text-based chat to a web app that uses the Agora Web SDK for voice and video communication.

For the TL;DR crowd check out the [live demo_](https://digitallysavvy.github.io/agora-video-with-pubnub-chat/)._

*Agora and PubNub accounts are required.

Prerequisites

Project Setup

To start, let’s use the code from my tutorial “Building a group video chat web app” as our base project. This project has all the features for basic video chat: toggles for camera and mic, and buttons to join and leave the call.

Build

The build phase of this tutorial covers modifying the input form to add inputs for the PubNub keys, adding the chat UI, integrating a PubNub client, connecting the PubNub client to a channel, and using the client to send and receive messages in the channel.

Update the Form

In the “Building a group video chat web app” tutorial, I hard-coded the App ID, channel name, token, and UID values in the agora-interface.js file. But in the base project I have since updated the code to include an input form to enter the App ID, token, and channel name.

This project uses the existing modal form and adds new inputs to the join modal for the PubNub keys. Open index.html and update the modalForm to include text input for the PubNub publish and subscribe keys.

programming web-development agora video-chat javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Build a Video Chat Service with JavaScript, WebRTC, and Okta

Learn how to use WebRTC, JavaScript, and Okta to build a video chat service. You will use Node.JS and Express for the server framework. Web Sockets will handle the communication between peers in each room. Okta will manage the authentication and identity for each user. Finally, WebRTC will manage the broadcasting of the video and voice.