How to Develop Apps Like Monkey with ZEGOCLOUD

Building a random video chat app like Monkey is simpler than ever with the right tools and guidance. These apps let users connect with strangers instantly, making them popular for fun and spontaneous interactions. Using ZEGOCLOUD, a platform that offers pre-built solutions for video and chat features, you can create a similar app quickly and efficiently.

In this article, we will walk you through step-by-step how to design and develop a video chat app, focusing on the features that make apps like Monkey successful. With that being said, let’s jump right in!

How to Develop Random Video Chat App like Monkey

Random video chat apps like Monkey are popular because they offer a fun and spontaneous way to connect with strangers worldwide. These apps provide real-time video and audio interactions, combined with features like random pairing and easy navigation, making them highly engaging. Developing a Monkey app alternative requires a reliable backend for user management, a smooth video communication interface, and safety features to ensure compliance with privacy standards.

Using the ZEGOCLOUD Express Video SDK, you can easily integrate high-quality video chat functionality into your application. Below is a comprehensive step-by-step instructions to help you build a random video chat app from scratch.

Features of ZEGOCLOUD API/SDK

ZEGOCLOUD offers a lot of features; here are some of the key features:

• Crystal clear video and audio: Supports smooth communication with excellent audio and video quality for uninterrupted conversations.
• Screen sharing capability: Essential for collaborative activities like presentations and online teaching.
• Secure communication: Offers end-to-end encryption to ensure user privacy.
• Customizable interface: Easily matches the app’s UI design for a seamless user experience.

Prerequisites

• A ZEGOCLOUD Developer Account: Sign up here.
• Obtain your AppID and AppSign from the ZEGOCLOUD console.
• Basic knowledge of HTML, JavaScript, and web application development.
• A computer with internet access for coding and testing.

1. Set Up the SDK

Integrating the ZEGOCLOUD SDK is the first step. For web applications, install the required library:

npm i zego-express-engine-webrtc

After installation, import the SDK into your project:

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

2. Design the User Interface (UI)

Craft an engaging and intuitive interface that supports random video calls. At a minimum, your UI should include:

• Video displays: Separate sections for local and remote video feeds.
• Action buttons: Include buttons for connecting, disconnecting, and switching calls.

Example HTML structure:

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

You can customize this design further to make it visually appealing and functional.

3. Initialize ZegoExpressEngine

Create an instance of ZegoExpressEngine using your AppID and server details:

const appID = YOUR_APP_ID; // Replace with your actual AppID.
const server = 'YOUR_SERVER_URL'; // Replace with your server address.

const zg = new ZegoExpressEngine(appID, server);

This setup prepares your app to manage video streams.

4. User Authentication and Random Room Login

To enable random pairing, you need to assign each user to a randomly generated room. Additionally, each user should have a unique identifier for tracking and communication.

a. Generate Random IDs

This function generates a random alphanumeric string that serves as the room ID for a session:

function generateRandomRoomID() {
    return Math.random().toString(36).substring(2, 8).toUpperCase(); // 6-character alphanumeric string
}

b. Generate Unique User ID

Each user is assigned a unique ID to identify them within the room:

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

c. Log into the Room

Once IDs are generated, log the user into a room:

const roomID = generateRandomRoomID(); // Assign the user to a random room
const userID = generateUserID(); // Generate a unique user ID
const token = 'YOUR_TEMPORARY_TOKEN'; // Obtain from ZEGOCLOUD Admin Console

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

5. Start Local Video Stream

Enable the user’s camera and microphone to preview their video:

const localStream = await zg.createStream(); // Access camera and mic.
zg.createLocalStreamView(localStream).play('local-video'); // Play the stream in the UI.
zg.startPublishingStream('localStreamID', localStream); // Publish the stream to the cloud.

This step makes the user's video feed visible and available to others in the room.

6. Handle Remote Streams

Play video streams from other users in the chat room. Listen for new streams using the roomStreamUpdate event:

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

This ensures that the app automatically shows new video feeds when someone joins the chat.

7. End the Call

When a user decides to leave the video call, stop the streams and clean up resources:

Stop Publishing Local Streams:

zg.stopPublishingStream('localStreamID'); // Stop sharing the video.
zg.destroyStream(localStream); // Destroy local video data.

Stop Playing Remote Streams:

zg.stopPlayingStream('remoteStreamID'); // Cease remote video playback.

8. Logout from the Room

To exit a room and ensure no leftover connections, use:

zg.logoutRoom(roomID);

Always call this when the user leaves the app or stops interacting.

9. Complete Implementation

Here’s the complete HTML structure for your random video chat app, with local and remote video sections, buttons for starting and ending the call, and styling for a clean interface.

<!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>
        /* Basic styling for the app */
        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#startCall {
            background-color: #28a745;
            color: white;
        }

        button#endCall {
            background-color: #dc3545;
            color: white;
        }

        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>

    <h1>Random Video Chat</h1>

    <!-- Video container for local and remote streams -->
    <div id="video-container">
        <div id="local-video">Local Video</div>
        <div id="remote-video">Remote Video</div>
    </div>

    <!-- Buttons to start and end calls -->
    <div id="controls">
        <button id="startCall">Start Random Chat</button>
        <button id="endCall" disabled>End Chat</button>
    </div>

    <!-- JavaScript integration -->
    <script>
        // App logic here
        let zg, localStream;

        const startCallBtn = document.getElementById('startCall');
        const endCallBtn = document.getElementById('endCall');
        const localVideo = document.getElementById('local-video');
        const remoteVideo = document.getElementById('remote-video');

        // Initialize the ZegoExpressEngine instance
        const appID = YOUR_APP_ID;  // Replace with your actual AppID
        const server = 'YOUR_SERVER_URL';  // Replace with your server URL

        zg = new ZegoExpressEngine(appID, server);

        // Generate random room and user IDs
        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}`;
        }

        const roomID = generateRandomRoomID();
        const userID = generateUserID();
        const token = 'YOUR_TEMPORARY_TOKEN';  // Replace with a token from ZEGOCLOUD

        startCallBtn.addEventListener('click', async () => {
            try {
                // Log into the room
                await zg.loginRoom(roomID, token, { userID, userName: userID });
                console.log(`Logged into room: ${roomID} as user: ${userID}`);

                // Create and display local stream
                localStream = await zg.createStream();
                const localView = zg.createLocalStreamView(localStream);
                localView.play('local-video');

                // Publish local stream
                zg.startPublishingStream('localStreamID', localStream);

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

                // Enable "End Chat" button
                startCallBtn.disabled = true;
                endCallBtn.disabled = false;

            } catch (error) {
                console.error('Error starting the call:', error);
            }
        });

        endCallBtn.addEventListener('click', async () => {
            try {
                // Stop local stream
                zg.stopPublishingStream('localStreamID');
                zg.destroyStream(localStream);

                // Logout from room
                zg.logoutRoom(roomID);

                // Clear video displays
                localVideo.innerHTML = 'Local Video';
                remoteVideo.innerHTML = 'Remote Video';

                // Toggle buttons
                startCallBtn.disabled = false;
                endCallBtn.disabled = true;

            } catch (error) {
                console.error('Error ending the call:', error);
            }
        });
    </script>

</body>
</html>

Conclusion

Developing a random video chat app like Monkey is easier than ever with ZEGOCLOUD’s powerful API and SDK. By following the steps in this guide, you can create an app that connects people instantly through high-quality video calls. ZEGOCLOUD handles the complex parts, like streaming and encryption, so you can focus on building a fun and engaging user experience.

Add features like random user pairing, secure communication, and custom designs to make your app unique. Whether it’s for socializing or learning, your app can provide safe, seamless, and exciting video interactions. Start building today, and bring your random video chat app idea to life with ZEGOCLOUD's tools and support.