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 Agora’s SDK.
Prerequisites:
- Basic knowledge of how to work with JavaScript, JQuery, Bootstrap, Font Awesome
- An Agora developer account (see How to Get Started with Agora)
- The Agora Web SDK.
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.
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.
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 official docs & demos 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 here.
You can also join the Agora.io Developer Slack Community:
