DEV Community: Akshat Gupta

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

Akshat Gupta — Thu, 04 Nov 2021 01:19:05 +0000

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!

Other Resources

To learn more about the Agora Web SDK and other use cases, see the developer guide here.

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

Build a Live Translated Transcriptions Service in Your Video Call Web App

Akshat Gupta — Sun, 24 Oct 2021 11:48:49 +0000

Learn how to make a real-time translation service using the Agora Web SDK and Google Cloud.

Introduction

Doing business globally is a goal for almost every company. The chance to scale up to an international level can increase profits but may require knowledge of multiple languages to communicate with clients or partners from around the world.

Getting an interpreter to help translate multilingual video conferences is impractical, because it may be annoying and will make the meetings longer than needed. You may also want to keep some information confidential.

In this tutorial, we will develop a web application that supports speech-to-text transcription and translation using JavaScript’s Web Speech API, the Agora Web SDK, the Agora RTM SDK, and the Google Cloud Translation API to avoid dependency on translators and remove the language barrier during video calls.

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
Google Cloud account
Understand how to make requests and receive responses from REST APIs

Project Setup

We will build on our existing project: Building Your Own Transcription Service Within a Video Call Web App. You can begin by cloning this project’s GitHub repository. You will now have a project that looks like this:

We will now remove the self-note related HTML and the extra buttons. If you face difficulties understanding what the above code does, see this tutorial.

I have also added code for muting and unmuting video and audio to the video calling application. You can learn more about muting and unmuting from the Agora documentation. Your code will now look like this.

You now have a fully functional transcription service along with muting and unmuting capabilities.

Adding Real-Time Translation to Our Application

We will now add the following code into our HTML file under the existing input field row and add an option for a user to enter their Google Cloud project's API key.

Create a Google Cloud Translation API Key

In the Cloud Console, go to the Create service account page.
Select a project.
In the Service account name field, enter a name. The Cloud Console completes the Service account ID field based on this name.
In the Service account description field, enter a description. For example, Agora Live Translated Transcription.
Click Create and Continue.

Click the Select a role field and choose the Cloud Translation API Admin role.

Click Continue.
Click Done to finish creating the service account.
Enable the Cloud Translation API from here.

Click the Credentials tab in the left sidebar, and then click on Create Credentials.
Create and copy the generated API Key.

Core Functionality (JS)

Now that we have the basic structure laid out as well as the keys generated, we can begin adding functionality to the translation service. It may look intimidating at first, but if you follow GCP’s official docs, it’ll be a piece of cake.

The code below takes in the user’s inputted GCP key and the user’s preferred transcription language. As soon as the user stops speaking, their words are transcribed in the chosen language using JavaScript’s Web Speech API.
This same message is sent in the speaker’s language to all users through the Agora RTM SDK. When this message is received, we check for the receiver’s preferred language and use the Google Translate API to convert the original sent message to user-understandable text. This way, even if the remote user has a different language from the local user, the logic would still work as expected.

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 multilingual transcription service inside a web video call application. In case you weren’t coding along or want to see the finished product all together, I have uploaded all the code to GitHub:

https://github.com/akshatvg/Agora-Translated-Transcription

You can check out the demo of the code in action:
https://translation.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.

You can also join our Slack channel:
Join Slack

Connecting to Agora with Tokens in the Web — React

Akshat Gupta — Sun, 24 Oct 2021 11:48:19 +0000

Keep your application secure and authenticated.

When you’re building a Real-Time Engagement application, security is of key importance (pun intended). Making sure users’ audio/video is visible only to the intended recipients is critical. Using the Agora Voice or Video SDK, you can easily add another layer of security to your app with the help of tokens.

In this tutorial, we’ll take a look at how to fetch tokens from a server and use them to join a video/voice channel in React. You can deploy your own server to generate tokens, or you can use either this Node or GoLang example. We’ll be using the Node token server in our tutorial, and you can easily deploy the same server by following the instructions. You can also use our latest GoLang example. A Docker image is also available for this example.

Prerequisites

Agora Developer Account - Sign up here
Know how to use the Agora Web SDK
A basic understanding of React
An Agora token server

To get us up to speed with a basic video calling app, let’s use this demo. You can follow the instructions in the README.md file to get the app working on your device. We’ll be discussing the code for fetching and updating tokens below. If you just want a working demo, you can check the tokens branch for the final outcome.

Connecting with Tokens

We’ll make a GET request to our server (running locally or on a remote server) with our channel name and UID before we start the call using the join method. We’ll use fetch to make our request and obtain our token. Our server responds with {“token”:”<TOKEN HERE>”}. We get the token value from the JSON and pass it as the third parameter in our join method.

Note: We’re using the URL structure found in the sample token server.

Staying Connected

All tokens have an expiry. The length of time until they expire is set by the token server. Or it can be set as a parameter sent in the request. For example, URL/access_token?channel=channel-test&uid=0&expiredTs=60 would set the expiry as 60 seconds for uid 0 in channel-test for the token server we’re using.

When a connected user’s token is set to expire in 30 seconds, we receive a token-privilege-will-expire event. We can set an event handler to update the token before it expires, avoiding any interruption in the connection. Once we’ve obtained a new token, we can use the renewToken method to renew our token. We’ll add the listener in our init method.

Conclusion

Creating an app id with token security and adding a few lines of code can make your application secure. If you want to learn about how the demo app works, see this tutorial. And if you want to look at other features, see the API Reference.

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

https://github.com/prakhar0912/agora-gc/tree/tokens

https://agora-tokens.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!

Vanilla JavaScript Implementation

I have also implemented the same in Vanilla JS using fetch to make our request. You can check out the code for this on:

https://github.com/akshatvg/Agora-Token-Service/tree/vanilla-js

The demo code in action:

https://agora-token-vanilla.akshatvg.com

Other Resources

To learn more about the Agora Web SDK and other use cases, see the developer guide here.

https://docs.agora.io/en

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

https://www.agora.io/

You can also join our Slack channel:

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