Build a Video Calling App Using Agora in a React Project

July 1, 2021 By Agora Superstar In Developer

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. Think you’ve got what it takes to be an Agora Superstar? Apply here.

Feeling dizzy already? You don’t need to!! The Agora Video SDK allows you to embed the video calling feature into your React application in minutes.

It can be hard to integrate SDKs with the intricacies of React and to leverage the full capabilities of React. In this tutorial, we will write a bare-bones React application for group video calling feature, and we will go through the process of integrating the Agora Video SDK 4.x with a React application. In addition, Agora provides a React wrapper for the SDK. You can check it out here.

You can test a similar live demo here.

Prerequisites

An Agora developer account (see How to Get Started with Agora)
The basic understanding of React
Agora React SDK
The basic understanding of Hooks (useState, useRef, useEffect)
Context API (optional)

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 start by creating a default react app using

npx create-react-app agora-gc

Open the folder in your preferred code editor. Then install Agora web SDK using

npm install agora-rtc-sdk-ng

I’m using v4.3.0 at the time of writing.

We will be using functional components. Leveraging React’s reusable component architecture, we will make components for every user’s video and controls for every video (mute, stop video, leave call). A global context is used to provide access to states and refs.

Front-End Architecture

This application will contain a container component that contains video components per user (who has joined the call). Each video component contains a control component that contains buttons for muting audio, stopping video, or quitting the call (host only).

Build a Video Calling App Using Agora in a React Project - Screenshot #1

Application Architecture

The container component:

Hooks:

A state variable that contains information of all users called [users, setUsers], each user contains:

UID: A unique identifier of the user
Audio: Boolean for whether the users audio is active
Video: Boolean for whether the users video is active
Client: Boolean for whether the user is the host
VideoTrack: Users Video Track

2. A ref called rtc that contains:

Client: Used to access the the Agora Client object 
localAudioTrack: The local Audio Track
localVideoTrack: The local Video Track

Contains functions to initialize your connection to Agora, connect to your microphone and camera, and publish your stream to a channel:

And Agora SDK event listeners that fire when new users join or leave the channel. Here, we use event listeners to alter a state variable (contains an array of the user’s information) depending on the event:

Videos Component:

Container that contains video streams of users:

Video Component:

Each user’s video is fed into the video component.

Contains a UseEffect hook for playing a user’s video stream once the component is created. And once the component is destroyed, a cleanup command stops the user’s video stream:

Each video component contains a control component.

Controls Component:

Handles user functions like muting their audio, video using the setEnabled function on the local tracks, or leaving the channel by closing the local tracks and leaving the channel:

Global Context

Provides user’s state, rtc ref, and a start state that’s a Boolean that activates a form to take in a value for the channel name:

Conclusion

Shazam! Now you can conduct a successful video call inside your React application. You can extract components from this tutorial 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.