Tutorials · 3 min read

chat screenshot

Two way communication: Chat during a live stream

Live streaming is one way communication to many. In order to bring your viewers into the conversation, why not add a chat feature?

Doug Sillars

August 19, 2021

Live streaming is a "one to many" form of communication. Like a conference talk, or a class lecture - the live streamer(s) are presenting, and the viewers watch. With api.video's live streaming, you can stream to thousands of viewers around the world in near real time!

However, at a conference there are Q&A sessions. During a lecture, students may raise their hands with a question. The communication is still primarily "one to many", but there is an aspect of reverse communication that is lost with just a live stream.

In many of the virtual conferences I have spoken in over the last 18 months, this reverse communication has been facilitated with a chat application. Much like a live streamer on Twitch can get text questions/comments, the chat allows for the communication from the viewer to the streamer.


With HLS live streaming - you are able to broadcast to thousands of viewers, but there is generally a latency behind 'real-time' of 5-20 seconds. The great thing about a 'real-time' chat is that this latency cannot be felt by the viewers. Any delay in reply from the streamer is attributed to typing time, or reading time, or formulating the answer time - making chat-boxes and HLS live streaming an excellent combination.

Building Chat & Live Streaming

In this post, we'll build a simple webpage that integrates a live stream from api.video with a chat app from CometChat.

Live Video

When you Create a Live Stream, a player URL and iframe are generated:

<iframe src="https://embed.api.video/live/li4pqNqGUkhKfWcBGpZVLRY5" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen=""></iframe>

You can paste this iframe into a webpage, and the live stream will appear on that page. If the stream is not streaming, you'll see the thumbnail.


To add a chat widget, simply copy the code from the CometChat web widget page to the same page. Add in your credentials into the chat widget, and it'll load as you expect.

That's it

Really - that is all there is to it. A little boilerplate code from api.video, and from CometChat, and your live stream with chat is now up and running.

You can see an example of this today at chatduring.a.video. It was built in about 5 minutes using the steps above. (if the live stream is not broadcasting, it is because I am moving this month, and my Raspberry Pi is in a box around here... somewhere....) The code is live on Github (it's literally just the html page) if you want to crib even further.

So, check out the demo, and build your own. We'd love to see what you've built - leave a note with a link on our community page

Try out more than 80 features for free

Access all the features for as long as you need.
No commitment or credit card required

Video API, simplified

Fully customizable API to manage everything video. From encoding to delivery, in minutes.

Built for Speed

The fastest video encoding platform. Serve your users globally with 140+ points of presence. 

Let end-users upload videos

Finally, an API that allows your end-users to upload videos and start live streams in a few clicks.


Volume discounts and usage-based pricing to ensure you don’t exceed your budget.