VUE+WebRTC实现音视频直播

1功能介绍本文将介绍如何快速使用Vue实现一个简单的实时音视频通话。相关概念解释：ZEGOExpressSDK：ZEGO提供的实时音视频SDK，可为开发者提供接入便捷、高清流畅、多平台互通、低延迟、高并发的音视频服务。推流：将采集阶段打包的音视频数据流传输到ZEGO实时音视频云端的过程。拉流：从ZEGO实时音视频云中拉取已有的音视频数据流的过程。2前提条件在实现基本的实时音视频功能之前，请确保：项目中已经集成了ZEGOExpressSDK，详见快速入门-集成。项目已在ZEGO控制台创建，并申请了有效的AppID和AppSign。详情请参考控制台-项目管理。3示例源码下载请参考下载示例源码获取源码。相关源码请查看“/express-demo-web/src/Examples/Framework/Vue”目录下的文件。4使用步骤当前项目使用的Node版本为14.17.3，Vue版本为2.4.2。以用户A拉取用户B的流为例，流程如下：整个推拉流过程的API调用顺序如下：4.1创建引擎1.创建接口在创建引擎之前，建议开发者添加如下界面元素，方便实现基本的实时音视频功能。本地预览窗口和远程视频窗口的结束按钮2.创建引擎创建一个ZegoExpressEngine引擎实例，将申请的AppID传入参数“appID”，将访问服务器地址传入参数“server”。“server”为接入服务器地址，获取方式如下：登录ZEGO控制台。单击相应项目下的查看。进入“项目配置”界面，在“项目信息”选项卡的“配置信息”中，点击“ServerSecret”后面的小眼睛按钮，获取对应的访问服务器地址。在“/express-demo-web/src/Examples/Framework/Vue/index.html”文件中引入vue.js。//导入vue.js初始化实例。newVue({el:'#page-wrapper',data:{zg:null},methods:{createZegoExpressEngine(){this.zg=newZegoExpressEngine(appID,server);}}})3.如果需要注册回调，则监听事件回调。开发者可以根据实际需要实现ZegoEvent中的一些方法（包括ZegoRTCEvent和ZegoRTMEvent）。创建引擎后，他们可以通过调用on接口来设置回调。this.zg.on('roomStateChanged',(roomID,reason,errorCode,extendData)=>{if(reason==ZegoRoomStateChangedReason.Logining){//登录}elseif(reason==ZegoRoomStateChangedReason.Logined){//登录成功//只有当房间状态为登录成功或重连时，推流（startPublishingStream）和拉流（startPlayingStream）才能正常接收音视频//将自己的音视频流推送到ZEGO音视频云}elseif(reason==ZegoRoomStateChangedReason.LoginFailed){//登录失败}elseif(reason==ZegoRoomStateChangedReason.Reconnecting){//重新连接}elseif(reason==ZegoRoomStateChangedReason.Reconnected){//重新连接成功}elseif(reason==ZegoRoomStateChangedReason.ReconnectFailed){//重连失败}elseif(reason==ZegoRoomStateChangedReason.Kickout){//被踢出房间}elseif(reason==ZegoRoomStateChangedReason.Logout){//注销成功}elseif(reason==ZegoRoomStateChangedRe一个儿子。注销Failed){//注销失败}});4.2检查兼容性在实现推拉流功能之前，开发者可以调用checkSystemRequirements接口检查浏览器的兼容性。SDK支持的浏览器兼容版本请参考下载示例源码“1准备环境”。constresult=awaitthis.zg.checkSystemRequirements();//返回结果为兼容性检查结果。当webRTC为true时表示支持webRTC，其他属性的含义可以参考接口API文档console.log(result);//{//webRTC:true,//customCapture:true,//camera:true,//microphone:true,//videoCodec:{H264:true,H265:false,VP8:true,VP9:true},//screenSharing:true,//errInfo:{}//}为的意思返回结果的各个参数，请参考ZegoCapabilityDetection接口参数说明。4.3登录房间1.生成token登录房间需要token进行身份验证。获取方式请参考使用Token认证。为了快速调试，您可以使用控制台生成一个临时令牌。2、登录房间调用loginRoom接口，传入房间ID参数“roomID”、“token”和用户参数“user”，并根据实际情况传入参数“config”，进行登录到房间。登录房间前，请先注册所有登录房间后需要监听的回调。登录房间成功后，即可收到相关回调。“roomID”、“userID”、“userName”参数的值都是自定义的。“roomID”和“userID”都必须是唯一的。建议开发者将“userID”设置为有意义的值，可以关联到业务账号系统。//登录房间，成功返回true//userUpdate设置为true会开启监听roomUserUpdate回调，默认不会开启constresult=awaitthis.zg.loginRoom(roomID,token,{userID,userName},{用户更新:真});3、监听登录房间后的事件回调根据实际应用需要，监听登录房间前需要关注的事件通知，如房间状态更新、用户状态更新、流状态更新等。roomStateChanged：房间状态更新回调。登录房间后，当房间连接状态发生变化时（如房间断开、登录鉴权失败等），SDK会通过该回调进行通知。roomUserUpdate：用户状态更新回调。登录房间后，房间内新增或删除用户时，SDK会通过该回调通知。只有在调用loginRoom接口登录房间时传入ZegoRoomConfig配置，且“userUpdate”参数值为“true”时，用户才能收到roomUserUpdate回调。roomStreamUpdate：流状态更新回调。登录房间后，房间内用户推送或删除音视频流时，SDK会通过该回调通知。只有在调用loginRoom接口登录房间时传入ZegoRoomConfig配置，且“userUpdate”参数值为“true”时，用户才能收到roomUserUpdate回调。通常情况下，如果用户想播放另一个用户推送的视频，可以在接收流状态更新（新增）的回调中调用startPlayingStream接口拉取远端推送的音视频流。//房间状态更新回调this.zg.on('roomStateChanged',(roomID,reason,errorCode,extendData)=>{if(reason==ZegoRoomStateChangedReason.Logining){//登录}elseif(reason==ZegoRoomStateChangedReason.Logined){//登录成功//只有当房间状态为登录成功或重连时，推流（startPublishingStream）和拉流（startPlayingStream）才能正常接收音视频//将自己的音视频流推送到ZEGO音视频云}elseif(reason==ZegoRoomStateChangedReason.LoginFailed){//登录失败}elseif(reason==ZegoRoomStateChangedReason.Reconnecting){//重连}elseif(reason==ZegoRoomStateChangedReason.Reconnected){//重连成功}elseif(reason==ZegoRoomStateChangedReason.ReconnectFailed){//重新连接失败}elseif(reason==ZegoRoomStateChangedReason.Kickout){//被踢出房间}elseif(reason==ZegoRoomStateChangedReason.Logout){//退出成功}else如果（原因==ZegoRoomStateChangedReason.LogoutFailed){//注销失败}});//用户状态更新回调this.zg.on('roomUserUpdate',(roomID,updateType,userList)=>{console.warn(`roomUserUpdate:room${roomID},user${updateType==='ADD'?'added':'left'}`,JSON.stringify(userList),);});//流状态更新回调this.zg.on('roomStreamUpdate',async(roomID,updateType,streamList,extendedData)=>{if(updateType=='ADD'){//添加流，开始拉流}elseif(updateType=='DELETE'){//删除流，停止pullingstream}});4.4Pushstream1.创建流a。在开始推流之前，需要先创建本地音视频流，调用createStream接口，默认采集摄像头画面和麦克风声音。调用createStream接口后，需要等待ZEGOserver返回流媒体对象后才能进行后续操作。为HTML中的媒体流组件创建容器

创建流后播放媒体流。//调用createStream接口后，需要等待ZEGO服务器返回流媒体对象，才能进行后续操作constlocalStream=awaitthis.zg.createStream();//创建媒体流播放组件constlocalView=this.zg.createLocalStreamView(localStream);//"local-video"是容器DOM元素ID。localView.play("本地视频",{enableAutoplayDialog:true});b.设置音视频采集参数您可以根据需要在createStream接口中通过以下属性设置音视频相关的采集参数。详见自定义视频采集：camera:摄像头和麦克风采集流的相关配置screen:采集采集流的相关配置custom:第三方采集流的相关配置2.开始推流，调用startPublishingStream接口，传入流ID参数“streamID”和创建流得到的流对象“localStream”，将本地音视频流发送给远端用户。“streamID”参数的值是用户自定义的，需要在整个AppID内是全局唯一的。如果需要推送多个流，可以多次调用startPublishingStream接口，需要保证每个流的“streamID”不同。//localStream为创建流获取的MediaStream对象this.zg.startPublishingStream(streamID,localStream)3.监听推流后的事件回调根据实际应用需要，监听你要支付的事件通知推流后的关注，比如流更新状态，推流质量等。publisherStateUpdate：推流状态更新的回调。推流接口调用成功后，当推流状态发生变化时（如网络中断导致推流异常），SDK会在重试推流的同时通过该回调通知您。publishQualityUpdate：推送质量回调。调用推流接口成功后，会周期性回调音视频流质量数据（如分辨率、帧率、码率等）。this.zg.on('publisherStateUpdate',result=>{//推流状态更新回调//...})this.zg.on('publishQualityUpdate',(streamID,stats)=>{//推流质量回调//...})4.5推流1.开始推流调用startPlayingStream接口，根据传入的流ID参数"streamID"从远端拉取已经推送到ZEGO服务器的音视频图像.远程用户推送的“streamID”可以从roomStreamUpdate回调中获取。为HTML中的媒体流组件创建容器会被拉到远端流并在界面上播放。constremoteStream=awaitthis.zg.startPlayingStream(streamID);//创建媒体流播放组件constremoteView=this.zg.createRemoteStreamView(remoteStream);remoteView.play("remote-video",{enableAutoplayDialog:true});“streamID”需要在整个AppID中是全局唯一的。2、监听推流后的事件回调根据实际应用需要，监听推流后你要关注的事件通知，比如推流状态变化，推流质量等。playerStateUpdate：推流状态更新的回调。推流接口调用成功后，当推流状态发生变化时（如网络中断导致推流异常），SDK会在重试推流的同时通过该回调通知您。playQualityUpdate：拉流质量回调。调用推流接口成功后，会周期性回调音视频流质量数据（如分辨率、帧率、码率等）。this.zg.on('playerStateUpdate',result=>{//拉流状态更新回调//...})this.zg.on('playQualityUpdate',(streamID,stats)=>{//拉流质量回调})4.6体验实时音视频功能。在真实设备上运行项目。运行成功后，可以看到本地视频画面。为了方便体验，ZEGO提供了web端调试示例。在该页面输入相同的AppID和RoomID，输入不同的UserID即可加入同一个房间并与真实设备进行通信。音视频通话成功后，远端可以听到语音，远端可以看到视频。4.7停止推拉流1.停止推流，调用stopPublishingStream接口停止向远端用户发送本地音视频流。this.zg.stopPublishingStream(streamID)2。销毁流调用destroyStream接口销毁创建的流数据。销毁流后，需要开发者自行销毁视频（停止采集）。//localStream是调用createStream接口得到的MediaStream对象this.zg.destroyStream(localStream)3.停止拉流调用stopPlayingStream接口停止拉取对端推送的音视频流。this.zg.stopPlayingStream(streamID)4.8退出房间调用logoutRoom接口退出房间。this.zg.logoutRoom(roomID)获得更多支持获得本文的Demo、开发文档和技术支持。近期有开发计划的开发者可以到机狗官网查看，适逢机狗七周年。视频产品10%优惠，联系商家获取RTC产品优惠；