Talk to us
Talk to us
menu

Blog Post

start building
Developer

How to Make a 1-on-1 Video Chat App

How to Make a 1-on-1 Video Chat App

1-on-1 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. In this article, we’ll focus on the implementation of a free 1-on-1 video chat with ZEGOCLOUD.

How to Create a Free 1-on-1 Video Chat App

The video call 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 a wide range of use cases, such as one-on-one and group video calls, online education, entertainment, and others.

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

1 on 1 video chat

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 aforementioned benefits, below are some awesome features of ZEGOCLOUD’s Video Call SDK:

Embedded features

  • The 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
  • 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 for Free 1-on-1 Video Chat

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 easily. 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, or signing up if you don’t have an account.

ZEGOCLOUD login admin console one on one video chat app

Step 2: Add a new project

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

ZEGOCLOUD dashboard 1 on 1 video chat app

After clicking the “Create new project” button, you’ll be prompted to select the type of app we want to build. Select “Video and voice” since we are making use of the Call Kit, and click on “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 (_).

enter project name

Step 4: Choose a UI build method.

ZEGOCLOUD offers two UIKit build methods. You can use the prebuilt UIKit, which will 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.

call UIKit

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

project building

Step 5: Choose a platform and download configuration files.

I will choose “Web” as the platform I’m building for. You can also choose other platforms as needed.

choose platform

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

call mode

Step 6: Download the project.

Click on “Get configuration and integrate” to download project files.

get config free 1-one-1 video chat

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

<html>

<head>
    <style>
        #root {
            width: 100vw;
            height: 100vh;
            }
    </style>
</head>


<body>
    <div id="root"></div>
</body>
<script src="https://resource.zegocloud.com/prebuilt/crypto-js.js"></script>
<script src="https://resource.zegocloud.com/prebuilt/prebuiltToken.js"></script>
<script src="https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js"></script>
<script>
window.onload = function () {
    function getUrlParams(url) {
        let urlStr = url.split('?')[1];
        const urlSearchParams = new URLSearchParams(urlStr);
        const result = Object.fromEntries(urlSearchParams.entries());
        return result;
    }


        // Generate a Token by calling a method.
        // @param 1: appID
        // @param 2: serverSecret
        // @param 3: Room ID
        // @param 4: User ID
        // @param 5: Username
    const roomID = getUrlParams(window.location.href)['roomID'] || (Math.floor(Math.random() * 10000) + "");
    const userID = Math.floor(Math.random() * 10000) + "";
    const userName = "userName" + userID;
    const appID = 839236438;
    const serverSecret = "Your Server Secret";
    const TOKEN = generatePrebuiltToken(appID, serverSecret, roomID, userID, userName);


        const zp = ZegoUIKitPrebuilt.create(TOKEN);
        zp.joinRoom({
            container: document.querySelector("#root"),
            sharedLinks: [{
                name: 'Join as a host',
                url: window.location.origin + window.location.pathname + '?roomID=' + roomID,
            }],
            scenario: {
                mode: ZegoUIKitPrebuilt.VideoConference,
            },

            turnOnMicrophoneWhenJoining: true,
            turnOnCameraWhenJoining: true,
            showMyCameraToggleButton: true,
            showMyMicrophoneToggleButton: true,
            showAudioVideoSettingsButton: true,
            showScreenSharingButton: true,
            showTextChat: true,
            showUserList: true,
            maxUsers: 2,
            layout: "Auto",
            showLayoutButton: false,

            });
}
</script>

</html>

Run a demo.

One-on-one video call UI configuration

As previously stated, there are two types of video calls: one-on-one video calls and group video calls.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 of your choice.

Conclusion

Video call is now one of the most used features in almost every modern communication and information transmission app. The one-on-one video call mode is often used for easy and efficient communication between friends and families. Building this app from scratch can be cumbersome, but with ZEGOCLOUD’s Video Call SDK, you can do it with ease.

Read More

ZEGOCLOUD
ZEGOCLOUD With our fully customizable and easy-to-integrate Live SDK, you can quickly build reliable, scalable, and interactive live streaming into your mobile, web, and desktop apps.

Related posts