Integrating admin features in your video calling application can be very tedious and time-consuming. Maintaining a back end integrated with the video calling service for facilitating admin functions can be painful to create and maintain.

The Agora RTC and RTM SDKs allow you to add admin functions to your video calling application in minutes.

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 admin functions to a basic video calling application. Agora provides a React wrapper for the SDK, which will be used to create the basic video calling app.

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

Prerequisites

• An Agora developer account (see How to Get Started with Agora)
• The basics of React
• Agora RTM SDK
• Agora React Wrapper

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

Start by creating a default React app using:

npx create-react-app agora-gc

And then open the folder in your preferred code editor. Install the Agora React Wrapper using:

npm install git://github.com/AgoraIO-Community/agora-rtc-react#v1.0.1

And then install the RTM SDK using:

npm install agora-rtm-sdk

We will be focusing on the admin functions aspect of the application.

Application Architecture

We’ll create the standard Agora RTC client and add the corresponding event listeners. We’ll also initialize the RTM client with the user name and join the same channel as the RTC client. Agora provides channel attributes, and here we will use them to store the information of users in the video call, which is required for admin functionality and to send messages via RTM. The user who chooses to be an admin gets access to functions that send messages to users in the call via the RTM messaging to mute audio/video or kick them off the call.

Application Explanation

Data Storage:

User data structure:

App Component

This is the parent function to a Form component and a Videos component. It contains an init function that initializes the RTM and RTC client, joins a channel, broadcasts the local audio and video tracks to the joined channel, and creates the necessary event listeners. On joining the RTM channel, the channel attributes are updated with the user’s information:

RTC Event Listeners:

Event listeners for when people join or leave the RTC video call:

An action function

Used for muting audio/video or leaving the video call:

RTM Event Listeners:

Event listeners for when people send messages through the RTM channel. This is used to enable admin functionality:

The app component contains the Video component and the InitForm component, with either of them being viewable depending on whether the user has started the video call:

InitForm Component

A form that is initially shown that takes in user information (App ID, channel name, and user name) and calls the init function with the above data.

Videos Component

Using the user’s state and iterating through each user to render the front end of each user’s video stream and their controls (mute audio/video, kick/leave):

Controls Component

This component allows controlling muting audio/video or quitting the call. If the user is an admin, they can mute audio/video of other users or kick them off the call. The front end consists of icons.

Important functions of this component:

Conclusion

Shazam! You can conduct a successful video call with admin 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.

If you have questions, feel free to join our Slack channel!