How to Build 1 on 1 Video Chat App with ZEGOCLOUD

Building a video chat app has never been easier with ZEGOCLOUD's reliable tools and services. In this guide, you'll learn the exact steps to create a 1-on-1 video calling app that works smoothly across devices. We'll show you how to handle user connections, manage video streams, and create a clean interface for your users.

You don't need to be an expert developer - this tutorial breaks down each part into simple, doable steps. Perfect for creating apps for remote meetings, virtual consultations, or connecting friends and family. Follow along as we guide you through setting up ZEGOCLOUD and turning your video chat app idea into reality.

Features of 1v1 Video Chat

A 1-on-1 video chat app needs these five essential features to create the best experience for users. Let's explore each feature in detail to understand how they make video calls better and more reliable.

• HD video and audio quality: Today's users expect perfect clarity in their video calls. The app delivers crystal-clear video that shows every detail and expression. The audio stays crisp and natural, making conversations flow smoothly. When internet speeds change, the app smartly adjusts quality to prevent freezing or breaking up. This means users can focus on their conversation without technical distractions.
• Smart call controls: The app puts all important buttons right where users need them. With just one tap, you can mute your microphone, turn off your camera, or end the call. The controls are large enough to find quickly but don't get in the way of the video. Users can also switch between front and back cameras easily. These simple controls make every call feel natural and effortless.
• Real-time connection monitor: Nobody likes surprise disconnections during important calls. The app shows clear indicators for network strength and call quality. When connection problems happen, users get instant alerts with helpful fixes. The monitor tracks internet speed, packet loss, and other technical details. This helps users solve problems before they affect the call.
• Seamless screen sharing: Sometimes words aren't enough to explain things. Screen sharing lets users show exactly what they're talking about. Whether it's a presentation, document, or tutorial, sharing starts with just one click. Users can choose to share their whole screen or just one window. The video call continues smoothly while sharing, keeping the conversation going.

How to Build a 1-on-1 Video Call App

In today's digital world, face-to-face communication in apps has become essential. Whether you're building a healthcare app, an education platform, or a remote work tool, users expect smooth video calls. But building video calling from scratch is complex and time-consuming.

ZEGOCLOUD Express Video SDK helps developers add video calls to their apps and websites easily. Our SDK gives you all the tools to build smooth video calling features without starting from scratch.

Whether you're adding video calls to your existing app or building a new one, our tools make it simple.

Just add our code to your project, and you'll have video calls working in no time. This lets you focus on building your app while we handle the video calling part.

What our SDK offers:

• Quality video calls: Your users get clear video and sound in your app. Our code automatically handles poor internet connections, so calls stay smooth. Your users won't have to worry about technical stuff - it just works.
• Works worldwide: No matter where your users are, the video calls in your app will work well. Our system finds the fastest connection between users, so calls stay stable even with bad internet. Perfect for apps with users around the world.
• Screen sharing: Let your users share their screens with a few lines of code. Great for adding features like remote support or online teaching to your app. Users can share their whole screen or just one window.
• Works on all devices: Our SDK works on phones, computers, and tablets. Whether you're building for iOS, Android, or web browsers, the same code works everywhere. This saves you time and keeps things simple.

Prerequisites

Before starting, make sure you have:

• A ZEGOCLOUD developer account – Sign up
• Your AppID from the ZEGOCLOUD dashboard.
• Node.js installed on your computer.
• npm for managing dependencies.
• Basic JavaScript knowledge.
• A modern browser supporting WebRTC.
• An active internet connection.

1. Create a New Project

To set up your project structure for the 1-on-1 video call app, create a folder with the following structure:

project-folder/
├── index.html
├── index.js

• index.html will define the basic structure for the video call interface.
• index.js will include all logic to initialize and manage the Zego SDK for video calling.

2. Set Up the HTML and JavaScript Files

In your index.html file, add the following code for a basic video call interface:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-on-1 Video Call</title>
    <style>
        #video-container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        .video-wrapper {
            width: 48%;
            position: relative;
        }
        video {
            width: 100%;
            height: 400px;
            background-color: #000;
            border-radius: 12px;
        }
        .controls {
            margin-top: 20px;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            margin: 0 5px;
            border-radius: 20px;
            border: none;
            background: #4CAF50;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background: #45a049;
        }
    </style>
</head>
<body>
    <div id="video-container">
        <div class="video-wrapper">
            <video id="localVideo" autoplay muted></video>
        </div>
        <div class="video-wrapper">
            <video id="remoteVideo" autoplay></video>
        </div>
    </div>
    <div class="controls">
        <button id="toggleCamera">Toggle Camera</button>
        <button id="toggleMic">Toggle Mic</button>
        <button id="endCall">End Call</button>
    </div>
    <script src="index.js"></script>
</body>
</html>

3. Install the Required SDK

Run the following command to install the Zego Express Engine SDK for WebRTC:

npm install zego-express-engine-webrtc

For macOS/Linux, if you encounter permission issues, prepend with sudo:

sudo npm install zego-express-engine-webrtc

4. Import the SDK

In index.js, import the Zego Express Engine for video calls:

import { ZegoExpressEngine } from 'zego-express-engine-webrtc';

Alternatively, if you are not in a module environment:

const ZegoExpressEngine = require('zego-express-engine-webrtc').ZegoExpressEngine;

5. Initialize the SDK

Add the following code in index.js to initialize the Zego Express Engine:

const appID = 123456789; // Replace with your AppID
const server = 'wss://your-server-url'; // Replace with your server URL
const zg = new ZegoExpressEngine(appID, server);

6. Implement Video Call Logic

Add the following code to handle the video call functionality:

const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');

async function startVideoCall() {
    try {
        const userID = 'user_' + Date.now();
        const token = 'your_token_here'; // Replace with a unique token for each session
        const roomID = 'room_1on1_' + Math.floor(Math.random() * 1000);

        // Log in to the room
        await zg.loginRoom(roomID, token, { userID, userName: userID });

        // Create and play the local video stream
        const localStream = await zg.createStream({ camera: { video: true, audio: true } });
        localVideo.srcObject = localStream;

        // Publish the local stream
        await zg.startPublishingStream(`${roomID}_${userID}`, localStream);

        // Set up controls
        setupControls(localStream);

        // Listen for remote stream updates
        zg.on('roomStreamUpdate', async (roomID, updateType, streamList) => {
            if (updateType === 'ADD') {
                const remoteStream = await zg.startPlayingStream(streamList[0].streamID);
                remoteVideo.srcObject = remoteStream;
            }
        });
    } catch (err) {
        console.error('Error starting video call:', err);
    }
}

7. Set Up Control Buttons

Configure the control buttons (camera toggle, mic toggle, end call) in index.js:

function setupControls(localStream) {
    const toggleCamera = document.getElementById('toggleCamera');
    const toggleMic = document.getElementById('toggleMic');
    const endCall = document.getElementById('endCall');

    let isCameraOn = true;
    let isMicOn = true;

    toggleCamera.onclick = async () => {
        isCameraOn = !isCameraOn;
        await zg.mutePublishStreamVideo(localStream, !isCameraOn);
        toggleCamera.textContent = isCameraOn ? 'Turn Off Camera' : 'Turn On Camera';
    };

    toggleMic.onclick = async () => {
        isMicOn = !isMicOn;
        await zg.mutePublishStreamAudio(localStream, !isMicOn);
        toggleMic.textContent = isMicOn ? 'Mute Mic' : 'Unmute Mic';
    };

    endCall.onclick = async () => {
        await zg.destroyStream(localStream);
        await zg.logoutRoom();
        zg.destroyEngine();
    };
}

// Start the video call on page load
window.onload = () => {
    startVideoCall();
};

1. Handle Cleanup

Ensure that resources are properly cleaned up when the user leaves the page:

window.onbeforeunload = async () => {
    await zg.logoutRoom();
    zg.destroyEngine();
};

9. Testing Your App

1. Launch your project in a local development server.
2. Open the app in two browser instances or on different devices.
3. Enter the same room ID in both to initiate the 1-on-1 video call.

Refer to the ZEGOCLOUD Express Video documentation for more advanced features and configurations.

Conclusion

Building a 1-on-1 video chat app is straightforward with ZEGOCLOUD's Express Video SDK. By following this guide, you've learned how to set up a complete video calling system with essential features like HD video streaming and camera and mic controls, and screen sharing. The SDK handles complex tasks like connection management and stream optimization, letting you focus on creating a great user experience.

Whether you're building a telehealth platform, online tutoring app, or remote work tool, ZEGOCLOUD provides the foundation you need. The code examples and step-by-step instructions in this guide show how quickly you can implement video calls in your application. With cross-platform support and robust infrastructure, you can confidently deploy your video chat app to users worldwide.