音频应用   音频插件联盟,正版插件,欢迎大家选择!

 找回密码
 快速注册

QQ登录

只需一步,快速开始

阅读: 11215|回复: 0

[资讯] uniapp如何实现音视频通话

[复制链接]

1155

积分

1

听众

39

音贝

音频应用新手发布

Rank: 3

积分
1155
发表于 2021-7-15 | |阅读模式

uniapp如何实现音视频通话

Uni-app是 DCloud 官方推出的一个使用 Vue.js 开发所有前端应用的框架。开发者通过编写Vue.js代码,uniapp将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。

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

ZEGO Express UniApp SDK主要包含的功能模块包括基础的实时音视频功能、常用视频配置、房间实时消息、推拉流信息监测、编解码与分层编码、媒体播放器、流量控制等,在众多功能中,实时音视频通话功能是如何实现的?下面给大家看看具体的实现流程。


一、准备工作

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

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

三、基础推拉流功能实现

(一)初始化引擎

1.import ZegoExpressEngine from

'zego-express-video-uniapp/lib/ZegoExpressEngine';

2.import {

3. ZegoScenario

4.}from'zego-express-video-uniapp/lib/impl/ZegoExpressDefines'

5.ZegoExpressEngine.createEngine(AppID,AppSign,false,ZegoScenario.General);

(二)登入房间

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

(三)开启音视频通话

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

1.

4.······

5.//需要在登入房间之后才能开启音视频通话

6.ZegoExpressEngine.instance().startPreview();

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

1.// 推入的streamID由用户设置

2.let publishStreamID = 'Publish-Stream-1';

ZegoExpressEngine.instance().startPublishingStream(publishStreamID);

(五)拉取其他用户音视频

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

1.

4.······

5.//监听 roomStreamUpdate

6.ZegoExpressEngine.instance().on('roomStreamUpdate',(roomID,updateType, streamList) => {

7. this.playStreamID = streamList[0].streamID;

8.});

9.······

10.// 拉取StreamID的音视频

11.ZegoExpressEngine.instance().startPlayingStream(this.playStreamID);

(六)退出房间

1.// 退出房间

2.ZegoExpressEngine.instance().logoutRoom('room1');

(七)销毁引擎

1.// 退出房间

2.ZegoExpressEngine.destroyEngine();

通过以上方式,就可以灵活使用ZEGO Express SDK了,进而使uni-app具备出色的基础音视频通话能力。更多进阶功能请参考ZEGO官方文档和示例源码。

注意事项:

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

2.使用视频功能时,页面必须使用.nvue文件构建,因为uniapp的.vue页面在原生端(iOS、android)是用 webview 构建的,不能支持component类型的插件。
欢迎厂家入驻,推文!免费!微信:yinpinyingyong
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

音频应用搜索

小黑屋|手机版|音频应用官网微博|音频招标|音频应用 (鄂ICP备16002437号)

Powered by Audio app

快速回复 返回顶部 返回列表