DEV Community

Cover image for How to Build a Random Video Chat Platform Like Cammatch
Stephen568hub
Stephen568hub

Posted on

How to Build a Random Video Chat Platform Like Cammatch

#webdev #beginners #programming #tutorial

How to Build a Random Video Chat Platform Like Cammatch

Building your own random video chat platform like Cammatch is now easier than ever. This guide shows you the simple steps to create a service where strangers can meet through video. We'll show you how to use ZEGOCLOUD for handling all the video streaming parts, so you don't need to worry about complex technical setup.

You'll learn how to create user matching, add basic safety features, and design a clean interface that people can use right away. Perfect for beginners who want to start their own video chat platform without needing advanced technical skills or knowledge.

How to Build a Random Video Chat Platform Like Cammatch

Random video chat platforms like Cammatch have become very popular for meeting new people online. ZEGOCLOUD is a service that provides ready-to-use video streaming technology, handling all the complex parts of video calls and other real-time interactive features, so you don't have to build them yourself.

With ZEGOCLOUD, you only need to focus on designing your platform's look and features.

Prerequisites

  • A ZEGOCLOUD account (sign up here).
  • Your AppID from the ZEGOCLOUD dashboard.
  • Basic knowledge of HTML, CSS, and JavaScript.
  • A code editor (like Visual Studio Code).
  • A web browser for testing.

If you’re good with the requirements, then let’s jump right into it!

1. Create Your Project Files

Start by making these three basic files:

index.html
styles.css
app.js
Enter fullscreen mode Exit fullscreen mode

2. Set Up Your HTML Structure

Your HTML file should include:

  • A welcome screen with a start button.
  • A chat screen with video areas for both users.
  • Simple buttons for finding a new person, muting, and ending chats.
  • A text chat option for typing messages.

Here's a simple example:

<!DOCTYPE html>
<html>
<head>
    <title>Random Video Chat</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Random Video Chat</h1>
        <p>Meet new people instantly!</p>
    </header>

    <main>
        <!-- Welcome Screen -->
        <div id="welcome-screen" class="screen active">
            <h2>Welcome!</h2>
            <p>Click below to start meeting new people.</p>
            <div class="terms">
                <p>By clicking "Start" you confirm you're 18+ and agree to our Terms.</p>
            </div>
            <button id="start-chat">Start</button>
        </div>

        <!-- Video Chat Screen -->
        <div id="chat-screen" class="screen">
            <div id="video-container">
                <div id="local-video-wrapper">
                    <div id="local-video"></div>
                    <p>You</p>
                </div>
                <div id="remote-video-wrapper">
                    <div id="remote-video"></div>
                    <p>Stranger</p>
                </div>
            </div>

            <div id="chat-controls">
                <button id="next-chat">Next Person</button>
                <button id="toggle-audio">Mute</button>
                <button id="toggle-video">Hide Video</button>
                <button id="end-chat">End Chat</button>
            </div>

            <div id="text-chat">
                <div id="chat-messages"></div>
                <div id="chat-input-area">
                    <input type="text" id="chat-input" placeholder="Type a message...">
                    <button id="send-message">Send</button>
                </div>
            </div>
        </div>

        <!-- End Screen -->
        <div id="ending-screen" class="screen">
            <h2>Chat Ended</h2>
            <p>Want to meet someone new?</p>
            <button id="new-chat">Start New Chat</button>
        </div>
    </main>

    <!-- ZEGOCLOUD SDK -->
    <script src="ZegoExpressWebRTC.js"></script>
    <script src="app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

3. Style Your App

Create a simple, clean design with CSS. Focus on making the video areas large and clear, with easy-to-use buttons.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f5f5f5;
}

header {
    background-color: #3498db;
    color: white;
    text-align: center;
    padding: 1rem;
}

main {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

.screen {
    display: none;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 1.5rem;
    text-align: center;
}

.screen.active {
    display: block;
}

.terms {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 10px;
    margin: 15px 0;
    font-size: 0.85rem;
    color: #666;
}

button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px 5px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #2980b9;
}

#next-chat {
    background-color: #e74c3c;
}

#next-chat:hover {
    background-color: #c0392b;
}

#video-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

#local-video-wrapper, #remote-video-wrapper {
    width: 48%;
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#local-video, #remote-video {
    background-color: #222;
    height: 300px;
    width: 100%;
}

#chat-controls {
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#text-chat {
    border: 1px solid #ddd;
    border-radius: 8px;
    height: 250px;
    display: flex;
    flex-direction: column;
}

#chat-messages {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    background-color: #f9f9f9;
}

#chat-input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
}

#chat-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
}

.message {
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 75%;
}

.user-message {
    background-color: #3498db;
    color: white;
    margin-left: auto;
}

.stranger-message {
    background-color: #eee;
    color: #333;
}
Enter fullscreen mode Exit fullscreen mode

4. Add the ZEGOCLOUD SDK to Your Project

The main part of your platform is the video chat functionality. Here's how to add the ZEGOCLOUD SDK:

  1. Download the ZEGOCLOUD SDK from the downloads page.
  2. After downloading, extract the ZIP file to your computer.
  3. Look for a file named "ZegoExpressWebRTC-X.X.X.js" in the extracted folder (the X.X.X will be version numbers).
  4. Copy this file to your project folder (the same folder where your index.html is)
  5. Make sure the script tag in your index.html matches the exact filename: 
<script src="ZegoExpressWebRTC-X.X.X.js"></script>
(Replace X.X.X with the actual version numbers in your file)
Enter fullscreen mode Exit fullscreen mode

Now add this code to your app.js file:

// Get HTML elements
const welcomeScreen = document.getElementById('welcome-screen');
const chatScreen = document.getElementById('chat-screen');
const endingScreen = document.getElementById('ending-screen');
const startButton = document.getElementById('start-chat');
const nextButton = document.getElementById('next-chat');
const audioButton = document.getElementById('toggle-audio');
const videoButton = document.getElementById('toggle-video');
const endButton = document.getElementById('end-chat');
const newChatButton = document.getElementById('new-chat');
const sendButton = document.getElementById('send-message');
const chatInput = document.getElementById('chat-input');
const messagesArea = document.getElementById('chat-messages');

// Create status display
const statusDisplay = document.createElement('div');
statusDisplay.id = 'status';
statusDisplay.textContent = 'Ready to connect';
chatScreen.insertBefore(statusDisplay, chatScreen.firstChild);

// ZEGOCLOUD setup
const appID = 123456789;  // Replace with your ZEGOCLOUD AppID
const server = 'wss://webliveroom-test.zego.im/ws';  // ZEGOCLOUD server

// Start ZEGOCLOUD
const zg = new ZegoExpressEngine(appID, server);

// Setup tracking variables
let myStream = null;
let strangerStream = null;
let roomID = null;
let userID = null;
let audioMuted = false;
let videoOff = false;
let connectedToStranger = false;

// Create random room ID
function makeRoomID() {
    return `room_${Math.random().toString(36).substring(2, 10)}`;
}

// Create user ID
function makeUserID() {
    return `user_${Math.random().toString(36).substring(2, 8)}`;
}

// Update connection status
function updateStatus(status) {
    const statusBox = document.getElementById('status');
    statusBox.textContent = status;
}

// Show specific screen
function showScreen(screen) {
    welcomeScreen.classList.remove('active');
    chatScreen.classList.remove('active');
    endingScreen.classList.remove('active');

    screen.classList.add('active');
}

// Start new chat
async function startChat() {
    try {
        updateStatus('Connecting...');

        // Create new IDs
        roomID = makeRoomID();
        userID = makeUserID();

        // Join room
        await zg.loginRoom(roomID, "", {
            userID: userID,
            userName: userID
        });

        // Start your camera and mic
        myStream = await zg.createStream({
            camera: {
                audio: true,
                video: true
            }
        });

        // Show your video
        const myVideo = zg.createLocalStreamView(myStream);
        myVideo.play("local-video");

        // Start sending your video
        await zg.startPublishingStream(userID, myStream);

        // Listen for other people's videos
        zg.on('roomStreamUpdate', async (roomID, type, streams) => {
            if (type === 'ADD') {
                // New person joined
                connectedToStranger = true;
                updateStatus('Connected to stranger');

                const strangerStreamID = streams[0].streamID;
                strangerStream = await zg.startPlayingStream(strangerStreamID);

                const strangerVideo = zg.createRemoteStreamView(strangerStream);
                strangerVideo.play("remote-video");

                // Show welcome message
                addMessage("System", "Connected! Say hello!", false, true);
            } else if (type === 'DELETE') {
                // Person left
                connectedToStranger = false;
                updateStatus('Stranger disconnected');
                addMessage("System", "Stranger disconnected. Click 'Next Person' to continue.", false, true);
            }
        });

        // Show chat screen
        showScreen(chatScreen);

        // First message
        addMessage("System", "Looking for someone to chat with...", false, true);
    } catch (error) {
        console.error("Error:", error);
        updateStatus('Connection Failed');
        alert("Could not start chat. Please check your camera and microphone permissions.");
    }
}

// End current chat
async function endChat() {
    try {
        updateStatus('Disconnecting...');

        if (myStream) {
            await zg.stopPublishingStream(userID);
            zg.destroyStream(myStream);
            myStream = null;
        }

        if (strangerStream) {
            await zg.stopPlayingStream(strangerStream.streamID);
            strangerStream = null;
        }

        if (roomID) {
            await zg.logoutRoom(roomID);
            roomID = null;
        }

        connectedToStranger = false;

        // Clear messages
        messagesArea.innerHTML = '';

        // Reset buttons
        audioMuted = false;
        videoOff = false;
        audioButton.textContent = "Mute";
        videoButton.textContent = "Hide Video";

        updateStatus('Disconnected');

        // Show end screen
        showScreen(endingScreen);
    } catch (error) {
        console.error("Error ending chat:", error);
    }
}

// Find new chat partner
async function findNewPerson() {
    addMessage("System", "Looking for a new person...", false, true);
    await endChat();
    await startChat();
}

// Toggle audio
async function toggleAudio() {
    if (myStream) {
        audioMuted = !audioMuted;
        await zg.mutePublishStreamAudio(myStream, audioMuted);
        audioButton.textContent = audioMuted ? "Unmute" : "Mute";

        if (audioMuted) {
            addMessage("System", "You muted your microphone", false, true);
        } else {
            addMessage("System", "Your microphone is now on", false, true);
        }
    }
}

// Toggle video
async function toggleVideo() {
    if (myStream) {
        videoOff = !videoOff;
        await zg.mutePublishStreamVideo(myStream, videoOff);
        videoButton.textContent = videoOff ? "Show Video" : "Hide Video";

        if (videoOff) {
            addMessage("System", "You turned off your camera", false, true);
        } else {
            addMessage("System", "Your camera is now on", false, true);
        }
    }
}

// Send message
function sendMessage() {
    const text = chatInput.value.trim();
    if (text && connectedToStranger) {
        // Show message
        addMessage("You", text, true);

        // Clear input
        chatInput.value = '';
    } else if (!connectedToStranger && text) {
        addMessage("System", "Wait for someone to connect before sending messages", false, true);
        chatInput.value = '';
    }
}

// Add message to chat
function addMessage(sender, text, isUser = false, isSystem = false) {
    const message = document.createElement('div');
    message.classList.add('message');

    if (isUser) {
        message.classList.add('user-message');
        message.textContent = text;
    } else if (isSystem) {
        message.style.textAlign = 'center';
        message.style.fontStyle = 'italic';
        message.style.color = '#666';
        message.style.backgroundColor = '#f0f0f0';
        message.textContent = text;
    } else {
        message.classList.add('stranger-message');
        message.textContent = text;
    }

    messagesArea.appendChild(message);
    messagesArea.scrollTop = messagesArea.scrollHeight;
}

// Set up buttons
startButton.addEventListener('click', startChat);
nextButton.addEventListener('click', findNewPerson);
audioButton.addEventListener('click', toggleAudio);
videoButton.addEventListener('click', toggleVideo);
endButton.addEventListener('click', endChat);
newChatButton.addEventListener('click', startChat);
sendButton.addEventListener('click', sendMessage);

// Send with Enter key
chatInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

// Start when page loads
window.onload = async () => {
    try {
        // Check browser support
        const result = await zg.checkSystemRequirements();

        if (!result.webRTC) {
            alert("Your browser doesn't support video chat. Please try Chrome, Firefox, or Edge.");
            return;
        }

        // Set up ZEGOCLOUD
        zg.setLogConfig({
            logLevel: 'error'
        });

        console.log('Ready to chat!');
    } catch (error) {
        console.error('Setup failed:', error);
        alert('Could not set up video chat. Please refresh or try another browser.');
    }
};
Enter fullscreen mode Exit fullscreen mode

5. Test Your Platform

  1. Open your website on one browser.
  2. Click "Start" to begin.
  3. Open the site in another browser or incognito window.
  4. Click "Start" there too.
  5. The two browsers should connect and you'll see both videos.

6. Troubleshooting SDK Installation

If you have problems with the SDK, check these common issues:

  • Wrong File Path: Make sure the path to the SDK file in your HTML is correct.
  • File Not Found: Check that you copied the SDK file to your project folder.
  • Version Mismatch: Some code might need updating if using a newer SDK version.
  • Loading Error: Try refreshing your page or check browser console for specific errors.
  • Permission Issues: Make sure your browser has permission to access your camera and microphone.

7. Add More Features

Once your basic platform is working, you can add more features:

  • User profiles.
  • Interests matching.
  • Gender filters.
  • Report system for inappropriate behavior.
  • Better mobile support.

Conclusion

Building your own random video chat platform like Cammatch is now within reach. With ZEGOCLOUD handling the complex video streaming parts, you can focus on creating a great user experience. Start small with the basic features, test thoroughly, and add more options as you grow.

Remember to keep user safety in mind by adding simple reporting tools and clear rules. The steps in this guide give you all you need to start your own video chat service where people can meet and talk instantly. With some time and effort, your platform could become the next popular way to connect online.

Top comments (0)