Integrate the SDK
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 underdist_js/
.Create a new
index.html
file and move it to the same directory where theZegoExpressWebRTC-xxxjs
file is located, write the interface code, and importZegoExpressWebRTC-xxxjs
in the head element of theindex.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 addsudo
before thenpm
command and execute it again.
- Import the SDK to the
index.js
file.
import {ZegoExpressEngine} from 'zego-express-engine-webrtc'
or
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 opensindex.html
.