实时音视频
  • iOS
  • Android
  • macOS
  • Windows
  • HarmonyOS
  • Linux
  • Web : JavaScript
  • 小程序
  • Flutter
  • Electron
  • Unity3D
  • uni-app
  • React Native
  • Cocos2D
  • 产品简介
  • 下载
  • 体验 App
  • 快速开始
    • 跑通示例源码
    • 集成 SDK
    • 实现视频通话
    • 场景化音视频配置
  • 基础功能
  • 进阶功能
  • 最佳实践
  • 常见错误码
  • 服务端 API
  • 客户端 API
  • 常见问题

集成 SDK

更新时间:2022-08-19 14:29

1 准备环境

在开始集成 ZEGO Express SDK 前,请确保开发环境满足以下要求:

  • 准备一台可以连接到互联网的 Windows 或 macOS 计算机。
  • 使用最新版本的 Chrome 浏览器。

浏览器的兼容性请参考 ZEGO Express Web SDK 支持哪些浏览器

2 集成 SDK

开发者可通过以下任意一种方式集成 SDK。

方式一:从官网下载 SDK,手动集成

  1. 下载最新版本的 SDK 并解压。

  2. 解压 SDK 压缩包,我们可以在 “dist_js/” 下找到 “ZegoExpressWebRTC-x.x.x.js” 文件。

  3. 新建 “index.html” 文件并,放置于和 “ZegoExpressWebRTC-x.x.x.js” 相同的目录下,编写好界面代码,并在 “index.html” 文件的 head 中引入 “ZegoExpressWebRTC-x.x.x.js”。其中,“x.x.x” 为 SDK 的版本号,请参考上一步压缩包解压后的文件名修改。

“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> // 教程中的 js 代码可粘贴至此 <script> 标签内

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

</html>
  1. 直接在浏览器上打开 “index.html” 文件,便可看到基本的界面,此时代表集成完成。

方式二: 使用 npm 方式集成

1. 新建项目

  1. 创建一个文件夹作为基础音视频通话的项目文件夹,结构类似如下:
├── index.html
├── index.js
  1. 将以下代码拷贝到 “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>
  1. 通过 npm 安装 SDK。

在终端中,cd 到 ”index.js“ 文件所在的文件夹,执行 npm i zego-express-engine-webrtc 命令安装依赖。

  • npm 下载包支持 typescript 语言(推荐)。
  • 如果在 macOS 或 Linux 系统中执行 npm 命令失败,提示 “permission denied”,请在 npm 命令前加上 sudo 重新执行即可。
  1. 在 “index.js” 文件中引入 SDK。
import {ZegoExpressEngine} from 'zego-express-engine-webrtc'

var ZegoExpressEngine = require('zego-express-engine-webrtc').ZegoExpressEngine
  1. 在本地 Web 服务器上运行和测试项目。

本地服务器(localhost 或 127.0.0.1)运行 Web 应用仅作为测试,生产环境必须使用 https 协议。

1. 在命令行中执行 `npm i live-server -g` 命令,安装 live-server。

2. 进入项目所在的根目录。

3. 执行 `live-server .` 命令运行该项目,浏览器会自动打开 “index.html” 页面。