Volume Controls using Agora RTC in a React JS App

Integrating volume features, such as manipulating anyones volume, a prompt when the user has muted their mic but is trying to speak, or any other audio effect in your video calling application, can be very tedious and time-consuming. In this blog post we will explore all these features.

It can be hard to integrate the SDKs with the intricacies of React and leverage the capabilities of React. In this tutorial, we will write a bare-bones React application for adding the above-mentioned functions into a basic video calling application.

Agora provides a React wrapper for the SDK, which will be used to create the basic video calling app. (It isn’t used here, but it can be.)

You can test a live demo of the completed app here and the GitHub repository here.

Prerequisites

• An Agora developer account (It’s free, sign up here!)
• The basics of React
• Agora RTC

Signing Up with Agora

In order to use the Agora SDK, we need an App ID. To find out how to get one, click here.

Note: This guide does not implement token authentication, which is recommended for all RTE apps running in production environments. For more information about token-based authentication in the Agora platform, see https://docs.agora.io/en/Video/token?platform=All%20Platforms.

Getting Started with the Code

We’ll create the standard Agora RTC group calling application using this repo as a template. You can find the blog post for it here.

Application Architecture

The application contains various components, including:

• Global container: Contains all the following components
• Videos component: Holds the video feed of each user
• Video component: Holds the video feed of a particular user
• Controls component (inside every Video component): Contains options such as mute audio/video, an input to change volume of that user, and, if you are the client, a quit call button

Prompt When Speaking While Muted

We will use a useEffect in the Controls component based on the changes to the user.audio state. If the user is the client, then a function call is made to create another mic input and analyze it to generate a volume score inside a setInterval. If that score is above a certain value, then it will count as someone speaking. Ifthe user is unmuted, then the Interval is cleared, and the UI can be updated accordingly. Here, a state called “speaking” is used for that purpose.

Note: The interval is saved in a useRef that also holds the RTC client, localAudioTrack, and VideoTrack.

Volume Controls for Every User in a Call

We store the remote audio track and local audio track in the user’s state in the audioTrack key.

A function provided by the Agora RTC SDK on remote or local audio tracks is the .setVolume() function. We use that in the Controls component to set the volume of the track on demand.

Custom Audio Manipulation

The Agora RTC SDK provides a few options for input audio manipulation, such as:

Or you can use your own audio source and provide it to the SDK. You can manipulate that audio source however you want:

Conclusion

Shazam! You can conduct a successful video call with various volume controls in your React application. You can extract components from the GitHub repo and directly implement them in your application.

For additional features, a good starting point is the official docs, which you can find here.

The code base for this tutorial is available on GitHub.

And I invite you to join the Agora Developer Slack community.