How to make a 1-on-1 Video Chat App?
Tags: videochat, app, tutorial, webdev
Published: 2022-11-30 04:48:41

Video chat is a great way to get in touch and share information in real-time in a visually appealing format. It is one of the most loved features in messaging apps, as modern computing devices are now built with enhanced data transfer speeds and improved multimedia processing capacities.

There are two types of video chat configurations available: one-on-one and group.

This article will focus on implementing a 1-on-1 video chat with ZEGOCLOUD's Video Call SDK.

**Video Call SDK introduction**

The Express-Video SDK is a robust and full-featured video call SDK. You can build reliable and scalable video calling features into mobile, desktop, and web applications for many use cases, such as one-on-one and group video calls, online education, entertainment, and others.

**Why ZEGOCLOUD's Video Call**

You may wonder why you should use ZEGOCLOUD'sZEGOCLOUD'sZEGOCLOUD's video call SDK to implement video chat features. The advantages of this SDK make it highly appealing to novice and experienced developers. For example, unlike the traditional method of building from scratch, which can take days to implement, you can implement 1-on-1 video chat functionality in minutes.

ZEGOCLOUD's video call SDK offers 10,000 free minutes. So, it is arguably the best platform for free one-on-one video chat. As a result, if you're looking for a platform to help you get started with your video chat app feature implementation, use the free minutes to build your free 1-on-1 video chat app.

Apart from the benefits above, below are some excellent features of ZEGOCLOUD's Video Call SDK:

**Embedded features**

An out-of-the-box video chat interface

Customizable UI

Text chat

Screen sharing

Recording

Cross-browser compatibility

Built-in bandwidth management

Auto network reconnection

**Preparation**

A ZEGOCLOUD developer account —[Sign up](https://console.zegocloud.com/account/signup)

VS Code or any IDE or text editor of choice.

Computer with audio and video support.

Basic understanding of web development

**Video Call SDK Integration**

Follow the steps below to integrate the Call Kit SDK into your project:

**Step 1: Log in to the Zegocloud admin console.**

ZEGOCLOUD offers a powerful developer console where you can create your apps quickly. The first step to integrating the Video Call SDK for the free 1-on-1 call feature is logging in to [ZegoCloud's admin console](https://console.zegocloud.com/account/login) or signing up if you don't have an account.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0k152ce3nl2nc976qufq.jpeg)

**Step 2: Add a new project**

Click on "Create new project" to get started with our video call project creation.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63swmko3bfvkvggn3ffe.jpeg)

After clicking the "_Create new project_" button, you'll be prompted to select the type of app you want to build. Select "_Video and voice_" since we are using the Call Kit, and click "_Next_. "

**Step 3: Enter the project name.**

After creating a project in step (2), the next phase will be naming our application.

Note: You can only name a project with numbers, letters, and underlines (_).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvy6h3bktwlem0y4itlo.jpeg)

**Step 4: Choose a UI build method.**

ZEGOCLOUD offers two UIKit build methods. You can use the prebuilt UIKit to provide responsive UI out-of-the-box for our one-on-one video call app. You can choose SDK-level UI customization if you need more customization privileges.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibucexrrlccz2fhylzh9.jpeg)

You can proceed with the building process. Wait for the project to be completed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2dl92p9ohr9wn24xn0j.jpeg)

**Step 5: Choose a platform and download configuration files.**

I will choose "_Web_" as the platform I'm building for. You can also select other media as needed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lsz4apg0o5okc70rmh0.jpeg)

After selecting the platform, click the 1-on-1 calls button in the top-right corner to enable one-on-one video chat.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crqc2242pq04dpdhqqou.jpeg)

**Step 6: Download the project.**

Click on "_Get configuration and integrate_" to download project files.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpjcv4cv46iid4az3fyz.jpeg)

Opening the application with development tools like an IDE or text editor reveals the following lines of code:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1uk16u5ayioaida2orp.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6xpphg34buvc2qnckhy.png)

**Run a demo.**

One-on-one video call UI configuration

As previously stated, there are two types of video calls: one-on-one and group. We'll only focus on one-on-one video calling today.

{
turnOnMicrophoneWhenJoining: true,
turnOnCameraWhenJoining: true,
showMyCameraToggleButton: true,
showMyMicrophoneToggleButton: true,
showAudioVideoSettingsButton: true,
showScreenSharingButton: true,
showTextChat: true,
showUserList: true,
maxUsers: 2,
layout: "Auto,"
showLayoutButton: false,
scenario: {
mode: "OneONoneCall,"
}

If you go through the codes above, you'll notice the call mode in scenario parenthesis. Which shows we're in 1-on-1 video chat mode.

scenario: {
mode: "OneONoneCall",
}

To test the application, open the file we downloaded in step 6 with any browser.

Follow the [demo](https://www.youtube.com/watch?v=i1rE7RZbVt4).

If you are interested in developing live-streaming applications, you can download the [sample demo source code](https://github.com/chigozz/ZEGOCLOUD-1v1-Video-Call-Demo) in this article.

You can always reach our 24-hour technical support if you have any questions.

Read More

(https://www.zegocloud.com/developers/uikitshttps://www.zegocloud.com/blog/live-video-call-)apihttps://www.zegocloud.com/blog/react-native-uikithttps://www.zegocloud.com/blog/android-video-callhttps://www.zegocloud.com/blog/call-kit