接口全面重构 TypeScript ，让 uni-app 具备出色的基础音视频能力

摘要：一套代码，应用多个平台，满足企业快速孵化热点产品的需求。

文｜RTC SDK 开发团队

对于很多中小型企业或者开拓型项目来说，在产品开发设计初期首要满足快速开发、快速迭代、完善业务逻辑的需求。而传统的原生 App 开发相对来说迭代速度慢、人员配比高、资金耗费大，因此一款简单、易上手、跨端表现优秀的框架就变得很有必要。

uni-app 是 DCloud 官方推出的一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web、以及各种小程序、快应用等多个平台，非常满足企业快速孵化热点产品的需求。

在此之前，即构推出 uni-app 平台的 Express 原生插件，支持 iOS 和 Android， 用以满足客户的需求，但因为 JavaScript 接口的弱类型性质本身对客户使用没那么友好，增加了出错的机会，因此我们进行了优化，对接口进行全面的 TypeScript 重构，推出了 1.0.0 正式版，有完备的类型约束，支持 Promise，使接口更加清晰易用。

主要包含的功能模块：

1. 基础的实时音视频功能

2. 常用视频配置

3. 房间实时消息

4. 推拉流信息监测

5. 编解码与分层编码

6. 媒体播放器

7. 流量控制等进阶功能

接下来，就带大家一起看下如何使用吧：

准备工作

• ZEGO 开发者账户（通过 ZEGO 官网注册）

• HBuilderX 3.0.5 及以上

• iOS 9.0 及以上

• Android 4.1 及以上

• iOS/Android 真机(或支持音视频的模拟器)

快速接入

申请 ZEGO AppID

登录 ZEGO 官网 注册账号，根据自身实际业务需求选择场景，获取 AppID 与 AppSign，用于初始化引擎。

创建 uni-app 项目

使用 uni-app 官方 IDE HBuilder，创建 uni-app 类型项目。

获取「ZegoExpressEngine」uniapp SDK

在 uniapp 插件市场或 ZEGO 官网获取插件，并将插件引入工程

下载「js 封装层」代码，并引入工程

ZEGO 提供 uni-app js 封装层接口，统一 iOS、Android 两端原生 SDK 接口，免去了在原生与前端之间来回跳转，开发者只需要有 js 技术栈，即可开发各平台音视频应用，给中小企业快速低成本接入。

下载地址 ：http://storage.zego.im/express/video/uniapp/zego-express-video-uniapp.zip

将以上「js 封装层」引入到 uniapp 项目

基础推拉流功能实现

初始化引擎

import ZegoExpressEngine from 'zego-express-video-uniapp/lib/ZegoExpressEngine';import {  ZegoScenario  } from 'zego-express-video-uniapp/lib/impl/ZegoExpressDefines' ZegoExpressEngine.createEngine(AppID, AppSign, false, ZegoScenario.General);

登入房间

ZegoExpressEngine.instance().loginRoom(t"room1", { userID: "user_id", userName: "user_name" });

开启音视频通话

在成功登入房间后，可调用startPreview 开启音视频：

<template><zego-local-view></zego-local-view></template>······// 需要在登入房间之后才能开启音视频通话ZegoExpressEngine.instance().startPreview();

将本地视频画面推向云服务

// 推入的streamID由用户设置let publishStreamID = 'Publish-Stream-1';ZegoExpressEngine.instance().startPublishingStream(publishStreamID);

拉取其他用户音视频

登入房间后主动监听 roomStreamUpdate，在收到其他用户推出的音视频流，即可拉取：

<template><zego-remote-view :streamID="playStreamID" ></zego-remote-view></template>······// 监听 roomStreamUpdateZegoExpressEngine.instance().on('roomStreamUpdate', (roomID, updateType, streamList) => {this.playStreamID = streamList[0].streamID;});······// 拉取StreamID的音视频ZegoExpressEngine.instance().startPlayingStream(this.playStreamID);

退出房间

// 退出房间ZegoExpressEngine.instance().logoutRoom('room1');

销毁引擎

// 退出房间ZegoExpressEngine.destroyEngine();

注意事项

开启音视频通话需要在 uniapp 工程中的 manifest.json 申请麦克风和相机权限配置。

使用视频功能时，页面必须使用.nvue 文件构建，因为 uniapp 的.vue 页面在原生端（iOS、android）是用 webview 构建的，不能支持 component 类型的插件

详情可参考 https://nativesupport.dcloud.net.cn/NativePlugin/course/ios

结语

通过以上方式，就可以灵活使用 ZEGO Express SDK 了，进而让你的 uni-app 具备出色的基础音视频能力。

更多进阶功能请参考 ZEGO 官方文档和示例源码：https://doc-zh.zego.im/article/7775。