实时音视频
  • iOS
  • Android
  • macOS
  • Windows
  • HarmonyOS
  • Linux
  • Web
  • 小程序
  • Flutter
  • Electron
  • Unreal Engine
  • Unity3D
  • uni-app : JavaScript
  • React Native
  • Cocos Creator
  • 产品简介
  • 下载
  • 快速开始
    • 跑通示例源码
    • 集成 SDK
    • 实现视频通话
    • 实时音视频 SDK 与实时语音 SDK 差异
  • 通信能力
  • 房间能力
  • 音频能力
  • 视频能力
  • 直播能力
  • 其他能力
  • 最佳实践
  • 客户端 API
  • 服务端 API
  • 常见错误码
  • 常见问题
  • 文档中心
  • 实时音视频
  • 快速开始
  • 集成 SDK

集成 SDK

更新时间:2023-07-23 16:45

1 准备环境

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

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

2 集成 SDK

2.1 创建项目(可选)

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

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

2.2 集成 SDK

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

方式 1:在 ZEGO 官网下载 SDK

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

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

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

  1. 在 uni-app 插件市场任选一种方式导入:

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

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

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

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

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

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

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

2.4 自定义调试基座

2.4.1 制作自定义调试基座

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

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

  2. 在弹出的界面中,按照 uni-app 教程,填写相关信息,并单击“打包”进行云打包。

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

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

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

3 集成 JS 封装层

  1. 导入 JS 封装层。

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

    /Pics/uniapp/uniapp_market_js.png

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

  2. 导入后,可以在业务代码中引入 JS 封装层,并调用 Express 相关接口,示例如下:

    import ZegoExpressEngine from '@/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressEngine';
本篇目录