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

关于TRTC(实时音视频通话模式)在我公司的实践

时间:2023-04-01 12:28:13 vue.js

什么是TRTC?真人音视频通话和低延迟互动直播两大场景化解决方案通过腾讯云服务向开发者开放,致力于帮助开发者快速构建低成本、低延迟、高质量的音视频交互式解决方案。TRTC流程图加入房间创建流this.client=TRTC.createClient({mode:'videoCall',sdkAppId,userId,userSig});mode:实时音视频通话模式,设置为'videoCall',互动直播模式,设置为'live'sdkAppId:您在腾讯云申请的sdkAppIduserId:用户ID,随机生成,不允许重复userId房间内userSig:用户签名??,基于后台算法生成,this.client.join({roomId})加入防盗刷。catch(error=>{console.error('进入房间失败'+error);}).then(()=>{console.log('进入房间成功');});roomId:后台生成的房间ID,本地流不能重复发布本地流this.localStream=TRTC.createStream({userId:this.userId,audio:true,video:true});userId:用户ID,随机生成,重复userIdaudioisnotallowedinaroom:是否从麦克风采集音频video:是否从摄像头采集视频初始化本地音视频流this.localStream.initialize().catch(err=>{console.error('初始化本地流失败'+error);}).then((res)=>{console.log('初始化本地流成功');this.localStream.play('localVideo');});localVideo:发布绑定的dividthis.client.publish(this.localStream).catch(err=>{console.error('发布本地流失败'+error);}).then((res)=>{console.log('本地流发布成功');});本地流发布成功后,可以注册本地流功能,每三秒执行一次,处理异常情况订阅远程流Addthis.client.on('stream-added',event=>{this.remoteStream=event.stream;//订阅远程流this.client.subscribe(this.remoteStream);});远程流订阅this.client.on('stream-subscribed',event=>{console.log('log','onRemoteStreamUpdate:'+event);this.remoteStream=event.stream;this.id=this.remoteStream.getId();constremoteVideoDom=document.querySelector('#remoteVideo');if(!document.querySelector(`#remoteStream-${this.id}`)){constdiv=document.createElement('div');div.setAttribute('style','position:absolute;right:0;left:0;top:0;width:100%;height:100%');div.setAttribute('id',`remoteStream-${this.id}`);remoteVideoDom.appendChild(div);}constvideoLoading=document.querySelector('#video-loading');videoLoading.setAttribute('style','display:none;');//播放远程流this.remoteStream.play(`remoteStream-${this.id}`);});远程流监听成功后,可以注册远程流状态变化函数来处理异常情况。exitunpublishlocalstreamthis.client.unpublish(this.localStream).catch((err)=>{console.log('error','unpublisherror:'+err);}).then((res)=>{//成功取消发布本地流console.log('log','unpublisherror:'+res);});退出房间this.client.leave();异常处理本地流监听//每3秒获取本地流状态this.localTimer=setInterval(()=>{this.client.getLocalVideoStats().then(stats=>{for(letuserIdinstats){console.log(newDate(),'getLocalVideoStats','userId:'+userId+'bytesSent:'+stats[userId].bytesSent+'localuserId'+this.userId);if(this.userId==userId&&stats[userId].bytesSent==0){this.onEvent('leave');}constbytesSentSR=(stats[userId].bytesSent-this.bytesSent)/3000;if(this.userId==userId&&bytesSentSR>=20&&bytesSentSR<=59){}if(this.userId==userId){这个.bytesSent=stats[userId].bytesSent;}}});},3000);本地流发布成功后,注册本地推流变化函数,处理异常情况。bytesSent:如果发送单位为0,表示本地断网网络公式:本次发送的字节数-上次发送的字节数/3000个远程流监听this.remoteTimer=setInterval(()=>{this.client.getRemoteVideoStats().then(stats=>{for(letuserIdinstats){console.log('getRemoteVideoStats','userId:'+userId+'bytesReceived:'+stats[userId].bytesReceived+'packetsReceived:'+stats[userId].packetsReceived+'packetsLost:'+stats[userId].packetsLost);//constbytesReceived=(stats[userId].bytesReceived-this.bytesReceived)/3000;//lettitle='';//if(this.agentId==userId&&bytesReceived>=120){//title='当前通话,对方网络良好';//}//if(this.agentId==userId&&bytesReceived>=60&&bytesReceived<=119){//title='当前通话,对方网络正常';//}//if(this.agentId==userId&&bytesReceived>=20&&bytesReceived<=59){//title='本次通话,对方网络不好';//}//if(this.agentId==userId){//Taro.showToast({//title,//icon:'none',//duration:1000//});//this.bytesReceived=stats[userId].bytesReceived;//}}});},3000);bytesReceived:如果acceptanceunit为0,则表示对方断网成功后,可以注册远程流状态变化函数,处理异常情况.一次接收的字节数/3000目前通过TRTC事件通知,配合Socket,可以更好的支持异常处理TRTC兼容Android(H5)摄像头不匹配,比如华为手机后置三摄像头还有一个前置摄像头设置,调用TRTC获取摄像头接口,但是返回了6个,并且没有Label来标示哪个是后置哪个是前置。这是制造商问题,需要特殊适配。必须使用微信浏览器打开H5页面,其他浏览器偶尔会出现崩溃等问题(猜测是微信浏览器适配了)。华为P30部分机型微信浏览器环境默认不开启腾讯X5内核,需要特殊处理。开启方案:1、可以在手机设置、应用管理、微信、麦克风和摄像头权限中重新开启。2、扫描X5内核打开二维码,开始开机。否则发布流会失败,因为X5内核是关闭的,导致没有权限获取。TRTC对大多数模型都有很好的支持。iOS(H5)必须使用Safari浏览器,其他浏览器会出现各种问题。用户需要手动触发播放。这时需要给video组件添加autoplay、muted、playsinline、controls(SDK,version4.0.label标签区分,获取前后摄像头的deviceId,切换过程如下:1.获取摄像头TRTC.getCameras().then(devices=>{this.cameras=devices;});2.选择摄像头```this.localStream.switchDevice('video',deviceId).catch(err=>{console.log('error','switchDeviceerror:'+err);}).then((res)=>{console.log('log','switchDevicesuccess'+res);});```小程序React技术栈(我只用Taro)可以支持视频播放,但是推荐更好的Vue技术栈,因为Vue有官方封装的组件。手机兼容性比较好,支持微信环境.云流混合请求({url:`http://fcgi.video.qcloud.com/common_access?appid=${liveSign.appId}&interface=Mix_StreamV2&t=${liveSign.t}&sign=${liveSign.liveSign}`,方法:'POST',标头:{'content-type':'application/json',},正文:JSON.stringify(params)},(错误,响应,正文)=>{res.send({errCode:0});});通过http://fcgi.video.qcloud.com/common_access接口,我们可以完美监控房间里发生的事情,录制的视频会上传到腾讯的云点播平台.支持客户自行出口。博客欢迎关注我的博客

最新推荐
猜你喜欢