uniapp音视频通话示例源码运行指引(uniapp音视频开发系列1)

Uniapp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。目前有900万开发者，其中不少开发者希望能集成音视频功能到应用上。

ZEGO即构作为专业的实时音视频服务商，提供 Uniapp SDK 和相关插件，满足 Uniapp 开发者对音视频通话、直播、IM等方面的需求。为方便体验，ZEGO即构提供了 Uniapp 示例源码，下面一起来了解下。

示例源码下载地址：https://storage.zego.im/express/example/uniapp/ZegoExpressExample-UniApp.zip

Uniapp 示例源码运行指引

准备环境

在运行示例源码前，请确保开发环境满足以下要求：

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

前提条件

已在 ZEGO 控制台创建项目，并申请有效的 AppID 和 Token（Web 不支持 AppSign 鉴权，仅支持 Token 鉴权），详情请参考控制台 – 项目管理中的“项目信息”。

示例源码目录结构

下列结构为工程目录的文件结构，下文所涉及的文件路径均为相对于此目录的路径。

.
├── App.vue
├── common
│   ├── uni-nvue.css          # uni 定义的 css样式
│   └── zego-nvue.css         # zego 定义的 css 样式
├── components
│   ├── uni-list
│   │   └── uni-list.vue
│   ├── uni-list-item
│   │   └── uni-list-item.vue
│   ├── uni-section
│   │   └── uni-section.vue
│   ├── uni-segmented-control
│   │   └── uni-segmented-control.vue
│   └── zego-ZegoExpressUniApp-JS        # zego uniapp sdk js 封装层
│       ├── lib                          # js 库文件
│       └── zego-view                    # 原生渲染 view
├── main.js
├── manifest.json
├── nativeplugins                        
│   └── zego-ZegoExpressUniAppSDK        # 本地依赖的 zego 原生插件
│       ├── android
│       ├── ios
│       └── package.json
├── package.json
├── pages                                # demo 源码
│   ├── KeyCenter.js                     # 在里面的 KeyCenter.java 文件中填写申请的 AppID 和 AppSign
│   ├── example
│   │   ├── advance-stream               # 推拉流进阶
│   │   ├── advance-video                # 视频进阶
│   │   ├── common-feature               # 通用功能
│   │   ├── other                        # 其他功能
│   │   ├── quick-start                  # 快速开始
│   │   ├── scenes                       # 场景方案
│   │   └── setting                      # 设置与调试
│   ├── index
│   │   └── index.vue
│   └── permission.js
├── pages.json                           # 显示的所有页面
├── static                               # 资源文件
│   ├── SampleVideo_1280x720_5mb.mp4
│   └── logo.png
├── uni.scss
└── unpackage                            # uniapp 打包生成的文件

运行示例代码

使用 HBuilder X 工具打开示例工程。
示例源码中缺少 SDK 初始化所需的 AppID 和 Token，需要修改 “pages/KeyCenter.js” 文件，请使用本文前提条件已获取的 AppID 和 Token 正确填写，否则示例源码无法正常运行。
找到项目目录下的 manifest.json 文件，修改 “uni-app” 应用标识。
在项目中导入插件，具体操作请参考在 uni-app 项目中导入插件。
运行代码
- 运行到 Web 平台
- 运行到手机或模拟器（参考下文 生成 App 自定义调试基座）