Building Your Own Many To Many, Live Video Streaming Using The Agora Web SDK

Guided tutorial with code snippets.

Introduction

In today’s era, every person and company has gone digital to move ahead with the trends.
Live streaming has become a vital feature in social media apps as more users look to interact and share real-life moments with their family and friends in real time, grow their followings, or even establish themselves as creators.

In this tutorial, we will develop a web application that supports live streaming supporting multiple hosts as well as multiple audience members using .

Screenshot of the simple live streaming application we will be developing.
Screenshot of the simple live streaming application we will be developing.
Screenshot of the simple live streaming application we will be developing.

Prerequisites:

Project Setup

Let’s start by laying out our basic html structure. There are a few UI elements we must have, such as the local video stream, the remote video streams, a toolbar that will contain buttons for toggling audio/video streams, and lastly a way to leave the chat. I’ve also imported the Bootstrap, JQuery, Font Awesome and Agora SDK CDNs and linked the custom CSS and JS files.

Without any CSS or color, just plain HTML.
Without any CSS or color, just plain HTML.
Without any CSS or color, just plain HTML.

Adding CSS

Now that our base has been laid out, it’s time to add some CSS.
I’ve already added basic Bootstrap classes to the HTML to make the site presentable, but we’ll use custom CSS to match the site with a blue Agora-based theme.

With CSS.
With CSS.
With CSS.

Muting and Unmuting the Video and Audio

Let’s add some functionality to our beautiful website. We will begin with the UI controls (muting and unmuting the video as well as audio for the hosts). A little JS here and a little JS there does the job:

So far so good?

Core Structure (JS)

Now that we have the HTML/DOM structure laid out, we can add the JS, which uses the Agora Web SDK. It may look intimidating at first, but if you follow Agora’s & and put in a little bit of practice, it’ll be a piece of cake.

We first create a client and specify the audio as well as video tracks. You can use a .env file or directly hardcode the App ID into the application and take in the channel name and token (optional) from the frontend.
If you don’t use tokens, specify the tokens as null.

When a host or audience joins a channel by clicking the buttons, you can set the user’s role and begin playing the tracks specified while creating the client. The user’s stream is then subscribed and published which can be toggled using the UI controls we wrote above.

Finally, we give the user an option to end the stream and leave the channel.

Note: You need to enter your own App ID in the JS code above. I replaced my App ID by <> to avoid unnecessary charges.

You can now run and test the application.

Note: For testing, you can use two (or more) browser tabs to simulate single/multiple host(s) and single/multiple remote audience.

Conclusion

You did it!

We have successfully made our very own live streaming web application. In-case you weren’t coding along or want to see the finished product all together, I have uploaded all the code to GitHub:

If you would like to see the demo in action, check out the demo of the code in action on:

Thanks for taking the time to read my tutorial and if you have any questions please let me know with a comment. If you see any room for improvement feel free to fork the repo and make a pull request!

Other Resources:

To learn more about Agora’s Web NG SDK and other use cases you can refer to the developer guide given over here:

You can also have a look at the complete documentation for the functions discussed above and many more over .

Web Developer with keen interest in SEO & Digital Marketing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store