Two way communication: Chat during a live stream

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.

Latency

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.

Chat

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