Building Your Own Group Voice Calling Application Using the Agora Web SDK

This blog was written by Akshat Gupta an Agora Superstar. The Agora Superstar program empowers developers around the world to share their passion and technical expertise, and create innovative real-time communications apps and projects using Agora’s customizable SDKs.

Introduction

Love talking to your friends or colleagues but feel current applications aren’t living up to your expectations? If you’re an enthusiastic developer like me, I bet you must be thinking of developing your own customizable group calling application!

In this tutorial, we will develop a web application that supports voice calling among multiple users using the Agora Web 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. A few UI elements are necessary, such as the local audio stream uid, the remote audio streams’ uids, and buttons for joining, leaving, and muting and unmuting. I’ve also imported the necessary CDNs and linked the custom CSS and JS files.

Adding Color

Now that our basic layout is ready, 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.

https://gist.github.com/akshatvg/6f8a7297da5ecf942d1c51b10ee124b9

Muting and Unmuting the Audio

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

Core Functionality (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 and demos and put in a little practice, it’ll be a piece of cake.

We first create a client and then create a microphone audio track (line 58). You can use a .env file or directly hardcode the App ID in the application and take in the channel name and token (optional) from the front end.
If you don’t use tokens, specify the tokens as null.

When a user joins a channel by clicking the button, you begin playing the tracks specified while creating the client. The user’s stream is then published (line 60)and subscribed (line 68) which can be toggled using the UI controls we wrote above.

When a track is unpublished (line 84), remove the uid from the user’s screen.

Finally, we give the user an option to end the call and leave (line 43) 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 multiple users on the call.

Conclusion

You did it!

We have successfully made our very own group voice calling 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. If you have questions, please let me know with a comment. If you see 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 Developer Slack Community: