I conduct regular workshops with my friends and have explored several live streaming platforms. My favourite platform for conducting online workshops is Airmeet.
The feature that caught my eye and impressed me the most was that Airmeet dynamically allowed the organisers to call people onto stage by changing their roles from audience to host and vice versa.
This is a useful service when the session needs to be interactive. A user can simply be called onto stage as a host to express doubts, talk to the speakers, and make the session more interesting. Once the user is done interacting, their role can be changed back to audience.
- An Agora developer account (see How to Get Started with Agora)
- The Agora Web SDK
- The Agora RTM SDK
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, a list of remote users, and buttons for joining and leaving. I’ve also imported the necessary CDNs and linked the custom CSS and JS files.
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.
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.
Finally, we give the user an option to end the stream and leave the channel.
Now that our application supports live streaming, it’s time to incorporate the main functionality: to change a remote user’s role using the Agora RTM SDK.
Using RTM to Change the Role of a Remote User
We call the RTMJoin() function to create a RTM client. 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 120) and MemberJoined (line 98) callbacks provided by the RTM SDK.
We then check for clicks on the host and audience role-change 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 role change it is (host or audience).
When the peer receives the message (line 75), the user’s role is changed for all users in the RTC channel. If the role change is from audience to host, a track is published. If a role is changed from host to audience, all local tracks are stopped.
Finally, we add a logout function (line 148) 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.
You did it!
We have successfully made our own live streaming application with a remote role-changing 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:
Sample app to change role of a remote user in a livestream using the RTM SDK. Livestreaming Changing role of user to…
If you would like to see the demo in action, check out the demo of the code in action:
Change remote user role | Agora
Sample app to change role of a remote user in a livestream using the RTM SDK.
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!
To learn more about the Agora Web SDK and other use cases, you can refer to the developer guide here.
Agora.io Real-Time Voice and Video Engagement
The Real-Time Engagement Platform for meaningful human connections. People engage longer when they see, hear, and…
Peer-to-peer or Channel Messaging
This article describes how to create a basic project and use the Agora RTM SDK to send and receive messages. A browser…
AgoraWebSDK NG API Docs
This document only applies to the Agora Web SDK 4.x, which refactors the Web SDK 3.x and is not backward compatible…
You can also join our Slack channel: