在开始集成 ZEGO Express SDK 前,请确保开发环境满足以下要求:
浏览器的兼容性,请参考 浏览器兼容性说明。
开发者可通过以下任意一种方式集成 SDK。
下载最新版本的 SDK 并解压。
解压 SDK 压缩包,我们可以在 “dist_js/” 下找到 “ZegoExpressWebRTC-x.x.x.js” 文件。
推荐下载 VSCode,在 VSCode 中找到项目文件目录并打开。
安装 VSCode 扩展插件 Live Server。
新建 “index.html” 文件,并放置于和 “ZegoExpressWebRTC-x.x.x.js” 相同的目录下。
在 “index.html” 文件中编写界面代码,并在文件的 head 中引入 “ZegoExpressWebRTC-x.x.x.js”。其中,“x.x.x” 为 SDK 的版本号,请参考第 2 步压缩包解压后的文件名修改。
“index.html” 代码示例如下:
<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>
<script src="./ZegoExpressWebRTC-x.x.x.js"></script>
</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> // 教程中的 js 代码可粘贴至此标签内
// const zg = new ZegoExpressEngine(appID, server);
</script>
</body>
</html>
在 “index.html” 文件的编辑面板,单击鼠标右键,弹出菜单,选择“Open with Live Server”,即可看到基本界面,此时表示 SDK 已集成。
创建一个文件夹作为基础音视频通话的项目文件夹,结构类似如下:
├── index.html
├── index.js
将以下代码拷贝到 “index.html” 文件中。
<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>
通过 npm 安装 SDK。
在终端中,cd 到 ”index.js“ 文件所在的文件夹,执行 npm i zego-express-engine-webrtc
命令安装依赖。
sudo
重新执行即可。在 “index.js” 文件中引入 SDK。
方式 1:
import {ZegoExpressEngine} from 'zego-express-engine-webrtc'
方式 2:
var ZegoExpressEngine = require('zego-express-engine-webrtc').ZegoExpressEngine
在本地 Web 服务器上运行和测试项目。
本地服务器(localhost 或 127.0.0.1)运行 Web 应用仅作为测试,生产环境必须使用 HTTPS 协议。
npm i live-server -g
命令,安装 live-server。live-server .
命令运行该项目,浏览器会自动打开 “index.html” 页面。联系我们
文档反馈