Add Video to Your React Chat App

Umar Elbelel

View GitHub Repo


Leveraging on the CometChat UI Kit to handle our logic, we will be adding a video call functionality to our React Application. As technology keeps growing the need for real time data transfer is becoming much; from chat, voice calls to video calls all use the same technology. In this tutorial, we would take you through the steps required to add a video chat functionality to your react project.

When completed we should have our video functionality added to our react application similar to the one below-


Before we dive into the main functionality, there are some things you will be needing to get started

  1. Setting up a CometChat account and creating an App
  2. React application setup

Once you have that then you are ready to start

Installing CometChat SDK

After setting up your react application, next is to introduce CometChat Pro SDK. This is required for our application to appropriately collaborate with CometChat.

Run the below command to install the SDK:

npm install @cometchat-pro/chat@2.1.0 --save

After installing our dependency, we need to instate it and to do that we need to incorporate it at the initial stage of our application. Open the index.js file  and add the following content to it.

Don’t forget to replace the APP_ID and REGION placeholders with your credentials.

Setting up the CometChat UI Kit

To setup the CometChat UI KIT we need to first clone it to our project directory. To achieve that run the command below:

git clone https://github.com/cometchat-pro/javascript-react-chat-ui-kit.git

Once this is done, copy the CometChat folder to your source folder. Next is for us to install all the needed dependency for the CometChat UI Kit, to do that, copy the dependency below to your package.json file.

To install these packages run the following command:

npm install

After setting up and installing all needed dependency for the CometChat UI Kit, we can now be able to make use of the components to add video interface and logics to our application.

Creating Register/Login Component

Before we can access our video call component, we need to be authenticated. To do that navigate to your source folder and create a folder called components (this is where all our components will be).

Once you have done that, the next is to create a login component login.js; and paste the code below:

The login component handles our authentication, this allows us to log in to CometChat using the default users provided (superhero1, superhero2, superhero3) or by registering a new user through which an input field is provided. Upon submission of the input or click of one of the default users we triggered the login().

The login() handle our request by first checking if the user is set, subsequently creating the user using the CometChat.createUser().

If the user is already registered, we trigger the CometChat.login() which authenticated our user. Hence, we redirect the user to the video component.

The image below shows the login interface-

For our styling, we use the bootstrap CDN included in our index.html file.

Creating Video Component

Begin by navigating to our src/components and create our video.js file; open the file and paste the code below-

On the mount of this component, we initialize the refresh() which gets our logged in user, we then import the CometChatUserListScreen component from the CometChat SDK we cloned earlier. This component will list all users and also handle all the logics of accepting, rejecting, and also the video call interface. The image below shows the user list, which allows us to select a user-

To initialize a video call tab on the video icon on the top right-hand corner, this will allow the other user to either accept or reject the call. the image below will describe the process-

Testing Our Application

To test our application, run the following command to start it up:

npm run start

Navigate to your browser and open http://localhost:3000 to access the application-


Thanks to CometChat UI Kit we were able to add a video call functionality with little or no difficulty. The CometChat UI Kit gives us all we need from functionalities, user interface, API calls and everything necessary. No need to call APIs to fetch the call history or users.

Hope you found this tutorial helpful. Don’t forget to check the official documentation of CometChat to explore further and add more features to your react application. The complete source code to this tutorial is available on GitHub.

What Is CometChat?

The most robust suite of cloud-hosted text, voice and video solutions on the market. CometChat seamlessly integrates onto websites and apps quickly and securely, powering digital communities across the globe.