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

集成 SDK

更新时间:2022-11-10 17:44

1 准备环境

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

  • HBuilderX 3.0.0 或以上版本。
  • App:
    • 准备 iOS / Android 设备,版本要求如下:
      • iOS 9.0 或以上版本且支持音视频的 iOS 设备。
      • Android 4.4 或以上版本且支持音视频的 Android 设备。
    • iOS / Android 设备已经连接到 Internet。
  • Web:
    • 准备一台可以连接到互联网的 Windows 或 macOS 计算机。
    • 使用最新版本的 Chrome 浏览器。

2 集成 SDK

2.1 创建项目(可选)

此步骤以如何创建新项目为例,如果是集成到已有项目,可忽略此步。
  1. 启动 HBuilderX,选择“文件 > 新建 > 项目”菜单。

  2. 在出现的表单中,选择 “uni-app” 平台,并填写项目名称。

  3. 单击“创建”,即可创建项目。

2.2 集成 SDK

uni-app SDK 视频相关的画面是基于原生 view 进行渲染的,只能使用 nvue。

以下两种方式可以任选一种导入。

方式一:在 ZEGO 官网下载 SDK

  1. 下载 Express-Video SDK 到本地,解压缩 “zego-ZegoExpressUniAppSDK” 文件。

  2. 将解压缩后的文件夹直接复制到项目工程根目录下的 “nativeplugins” 文件夹,如果没有该目录,请手动创建。

方式二:通过 uni-app 插件市场获取 Express-Video SDK

通过 uni-app 插件市场也有两种方式导入,请任选一种:

  • 单击 “购买(0元) for 云打包”,选择相应的项目导入。

  • 单击 “下载 for 离线打包”,离线导入。

  1. 下载 SDK 到本地,解压缩 “zego-ZegoExpressUniAppSDK” 文件。

  2. 将解压缩后的文件夹直接复制到项目工程根目录下的 “nativeplugins” 文件夹,如果没有该目录,请手动创建。

2.3 在 uni-app 项目中导入插件

  1. 单击项目目录的 “manifest.json” 文件后,单击“App原生插件配置”中的“选择本地插件”或“选择云端插件”。

    常见问题:在 Windows 平台上集成 Express uni-app SDK 后,使用 dev 证书云打包运行 iOS 应用时出错,该如何处理?

  2. 在弹出的选择框中,选择 “ZegoExpress 音视频 SDK” 后,单击“确认”,即添加成功。

2.4 自定义调试基座

2.4.1 制作自定义调试基座

uni-app 官方自定义调试基座使用说明请参考 什么是自定义调试基座及使用说明

  1. 选择“运行 > 运行到手机或模拟器 > 制作自定义调试基座”菜单。
  1. 在弹出的界面中,按照 uni-app 教程,填写相关信息,并单击“打包”进行云打包。

打包成功后,控制台会收到 uni-app 的相关提示。

2.4.2 切换运行基座为自定义调试基座

自定义调试基座选择“运行 > 运行到手机或模拟器 > 运行基座选择 > 自定义调试基座”菜单。

3 集成 JS 封装层

  1. 导入 JS 封装层。

在插件市场的 ZegoExpressEngine 音视频插件(JS) 界面单击右侧的“使用 HBuilderX导入插件”。

/Pics/uniapp/uniapp_market_js.png

导入的 JS 封装层将存储在 “components” 目录中。

  1. 导入后可以在业务代码中引入 JS 封装层,并调用 Express 相关接口,示例如下:
import ZegoExpressEngine from '@/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressEngine';