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

Guided tutorial with code snippets.

Introduction

In this tutorial, we will develop a web application that supports voice calling among multiple users using the Agora Web SDK.

Screenshot of the simple voice calling application we will be developing.
Screenshot of the simple voice calling application we will be developing.
Screenshot of the simple voice calling application we will be developing.

Prerequisites:

Project Setup

Screenshot of our site with the above code.
Screenshot of our site with the above code.
Screenshot of our site with the above code.

Adding Color

The magic of CSS.
The magic of CSS.
The magic of CSS.

Muting and Unmuting the Audio

Core Functionality (JS)

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!

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:

You can also join our Slack channel:

Web Developer with keen interest in SEO & Digital Marketing.