ZEGO Express UniApp SDK,5步实现音视频通话/直播功能

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

uni-app拥有800万开发者、数百万应用,在此之前,即构推出 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 真机(或支持音视频的模拟器)

二、快速接入

1、申请 ZEGO AppID

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

2、创建 uni-app 项目

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

3、获取「ZegoExpressEngine」uniapp SDK

在uniapp插件市场或 ZEGO 官网开发者中心获取插件,并将插件引入工程

4、下载「js封装层」代码,并引入工程

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

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

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

三、基础推拉流功能实现

1、初始化引擎

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);

2、登录房间

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

3、开启音视频通话
在成功登入房间后,可调用startPreview 开启音视频:

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

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

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

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

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

6、退出房间

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

7、销毁引擎

// 销毁引擎
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),或者直接扫描以下二维码联系我们,获取技术支持。