Integrate the SDK

Last updated：2023-03-09 16:58

1 Prepare the environment

Before you attempt to integrate the ZEGO Express SDK, make sure that the development environment meets the following requirements:

Prepare a Windows or macOS computer with an Internet connection.
Use the latest version of the Chrome browser.

To check browser compatibility, please refer to Web SDK compatibility.

2 Integrate the SDK

You can integrate the SDK in any of the following ways.

Method 1: Download the SDK from the official website and integrate it manually

Download the latest version of SDK and decompress it.
Decompress the SDK compressed package and find the ZegoExpressWebRTC-xxxjs file under dist_js/.
Create a new index.html file and move it to the same directory where the ZegoExpressWebRTC-xxxjs file is located, write the interface code, and import ZegoExpressWebRTC-xxxjs in the head element of the index.html file. Among them, "xxx" is the version number of the SDK. Please refer to the file name modification after you decompress the compressed package in the previous step.

This is sample code for the index.html file:

<html>

<head>
    <meta charset="UTF-8">
    <title>Zego Express 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>
        Zego RTC Video Call
    </h1>
    <h4>Local video</h4>
    <div id="local-video"></div>
    <h4>Remote video</h4>
    <div id="remote-video"></div>
    <script> // The JS code in the tutorial can be pasted into this <script> tag

    // const zg = new ZegoExpressEngine(appID, server);
    </script>
</body>

</html>

Open the index.html file directly from the browser. When the basic interface appears, the integration is complete.

Method 2: Use NPM to integrate the SDK

Create a new project.

Create a folder as the project folder for basic audio and video calling based on the following structure:

├── index.html
├── index.js

Copy the following code into the index.html file.

<html>

<head>
    <meta charset="UTF-8">
    <title>Zego Express 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>
        Zego RTC Video Call
    </h1>
    <h4>Local video</h4>
    <div id="local-video"></div>
    <h4>Remote video</h4>
    <div id="remote-video"></div>
    <script src="index.js"></script>
</body>

</html>

Install the SDK by using NPM.

In the terminal, use the change directory (cd) command to change the file's directory to the folder where the index.js file is located and execute the npm i zego-express-engine-webrtc command to install dependencies.

The npm download package supports the TypeScript language (recommended).
If you fail to execute the npm command in the macOS or Linux system, the "permission denied" prompt appears. Please add sudo before the npm command and execute it again.

Import the SDK to the index.js file.

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

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

Run and test the project on a local web server.

The local server (localhost or 127.0.0.1) runs the web application only as a test, and the production environment must use the HTTPS protocol.

Execute the npm i live-server -g command on the command line to install live-server.
Enter the root directory where the project is located.
Execute the live-server command to run the project, and the browser automatically opens index.html.

ZEGO UIKits

Cloud Communications Products

Low-Code Products

Metaverse

Supporting Services

Integrate the SDK

1 Prepare the environment

2 Integrate the SDK

Method 1: Download the SDK from the official website and integrate it manually

Method 2: Use NPM to integrate the SDK