Try Agora for Free
Sign up and start building! You don’t pay until you scale.
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.
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.
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-gcOpen the folder in your preferred code editor. Then install Agora web SDK using
npm install agora-rtc-sdk-ngI’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.
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).
Hooks:
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 Track2. A ref called rtc that contains:
Client: Used to access the the Agora Client object
localAudioTrack: The local Audio Track
localVideoTrack: The local Video TrackContains 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:
Container that contains video streams of users:
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.
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:
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:
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.
