Muting And Unmuting A Remote User In A Video Call Web App
Last week, as I was giving a project review, my teammate forgot to turn off his microphone when someone in his room started talking to him. Our project review was interrupted by the chatter from his end, so we had to call and ask him to turn off his microphone.
If the host had had the option to mute my teammate, our meeting would not have been disrupted.
In this tutorial, we will develop a web application that supports muting and unmuting the video and audio streams of remote users in a group video calling application using the Agora Web SDK and the Agora RTM SDK.
Prerequisites
- Basic working knowledge of JavaScript, JQuery, Bootstrap, and Font Awesome
- An Agora developer account (see How to Get Started with Agora)
- The Agora Web SDK
- The Agora RTM 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, the list of remote users,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.
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.
In the following snippet, we first create a client and then create a microphone audio and camera video track (line 56 and line 57).
Tokens are used for incorporating additional security into our application. 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 63) and subscribed (line 88), which can be toggled using the UI controls we wrote above.
When a user leaves (line 116), remove the uid from the user’s screen.
Finally, we give the user an option to end the call and leave (line 40) the channel.
Now that our application supports group video calling, it’s time to incorporate the main functionality: to mute remote video and audio tracks using the Agora RTM SDK.
Muting and Unmuting a User Using RTM
We call the RTMJoin() function to create a RTM client (line 3). Following the RTM Docs, we log in to RTM (line 8) and join a channel (line 16) to get started with the RTM SDK.
We use channel.getMembers() (line 19) to get a list of all users in the RTM channel. We’ll use their usernames, which we received from the front end to each button using a custom id.
The getMembers function is called only once, so the list isn’t updated when a user leaves or joins the channel. To prevent this data inconsistency, we use the MemberLeft (line 126) and MemberJoined (line 104) callbacks provided by the RTM SDK.
We then check for clicks on the remote video and audio toggle buttons (line 39). When a user clicks the button, we send a peer-to-peer message using RTM to tell the remote user what kind of a mute/unmute it is (video or audio).
When the peer receives the message (line 75), the user’s localTracks are muted/unmuted, and thus the stream is changed for all users in the RTC channel.
Finally, we add a logout function (line 154) because, unlike the Web SDK, the RTM SDK requires the user to log out in addition to leaving the channel.
You can now run and test the application.
Note: For testing, you can use multiple browser tabs to simulate multiple users on the call.
Conclusion
You did it!
We have successfully made our own video calling application with a video and audio stream muting service. 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:
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 the Agora Web SDK and other use cases, you can refer to the developer guide here.
You can also join our Slack channel:
