Live Streaming
  • iOS
  • Android
  • Web : JavaScript
  • Flutter
  • React Native
  • Electron
  • Unity3D
  • Windows
  • macOS
  • Linux
  • Overview
  • Live Streaming vs. Interactive Live Streaming
  • Develop your app
    • Live Streaming
      • Integrate the SDK
      • Implement a basic live streaming
      • Enhance basic livestream
      • CDN
      • Play live streams
    • Interactive Live Streaming
  • Upgrade the livestream
    • Advanced features
      • Media push
        • Mix the live streams
      • Enhance the livestream
        • Share the screen
        • Improve your appearance in the livestream
        • Configure video codec
        • Visualize the sound level
      • Message signaling
        • Broadcast real-time messages to a room
        • Quotas and limits
      • Ensure livestream quality
        • Check the room connection status
        • Monitor streaming quality
      • Join multiple rooms
      • Publish multiple live streams
      • Replace the audio/video track
      • Audio mixing
      • Low-latency live streaming
      • Implement a livestream using frameworks
        • Implement livestream features using Vue
        • Implement livestream features using Angular
        • Implement livestream features using React
      • Autoplay policy
      • Restrictions on playing multiple lives simultaneously in Safari
      • Common audio config
      • Playing streams via URL
    • Distincitve features
      • Set the voice hearing range
      • Vitrual Background and Blur
      • Customize the video and audio
  • Resources & Reference
    • SDK
    • Sample code
    • API reference
      • Client APIs
      • Server APIs
    • Debugging
      • Error codes
    • Browser compatibility
    • FAQs
    • Key concepts
  • Communication capability
  • Documentation
  • Live Streaming
  • Develop your app
  • Live Streaming
  • Integrate the SDK

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

  1. Download the latest version of SDK and decompress it.

  2. Decompress the SDK compressed package and find the ZegoExpressWebRTC-xxxjs file under dist_js/.

  3. 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>
  1. 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

  1. 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
  1. 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>
  1. 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.
  1. Import the SDK to the index.js file.
import {ZegoExpressEngine} from 'zego-express-engine-webrtc'

or

var ZegoExpressEngine = require('zego-express-engine-webrtc').ZegoExpressEngine
  1. 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.

  1. Execute the npm i live-server -g command on the command line to install live-server.

  2. Enter the root directory where the project is located.

  3. Execute the live-server command to run the project, and the browser automatically opens index.html.

Page Directory