Building a Raise-Your-Hand Feature for Live Streams Using the Agora Web SDK
Tags: agora, webdev, javascript, webrtc
Published: 2021-11-04 01:19:05

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](https://docs.agora.io/en/Video/downloads?platform=Web) and the [Agora RTM SDK](https://docs.agora.io/en/Real-time-Messaging/API%20Reference/RTM_web/v1.0.0/index.html) to build this sample app:

![Screenshot of the project we will be developing in this tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnarc1k0qapqkdd359qp.png)

Prerequisites
=============

*   Basic knowledge of how to work with JavaScript, JQuery, Bootstrap, and Font Awesome
*   Agora Developer Account - Sign up [here](https://sso.agora.io/en/signup?utm_source=medium&utm_medium=blog&utm_campaign=building-a-raise-your-hand-feature-for-live-streams-using-the-agora-web-sdk)
*   Know how to use the [Agora Web SDK](https://docs.agora.io/en/Video/downloads?platform=Web) and the [Agora RTM SDK](https://docs.agora.io/en/Real-time-Messaging/API%20Reference/RTM_web/v1.0.0/index.html)

Project Setup
=============

We will build on our [existing project](https://www.agora.io/en/blog/build-your-own-many-to-many-live-video-streaming-using-the-agora-web-sdk/): [Build Your Own Many To Many, Live Video Streaming Using the Agora Web SDK.](https://www.agora.io/en/blog/build-your-own-many-to-many-live-video-streaming-using-the-agora-web-sdk/) You can begin by cloning this project’s [GitHub repository](https://github.com/akshatvg/Agora-Many-to-Many-Live-Streaming-SDK-NG). You will now have a project that looks like this:

![Screenshot of the Agora Many to Many, Live Video Streaming UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm7687ontxxvfgj3gj6s.png)

If you have difficulty understanding what the above code does, see [this tutorial](https://www.agora.io/en/blog/build-your-own-many-to-many-live-video-streaming-using-the-agora-web-sdk/).

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](https://docs.agora.io/en/Real-time-Messaging/API%20Reference/RTM_web/v1.0.0/index.html) 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.

{% gist https://gist.github.com/akshatvg/df186908ebb842b9ee95ee7df3e6ab24 %}

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.

{% gist https://gist.github.com/akshatvg/236c379ad6a84417eb1c135b4b68f83b %}

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!

Other Resources
===============

To learn more about the Agora Web SDK and other use cases, see the developer guide [here](https://docs.agora.io/en/Video/landing-page?platform=Webhttps://docs.agora.io/en).

https://agoraio-community.github.io/AgoraWebSDK-NG/api/en/index.html

https://docs.agora.io/en/Real-time-Messaging/API%20Reference/RTM_web/v1.0.0/index.html

https://docs.agora.io/en/Real-time-Messaging/messaging_web?platform=Web

https://www.agora.io

https://www.agora.io/en/blog/build-your-own-many-to-many-live-video-streaming-using-the-agora-web-sdk

You can also join our Slack channel:

https://www.agora.io/en/join-slack