Changing the Role of a Remote Host in a Live Streaming Web App

This blog was written by Akshat Gupta an Agora Developer Evangelist Intern who had started his journey in Agora as a 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. Think you’ve got what it takes to be an Agora Superstar? Apply here.

---

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.In this tutorial, we will develop a web application that supports changing the roles of remote users in a live streaming application using the Agora Web SDK and the Agora RTM SDK.

Prerequisites

• Basic knowledge of how to work with 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, 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.

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.

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.

Conclusion

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:

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:

---