Try Agora for Free
Sign up and start building! You don’t pay until you scale.
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.
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.
Start by creating a default React app using:
npx create-react-app agora-gcAnd 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.1And then install the RTM SDK using:
npm install agora-rtm-sdkWe will be focusing on the admin functions aspect of the application.
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.
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:
Event listeners for when people join or leave the RTC video call:
Used for muting audio/video or leaving the video call:
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:
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.
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):
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:
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!This blog was written by Prakhar Soni, an Agora Superstar. The Agora Superstar program empowers developers around the world to share their passion and technical expertise, and create innovative real-time communications apps and projects using Agora’s customizable SDKs.
