Building a Raise-Your-Hand Feature for Live Streams Using the Agora Web SDK

#agora #webdev #javascript #webrtc

Being a community-driven developer, I conduct educational webinars on live streams. At the end of each session I leave time for doubt-solving. These sessions are very hard to execute smoothly, because often several participants text on the meeting chat asking to clear their doubts at the same time. This makes it difficult to keep track of issues that any one person is facing and to ask follow-up questions.

What's needed is a way to briefly talk directly to a participant, outside of the chat.

In this tutorial, we will develop a web application where a user can send a request for a role promotion, giving the host the option to accept or decline the request. On approval, the user would be called onto the live stream as a speaker. We will use the Agora Web SDK and the Agora RTM SDK to build this sample app:

Prerequisites

Basic knowledge of how to work with JavaScript, JQuery, Bootstrap, and Font Awesome
Agora Developer Account - Sign up here
Know how to use the Agora Web SDK and the Agora RTM SDK

Project Setup

We will build on our existing project: Build Your Own Many To Many, Live Video Streaming Using the Agora Web SDK. You can begin by cloning this project’s GitHub repository. You will now have a project that looks like this:

If you have difficulty understanding what the above code does, see this tutorial.

I have added code for entering a user’s name to the UI and the JavaScript file.

You now have a fully functional, video live streaming application, with muting and unmuting capabilities.

What do I do when someone raises their hand?

We will send channel messages using the Agora RTM SDK whenever someone raises or lowers their hand. This way, even if there are multiple hosts, all hosts will be notified and any host can promote the user or deny their request.

We listen for a button click event by an audience member. Whenever someone clicks the Raise Hand button, we toggle the text as well as the functions connected to the button. We also update the state of the global variable that we created to track whether a user’s hand is raised or not.

How do I promote or reject someone after I receive their request?

Since we want to promote or reject only the user who sends a request, we send the user acceptance and rejection updates through a peer message.

If the peer message received asks the user to change their role to a host, the user rejoins the channel as a host.

We have the application’s structure laid out and can now 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!

You have successfully made a request-based role promotion service inside a web live streaming application. In case you weren’t coding along or want to see the complete, finished product, I have uploaded all the code to GitHub:

https://github.com/akshatvg/Agora-Invite-User-To-Stage

You can check out the demo of the code in action:

https://handraise.akshatvg.com

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!