This tutorial is outdated. We're currently working on an updated version. In the meantime, for instructions on building a chat app using CometChat, please visit our documentation.
Introduction
Leveraging on the CometChat's react video chat sdk and 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-
Prerequisite
Before we dive into the main functionality, there are some things you will be needing to get started
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_
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-
Conclusion
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.
Umar Elbelel
CometChat
