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

Guided tutorial with code snippets.

Introduction

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.

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

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

With CSS.
With CSS.
With CSS.

Muting and Unmuting the Video and Audio

So far so good?

Core Structure (JS)

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!

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.

Web Developer with keen interest in SEO & Digital Marketing.