How To Build A Chat Widget For Live Video Streams

Chat messages are a very common way that users can talk with each other during a live event. Chat can be used in a variety of scenarios ranging from live streams like the ones seen on Twitch to private messages during live video conferences.

This tutorial will cover building a transparent live chat that can appear over any video conference or live stream screen as Widget through BingeWave. The lessons learned should take under an hour to fully implement.

Getting Started And Github Repo

To get started, for developers that are new to building interactive widgets with BingeWave, please visit this short explainer on the Widget Builder and the process of building interactive solutions:

https://developers.bingewave.com/widgets/gettingstarted

All of our tutorials are accompanied by a Github Repo to assist developers in creating their widgets. To view the repository for this tutorial, please see here

https://github.com/BingeWave/widget-chat-app

Step 1: Creating The HTML Structure

In the first part of this tutorial, we will create a basic HTML structure for the chat application. In our chat application, we will need the following items:

1. An area where the messages will be displayed.
2. An input box for the user to enter text for a new message
3. A button for submitting a chat

Our HTML structure is going to reflect that structure. So the initial structure of the HTML will be the following:

We can break down the HTML as the following:

1. Bootstrap: All of the CSS classes such as col-x, p-x, row and so forth are bootstrap and are used to set the spacing and positioning. If you a new to Bootstrap, read up on it here: https://getbootstrap.com/docs/5.0/getting-started/introduction/
2. Namespacing: The elements in the chat are namespaced. Namespacing is the process of prefixing elements for a widget a namespace that will prevent collisions with potential other HTML that have the same id attribute.The {{namespace}} attributes will be dynamically replaced with the namespace of the current widget.
3. Ul list: The unordered list will be where the chat messages will be placed in li (list item) tags.
4. Input: The input where the text area that users will type their message.
5. Button: The button will be where the users click to send the message on the screen. Its namespace is set to call the function submitMessage().

The basic HTML is set up for our chat now, the rest of the functionality will be governed by the CSS and Javascript.

CSS Implementation

Next, we are going to use CSS to design our chat. For this chat, we will want it to be transparent and appear over the video screen. In the HTML, we have everything namespaced, and we use the same namespaces provided in the CSS. Remember that namespaces are dynamically replaced during runtime with the namespace assigned to the current widget. Our first CSS code will look as such:

In the above code, we set the bounds of the chat. You want to set a max-width and max-height to keep the chat constrained; otherwise, it can overflow to other elements. Next, we will add css to affect the scrolling.

With this CSS, the scrollback showing has been disabled. Next, we can style the unordered list.

In the above code, we have done the following:

1. We removed the bullets in the ul list list-style-type and list-style-position.
2. The chat we are building is transparent, so we make it transparent with the opacity option.
3. We outline text by using the text-shadow attribute, so it stands out from the video screen background.

When the text is inserted inside the list item, we will put it inside a blockquote.

Next, we are going to add a little animation to the CSS. The animation will have the text coming in from the left side gradually.

And finally, we are going to add a specific class for forcing items to be transparent and having an outline.

The complete CSS file should look like the following:

Great, now our chat widget should be showing on-screen, and it should be transparent. Now it is time for the meat of the application.

Implementing The Javascript

Now the Javascript has a few different sections and utilizes multiple components of BingeWave’s API. We will cover those components over the remainder of this tutorial.

Start Javascript coding block by defining some global variables you will use several times.

We are using the namespace that is stored in BWProperties to get the elements by their IDs with document.getElementByID and associate the returned value with a variable. BWProperties is an object passed into all widgets that containers information such as the live event id, account information, and other important data that can be used in the components operations.

The first function we will write is appending a message to a screen. Before we append a message, you have to understand the format of the message. The message data will be a JSON object that is described here:

https://developers.bingewave.com/docs/chats#view

The message is fairly simple with the id, the message, and an account object of the user that left the message. Understanding the format will cause our message function to look like this:

The code can be broken down as such:

1. A new list item(li) is created that we will add to the unordered list(ul).
2. A blockquote element is created and assigned to a variable.
3. Inside the blockquote, we refer to the documentation and output the user’s name and the message left in the chat.
4. Then we append the message to the list item and the list item to the chat.
5. Finally, we use the scroll to scroll to the bottom of that chat element.

Now that we have functionality for appending a chat message to the screen, our next step is handling the submission. The submission of a message looks like this below:

Reviewing the code above, the input text is retrieved from the HTML text input. Then we submit it using the BWAPI. The BWAPI documentation can be found here:

https://developers.bingewave.com/javascript/bwapi

The BWAPI will call BingeWave’s API with the current user authentication token.The API route being called is the one to send a message found here:

https://developers.bingewave.com/docs/chats#send

With this, we are passing the message to the API route with the event id, and BWAPI uses the current user’s auth token. But wait, in the Promise nothing is happening, so how is the message being outputted to the screen? We are using BWEvents:

https://developers.bingewave.com/javascript/bwevents

BWEvents is a subscriber and publisher pattern for both sending and listening to events that happen. One of the built-in events that you can listen to is when a chat message is sent. We are going to subscribe to a chat event as such:

Every time a message is sent, whether from the current user or another user, the subscription to the chat_event will capture that message and send to the appendMessage function. Now let us add in a function for when the enter button keyboard is used:

Some users will have keyboards and can press return to send a message. The code above will capture when the return key is hit and send the content inside the input box. Finally, let’s add this init function:

The init function uses BWAPI to get an endpoint that will retrieve all messages. We call this function only once during the init because the number of messages being returned can be a lot, and we want to use minimal bandwidth. The API endpoint will return the following:

https://developers.bingewave.com/docs/chats#list

After the messages are retrieved, they are iterated over, and each message is put on the screen using the appendMessage function. Finally, we need two last things to your code:

We do two things:

1. Call the init function when the widget loads
2. Make the submitMessage function public by adding it to the namespace global scope, otherwise the function will be private.

That’s it! You now have a chat application that users can send chat messages and it appears over the video screen. The complete Javascript code for the chat functionality is here:

Conclusion

The above tutorial explains how to write your own custom chat application that is associated with a live event. For more tutorials on writing custom widgets that can be integrated with live streams and video conferencing, please visit: https://developers.bingewave.com/tutorials