How to Build a Video Call App Like Vidizzy

Are you interested in building a video call app like Vidizzy? With the rise of remote work and online learning, video calling has become a key part of our daily lives. Whether you want to connect people for business, social interactions, or education, creating an easy-to-use and reliable app is a smart move.

In this guide, we will show you how to build a video call app that’s simple to navigate, secure, and full of useful features. We’ll walk you through the essential steps, including choosing the right technology, designing a great user interface, and making sure your app runs smoothly. By the end, you’ll be ready to create a top-quality video calling app that users will love. Let’s get started!

What is Vidizzy?

Vidizzy is a video call app that connects users for random video chats. It allows people to meet and talk with strangers from all around the world without registration. Vidizzy provides an easy and anonymous way for users to have live, one-on-one conversations via video and text. The app is designed for those who want to meet new people, make friends, or have casual chats.

With Vidizzy, users are matched with others randomly, making it exciting and unpredictable. You can start a conversation instantly without needing to register or log in, making it simple and quick to use. Vidizzy also offers features like live video streaming and text chatting, allowing users to communicate in different ways during their interactions.

Unlike other video chat apps, Vidizzy focuses on creating a fun and spontaneous environment for users. The app is free to use and can be accessed on various devices, such as smartphones, tablets, and computers. Vidizzy is perfect for anyone looking to connect with new people in a safe and entertaining way. Whether you’re bored and want to chat, or looking to meet interesting people, Vidizzy makes it easy to start a conversation.

How to Develop a Video Chat App like Vidizzy

Vidizzy has grown in popularity over the years, offering users the ability to randomly connect with others from different parts of the world. In this section, we’ll walk you through how to develop a similar video chat app using ZEGOCLOUD.

We’ll be using ZEGOCLOUD’s Express Video SDK and ZIM SDK, for adding real-time video and messaging features to your app.

Key Features of the ZEGOCLOUD API/SDK

Before we dive into coding, here are some important features of ZEGOCLOUD’s SDK that will be critical for your app:

• High-quality video & audio: ZEGOCLOUD provides clear and smooth video and audio communication to ensure your video chats are seamless and enjoyable.
• Screen sharing: This feature allows users to share their screen, which is useful for collaborative activities, presentations, or teaching.
• Secure communication: All video chats are encrypted, keeping user privacy intact and complying with privacy regulations.
• Customizable UI: You can design the video call interface to match your app’s branding and offer a unique experience.

Prerequisites

To follow this guide, ensure you have the following:

• ZEGOCLOUD developer account: You’ll need to sign up at ZEGOCLOUD to get access to the credentials needed to use the SDKs.
• App ID and token: These are provided by ZEGOCLOUD when you create a new app within their console.
• Basic web development knowledge: Some familiarity with HTML, CSS, and JavaScript will help you understand the steps better.
• A computer with internet access to run your code and test the application.

1. Set Up the SDK

The first step is installing the ZEGOCLOUD SDK. This allows you to access ZEGOCLOUD’s real-time video capabilities.

Install the ZEGOCLOUD SDK using npm:

npm install zego-express-engine-webrtc

After installation, you can import the SDK into your JavaScript file:

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

This sets up your app to interact with ZEGOCLOUD’s video call features.

2. Design the User Interface (UI)

Creating a simple but engaging UI is essential for a great user experience. You’ll need to set up the following elements:

• Local video feed: This is where the user’s video feed will be displayed.
• Remote video feed: This will display the video feed of the person they are connected with.
• Action buttons: Buttons to start and end the video call.

Here’s an example of the HTML layout:

<div id="local-video"></div>
<div id="remote-video"></div>
<button id="startCall">Start Random Chat</button>
<button id="endCall" disabled>End Chat</button>

You can adjust the styles later to fit your app’s design.

3. Initialize ZEGOCLOUD SDK

To begin using the ZEGOCLOUD services, you need to initialize the SDK with your app’s unique credentials. Define your App_ID and Server_URL.

const appID = YOUR_APP_ID; // Replace with your actual App ID
const server = 'YOUR_SERVER_URL'; // Replace with your server address

const zg = new ZegoExpressEngine(appID, server);

This will allow your app to interact with ZEGOCLOUD’s platform and manage video calls.

4. Authenticate Users and Create Random Rooms

In a random video chat app, users should be automatically assigned to random rooms. This gives each user a unique experience and avoids the need for manual room management.

a. Generate a Random Room ID

You can generate a random string that serves as the roomID. This will be used to connect the user to the chat:

function generateRandomRoomID() {
    return Math.random().toString(36).substring(2, 8).toUpperCase(); // Generates a random 6-character room ID
}

b. Generate a Unique User ID

To keep track of different users, we generate a unique ID for each one:

function generateUserID() {
    const timestamp = new Date().getTime(); // Using timestamp ensures uniqueness
    const randomPart = Math.random().toString(36).substring(2, 6).toUpperCase(); // Add randomness for more variation
    return `user_${randomPart}_${timestamp}`;
}

This ensures each user has a unique identity in the system.

5. Log In to the Room

Once the user has been authenticated and assigned a random room, you need to log them into the room and allow them to join the conversation. Here’s how you can do that:

const roomID = generateRandomRoomID(); // Generate a random room ID
const userID = generateUserID(); // Create a unique user ID
const token = 'YOUR_TEMPORARY_TOKEN'; // Token obtained from ZEGOCLOUD

zg.loginRoom(roomID, token, { userID, userName: userID })
    .then(() => {
        console.log(`Logged into room: ${roomID} as user: ${userID}`);
    })
    .catch(error => {
        console.error('Error logging into room:', error);
    });

The loginRoom function connects the user to the random room and allows them to start interacting with others.

6. Capture and Display Local Video

Next, we need to capture the local user’s video feed and display it on the screen. This captures the local stream and displays it in the “local-video” div.

const localStream = await zg.createStream(); // Access camera and mic

// Display the local video feed in the HTML element
zg.createLocalStreamView(localStream).play('local-video');

// Start publishing the stream to ZEGOCLOUD for others to see
zg.startPublishingStream('localStreamID', localStream);

7. Handle Remote Video Streams

Now that your app is connected, you need to listen for incoming video streams from other users in the same room. When another user joins the room and starts their video feed, your app needs to display their stream.

zg.on('roomStreamUpdate', async (roomID, updateType, streamList) => {
    if (updateType === 'ADD') {
        const remoteStream = await zg.startPlayingStream(streamList[0].streamID); // Access remote stream
        zg.createRemoteStreamView(remoteStream).play('remote-video'); // Display remote video in the "remote-video" div
    }
});

8. End the Call

To end the video chat, you need to stop publishing and playing streams. This will stop the video feed and disconnect the user from the room.

zg.stopPublishingStream('localStreamID'); // Stop publishing the local stream
zg.stopPlayingStream('remoteStreamID'); // Stop displaying the remote stream

Make sure to clean up the streams to avoid unnecessary resource usage.

9. Logout from the Room

When a user decides to exit the video chat, it’s important to log them out from the room and clean up the resources.

zg.logoutRoom(roomID); // Log the user out from the room

This will end the session and disconnect the user from the ZEGOCLOUD platform.

10. Full Implementation

Here’s how the final implementation should look in HTML and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Video Chat</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
        h1 {
            margin-bottom: 20px;
        }
        #video-container {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-bottom: 20px;
        }
        #local-video, #remote-video {
            width: 300px;
            height: 225px;
            border: 1px solid #ccc;
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
        }
        #controls {
            display: flex;
            gap: 10px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <h1>Vidizzy Video Chat</h1>
    <div id="video-container">
        <div id="local-video">Local Video</div>
        <div id="remote-video">Remote Video</div>
    </div>
    <div id="controls">
        <button id="startCall">Start Random Chat</button>
        <button id="endCall" disabled>End Chat</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/zego-express-engine-webrtc"></script>
    <script>
        const appID = 'YOUR_APP_ID'; // Replace with your App ID
        const server = 'YOUR_SERVER_URL'; // Replace with your server URL
        const zg = new ZegoExpressEngine(appID, server);

        const startCallBtn = document.getElementById('startCall');
        const endCallBtn = document.getElementById('endCall');

        startCallBtn.addEventListener('click', async () => {
            const roomID = generateRandomRoomID();
            const userID = generateUserID();
            const token = 'YOUR_TEMPORARY_TOKEN'; // Token

            try {
                await zg.loginRoom(roomID, token, { userID, userName: userID });

                const localStream = await zg.createStream();
                zg.createLocalStreamView(localStream).play('local-video');
                zg.startPublishingStream('localStreamID', localStream);

                startCallBtn.disabled = true;
                endCallBtn.disabled = false;

                zg.on('roomStreamUpdate', async (roomID, updateType, streamList) => {
                    if (updateType === 'ADD') {
                        const remoteStream = await zg.startPlayingStream(streamList[0].streamID);
                        zg.createRemoteStreamView(remoteStream).play('remote-video');
                    }
                });

            } catch (error) {
                console.error('Error during call start:', error);
            }
        });

        endCallBtn.addEventListener('click', async () => {
            try {
                await zg.stopPublishingStream('localStreamID');
                await zg.stopPlayingStream('remoteStreamID');
                startCallBtn.disabled = false;
                endCallBtn.disabled = true;
            } catch (error) {
                console.error('Error during call end:', error);
            }
        });

        function generateRandomRoomID() {
            return Math.random().toString(36).substring(2, 8).toUpperCase();
        }

        function generateUserID() {
            const timestamp = new Date().getTime();
            const randomPart = Math.random().toString(36).substring(2, 6).toUpperCase();
            return `user_${randomPart}_${timestamp}`;
        }
    </script>
</body>
</html>

Conclusion

Building a video call app like Vidizzy is a fun and valuable project, especially with the growing need for online communication. This guide has shown you how to use ZEGOCLOUD's SDK to add video and messaging features, and how to create an easy-to-use interface.

You learned how to set up the SDK, authenticate users, and manage video streams. With these steps, you can build a smooth, high-quality video call app. Whether your app is for social, business, or educational purposes, you now have the knowledge to create an app that people will enjoy using and rely on for their communication.