Integrating the SDK

2024-05-06

Prerequisites

Before starting to integrate the ZEGO Express SDK, ensure that your development environment meets the following requirements:

A Windows or macOS development computer connected to the Internet.
A browser that meets Express Web SDK compatibility requirements (for details, refer to Browser Compatibility and Known Issues). The latest version of Google Chrome browser is recommended.

Integrating the SDK

Developers can integrate the SDK using any of the following methods.

Method 1: Using a Package Manager (Recommended)

Download and install Node.js.
Create a new project

Install the SDK through a package manager.

Run the following command in the project's root directory to install dependencies.

Note

The installed dependency package supports the TypeScript language.
If the installation command fails on macOS or Linux systems with a "permission denied" error, please add sudo before the SDK installation command and retry.

Import the SDK in your project files. Example code is as follows:

Full import and on-demand import of the SDK.

Warning

Before version 3.4.0: When developers integrate the ZEGO Web SDK, audio mixing, stream mixing, and other features are integrated by default. If the developer's business only requires one of the feature modules, it cannot be integrated separately.
Starting from version 3.4.0:
- Developers can still import the SDK through the main path, integrating audio mixing, stream mixing, and other features simultaneously.
- At the same time, developers can also select from the Audio Mix, Stream Mixing, CDN, Range Audio, and AI Effects feature modules according to business needs, and integrate them separately through package manager installation. (Only supports integrating individual feature modules through package manager installation; other methods are not supported.)
  - The package size for each feature module is approximately: Audio Mix (56 KB), Stream Mixing (60 KB), CDN (29 KB), Range Audio (97 KB), AI Effects (69 KB).
  - Features that are not imported will be automatically removed during the build process, reducing the SDK package size.

Method 2: Download SDK from Official Website and Integrate Manually

Download SDK from Official Website and Integrate Manually

Download the latest version of the SDK and extract it to the project folder. We can find the "ZegoExpressWebRTC-x.x.x.js" file under "dist_js/".
Open the project folder in VSCode and create a new "index.html" file.

Write interface code in the "index.html" file, and use a script tag in the file's head tag to import "ZegoExpressWebRTC-x.x.x.js". Here, "x.x.x" is the SDK version number. Please modify it based on the filename from the extracted archive in step 1.

The index.html code example is as follows:

<html>
  <head>
    <meta charset="UTF-8">
    <title>Zego RTC Web Demo</title>
    <script src="./dist_js/ZegoExpressWebRTC-x.x.x.js"></script>
  </head>
  <body>
    <h1>
      Zego RTC Web Demo
    </h1>
  </body>
  <script>
    (async () => {
      // Add subsequent code here...
    })();
  </script>
</html>

<html>
  <head>
    <meta charset="UTF-8">
    <title>Zego RTC Web Demo</title>
    <script src="./dist_js/ZegoExpressWebRTC-x.x.x.js"></script>
  </head>
  <body>
    <h1>
      Zego RTC Web Demo
    </h1>
  </body>
  <script>
    (async () => {
      // Add subsequent code here...
    })();
  </script>
</html>