How to Build a Video Calling App Like Jitsi Meet

With the increase in remote work and virtual meetings, many businesses are searching for ways to build their own video meeting applications similar to the Jitsi Meet app.

This article will take you through the steps to build a successful video chat app with ZEGOCLOUD, the world’s leading Real-Time Interaction technology provider, enabling audio and video communication capabilities by integrating a single SDK.

Must-have Features of the Jitsi Meet App

Jitsi Meet is a popular open-source video conferencing app with a secure and easy-to-use platform. It allows for hosting online meetings, webinars, and virtual events. Its extensive features have become a go-to solution for businesses, schools, and individuals looking for a reliable video conferencing app.

Here are some must-have features that make Jitsi Meet stand out from other video conferencing apps:

1. Customizable Meeting URLs: Jitsi Meet allows users to create unique and memorable URLs for their meetings, making sharing the link with attendees easy.

2. Screen Sharing: Users can share their entire screen or just a specific application with other meeting participants, facilitating easy collaboration on projects or presentations.

3. Virtual Backgrounds: Users can choose from many backdrops, making personalizing their video conference experience easy.

4. End-to-end Encryption: All conversations and data shared during meetings are secure and private.

5. Chat Functionality: Users can send messages and links during the meeting without interrupting the speaker.

How to Build Video Meeting App like Jitsi Meet

Creating a video meeting app may seem overwhelming, but the process can be effortless with the right tools and resources. One such tool gaining popularity in the market is the ZEGOCLOUD Video Call SDK. This software development kit provides companies the necessary infrastructure to create video meeting apps. It also has low-code SDK – UIKits to integrate video calls in just 10 minutes.

Features of ZEGOCLOUD Video Call SDK:

1. Personalized User Interface

It enables businesses to create a fully customized user interface, allowing them to tailor the look and feel of their app to their brand. The SDK helps companies build a strong brand identity and offer an engaging and immersive user experience by allowing businesses to personalize their app’s interface.

2. Seamless Real-Time Audio and Video Communication

With the ZEGOCLOUD Video Call SDK, businesses can enable real-time audio and video communication for their app, ensuring that all virtual meetings run smoothly and without interruptions. This feature is especially beneficial for companies that require high-quality communication for successful meetings, as it helps to improve productivity and reduce downtime.

3. Highly Secure Communication

It offers top-notch security features to businesses. It employs end-to-end encryption technology to safeguard all communication and data exchanged during virtual meetings, which is especially crucial for businesses that handle confidential or sensitive information. The encryption feature ensures that all transmission is secure, private, and protected from unauthorized access.

4. Integration and Customization Ease

It is highly customizable and can seamlessly integrate with other applications, allowing businesses to create an app that meets their needs. With the SDK, companies can customize their app’s features, functions, and appearance and integrate it with their existing tools and applications.

How to Implement Video Call Apps like Jitsi Meet

Let’s now see how to implement a video call app using ZEGOCLOUD SDK.

Preparation

A ZEGOCLOUD developer account – Sign up
A device with internet and multimedia support
Understanding of web development

1. Integrate the SDK

Firstly, navigate to your project directory and execute the command below. Note that this specific code is for web applications, and if you’re developing for other platforms, you can find relevant regulations in the Video Call SDK documentation.

npm i zego-express-engine-webrtc

After installing the ZEGOCLOUD SDK package, you can effortlessly import it into your JavaScript code using the codes below:

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

2. Create a simple video call UI

You must design an intuitive user interface with a call button and a real-time video display window for both parties. Whether you’re developing for the web or other technology stacks, this step is crucial for creating an optimal user experience.

To help you get started, here’s a sample code for a web application you can modify to fit your needs.

<html>

<head>
    <meta charset="UTF-8">
    <title>Jitsi Meet Video Call</title>
    <style type="text/css">
        * {
            font-family: sans-serif;
        }

        h1,
        h4 {
            text-align: center;
        }

        #local-video, #remote-video {
            width: 400px;
            height: 300px;
            border: 1px solid #dfdfdf;
        }

        #local-video {
            position: relative;
            margin: 0 auto;
            display: block;
        }

        #remote-video {
            display: flex;
            margin: auto;
            position: relative !important;
        }
    </style>
</head>

<body>
    <h1>
        Jitsi Meet Video Call
    </h1>
    <h4>Local video</h4>
    <div id="local-video"></div>
    <h4>Remote video</h4>
    <div id="remote-video"></div>
    <script>
    // Copy and paste the JavaScript sample code in the following part of this topic here.
    // const zg = new ZegoExpressEngine(appID, server);
    </script>
</body>

</html>

3. Initialize the SDK.

To use the ZEGOCLOUD SDK, you’ll need to create and set up a ZegoExpressEngine object. During initialization, specify your project’s AppID and access server address as values for the appID and server parameters, respectively.

let appID = ; 

let server = "";

// Instance initialization
const zg = new ZegoExpressEngine(appID, server);

4. Log into a room

Joining a room is a straightforward process. Simply use the loginRoom method and input the roomID, token, user, and config parameters. When logging in, if the room doesn’t exist, it will be created automatically for you.

let userID = Util.getBrow() + '_' + new Date().getTime();
let userName = "user0001";
let roomID = "0001";
let token = ;

// Listen for callback events like user login or logout, room connection status updates, and stream publishing status updates before logging in to a room to avoid missing any notifications.

zg.on('roomStateChanged', async (roomID, reason, errorCode, extendedData) => {

})
zg.loginRoom(roomID, token, { userID, userName: userID }, { userUpdate: true }).then(result => {
     if (result == true) {
        console.log("login success")
     }
});

5. Create local video preview and publish streams to ZEGOCLOUD audio and video cloud.

Now, create a media stream with createStream, and display it with createLocalStreamView or a video element’s srcObject attribute, and upload it to ZEGOCLOUD using startPublishingStream with the streamID and localStream parameters.

//You can publish streams at any time while the room is in a connected state when developing your own service, unlike the sample code, which immediately publishes streams upon successful room login.

zg.loginRoom(roomID, token, { userID, userName: userID }, { userUpdate: true }).then(async result => {
     if (result == true) {
        console.log("login success")
        // Create a stream and start the preview.
           // After calling the `createStream` method, you cannot perform subsequent operations until the ZEGOCLOUD server returns a streaming media object.
           const localStream = await zg.createStream();

           // Create a media stream player object to preview local streams.
           const localView = zg.createLocalStreamView(localStream);
           // Mount the player to a page. In the sample code, `local-video` indicates the DOM element ID of the player.
           localView.play("local-video");

           // Start to publish an audio and video stream to the ZEGOCLOUD audio and video cloud.
           let streamID = new Date().getTime().toString();
           zg.startPublishingStream(streamID, localStream)
     }
});

6. Playing published streams

To play audio and video streams from other users during a call, use the roomStreamUpdate callback to retrieve the streamID of the new user, and then call the startPlayingStream method to play their published audio and video stream.

// Stream status update callback
zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
    // When `updateType` is set to `ADD`, an audio and video stream is added, and you can call the `startPlayingStream` method to play the stream.
    if (updateType == 'ADD') {
        // When streams are added, play them.
        // Sample code only plays the first stream in the list of new audio and video streams added. In a real service, it is recommended to iterate through the stream list to play all the streams.

        const streamID = streamList[0].streamID;
        // The stream list specified by `streamList` contains the ID of the corresponding stream.
        const remoteStream = await zg.startPlayingStream(streamID);

        // Create a media stream player object to play remote media streams.
        const remoteView = zg.createRemoteStreamView(remoteStream);
        // Mount the player to a page. In the sample code, `remote-video` indicates the DOM element ID of the player.
        remoteView.play("remote-video");

    } else if (updateType == 'DELETE') {
        // When streams are deleted, stop playing them.
    }
});

7. Stop a video call

If you want to stop publishing local audio and video streams, use stopPublishingStream(). To eliminate created stream data, use destroyStream(). To stop playing audio and video streams from remote users, use stopPlayingStream().

// Stop publishing a stream based on the local streamID.
zg.stopPublishingStream(streamID)

// Destroy the stream data.
zg.destroyStream(localStream)

// Stream status update callback to stop playing audio and video streams.
zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
if (updateType == 'DELETE') {

// Stop playing the deleted streams.
zg.stopPlayingStream(streamList[0].streamID)
}
});

8. Log out of a room

Finally, to leave a room, you can use the logoutRoom method to log out.

zg.logoutRoom(roomID)

Run a Demo

You can download the sample demo source code here.

Conclusion

With the powerful features of ZEGOCLOUD SDK, developers can build a video calling app like Jitsi Meet that meets their unique needs with ease. It will be a straightforward process that involves creating a room, generating tokens, initiating and publishing streams, and playing streams from other users.

Read More: