当前位置: 首页 > Web前端 > vue.js

VUE在web端实现多人音视频通话

时间:2023-03-31 18:57:23 vue.js

1多人音视频功能介绍本文介绍如何使用ZEGOExpressSDK构建多人音视频通话场景,即实现多对多实时音视频聊天交互。用户可以与房间内的其他用户进行实时音视频通话,相互推流、拉流。该场景可用于多人实时音视频聊天、多人视频会议等。2Web端实现多人语音聊天的准备工作在应用多人音视频通话场景之前,请确保:项目中已集成ZEGOExpressSDK,实现基本的实时音视频功能。具体参见快速入门-集成和快速入门-实施流程。项目已在ZEGO控制台创建,并申请了有效的AppID。详情请参见控制台-项目管理中的“项目信息”。3Vue集成语音聊天示例源码下载,获取源码请参考下载示例源码。相关源码请参考ZEGOExpressSDK“src/Examples/Scenes/VideoForMultipleUsers”目录下的文件。4ZEGO音视频SDK使用步骤本节将介绍如何使用ZEGOExpressSDK实现多人视频通话。流程图如下:API调用时序图如下:ZEGOExpressSDK可以支持多人视频通话。上面的时序图以两个房间成员之间的实时视频通话为例。建议开发者参考上述流程设计自己的多人实时视频通话场景。4.1创建多人音视频聊天引擎实例创建ZegoExpressEngine引擎实例,将申请的AppID传入参数“appID”,将访问服务器地址传入参数“server”。“server”为接入服务器地址,获取方式如下:登录ZEGO控制台。单击相应项目下的查看。进入“项目配置”界面,在“项目信息”选项卡的“配置信息”中,点击“ServerSecret”后面的小眼睛按钮,获取对应的访问服务器地址。constzg=newZegoExpressEngine(appID,server);4.2多人语音聊天启用室内用户变更通知开发者需要在每个用户调用loginRoom接口登录房间时,将ZegoRoomConfig中的“userUpdate”设置为“true”。用于接收其他用户进出房间的回调通知(即roomUserUpdate.constisLogin=awaitzg.loginRoom(roomID,token,{userID},{userUpdate:true});4.3监听回调事件为了实现多人视频通话功能,需要监听增减房间内的用户和流进行相应的处理,开发者可以根据实际需要实现ZegoEvent中的一些方法(包括ZegoRTCEvent和ZegoRTMEvent),在创建引擎后通过调用on)接口设置回调。4.3.1监听房间内用户变化只有在调用loginRoom登录房间时才设置监听用户变化,即ZegoRoomConfig中的“userUpdate”设置为“true”时(默认值为“false”),可以监视roomUserUpdate回调。为了监控房间内的用户变化,需要注册roomUserUpdate回调,在登录房间内添加和删除用户时会触发该回调,开发者可以根据实际需要在回调中实现自己的业务逻辑.回调中的“updateType”参数表示用户改变房间的类型。该参数取值如下:userchangetype枚举值表示添加用户ADD房间内的用户被添加(即加入房间),“userList”为新添加的用户列表。用户减少DELETE房间内用户减少(即退出房间),“userList”为减少用户列表。当用户第一次登录房间时,如果房间内还有其他用户,新登录的用户会通过这个回调收到一个新类型的用户列表,即"updateType"为“添加”。存在的用户。zg.on('roomUserUpdate',(roomID,updateType,userList)=>{console.log('roomUserUpdateroomID',roomID,streamList);if(updateType==='ADD'){//更新视图}elseif(updateType=='DELETE'){//updateview}});4.3.2多人语音聊天监听房间内流的变化当一个流被删除时,如果开发者正在调用startPlayingStream接口拉流,请调用stopPlayingStream接口停止推流,否则SDK会报推流错误。为了监听房间内的流变化,需要注册roomStreamUpdate回调。已登录房间的新增、删除流都会触发该回调。开发者可以根据实际需要在回调中实现自己的业务逻辑。回调中的“updateType”参数表示房间流变化的类型。该参数取值如下:流变化类型的枚举值表示添加流ADD和添加房间内的流,“streamList”为新增流列表。流减少DELETE房间流减少,“streamList”是要减少的流列表。用户首次登录房间时,如果房间内的其他用户正在推流,则会收到新的推流列表,即updateType为ADD的回调。zg.on('roomStreamUpdate',(roomID,updateType,streamList)=>{console.log('roomStreamUpdateroomID',roomID,streamList);if(updateType==='ADD'){//更新视图}elseif(updateType=='DELETE'){//更新视图}});4.3推送、拉取、登录房间其他操作请参考快速入门-实现流程完成登录房间的操作、推、拉顺序。5API参考列表方法说明ZegoExpressEngine初始化EngineroomStreamUpdate房间流改变回调roomUserUpdate房间用户改变回调loginRoom登录房间createStream创建流startPublishingStream开始推流startPlayingStream开始拉流stopPublishingStream停止推流stopPlayingStream停止拉流logoutRoom退出房间5获取音视频SDKFor更多帮助,获取本文的Demo、开发文档和技术支持。访问机购文献中心。近期有开发计划的开发者可以到机购官网查看。恰逢机狗全线音视频产品7周年。10%折扣,联系商家获取RTC产品折扣;