uniapp+nvue开发之仿微信语音+视频通话功能：实现一对一语音视频在线通话智密科技

相较于使用固定布局，固定样式，json配置布局的设计，插件采用了更加符合前端开发的自由布局模式，即提供单纯的原生组件+模块的方式，使得开发者具备自由灵活布局的空间。

importtrtcCallingfrom'../../tx-jssdk/trtc-calling-jssdk'txcalling.$on('onUserVideoAvailable',this.onUserVideoAvailable)txcalling.$on('onUserAudioAvailable',this.onUserVideoAvailable)//用户离开voiptxcalling.$on('onUserLeave',this.onUserLeave)//拒绝通话txcalling.$on('onReject',this.onReject)txcalling.$on('onCallingCancel',this.onReject)//通话结束txcalling.$on('onCallEnd',this.onCallEnd)txcalling.openCamera(true,this.$refs.localVideoView)

对于语音通话而言，无需引入原生组件即可实现，视频通话需要引入原生组件

//视频通话需要引入原生组件

//语音拨话0=语音通话txcalling.call('callid',0)//视频通话1=视频通话txcalling.call('callid',1)//群拨txcalling.groupCall(callids,callType)

而对于接收方的应答则使用极其简单的2个api即可实现

进入通话之后，开发者会接收到来自腾讯的回调事件，具体如下

txcalling.$on('onUserVideoAvailable',this.onUserVideoAvailable)txcalling.$on('onUserAudioAvailable',this.onUserVideoAvailable)//这里获取到userId之后，通过startRemoteView方式播放对方的画面functiononUserVideoAvailable(){this.isWaiting=falsethis.startCountDate()letEnterUserId=res.data.userIdif(this.voipType==='audio'){txcalling.setHandsFree(this.handsFree)return}if(res.type==='onUserVideoAvailable'&&!res.data.available){trtcCalling.stopRemoteView(EnterUserId,this.$refs[`remoteVideoView${EnterUserId}`][0])return}if(this.remotes.indexOf(EnterUserId)<0){this.remotes.push(EnterUserId)this.$nextTick(e=>{trtcCalling.startRemoteView(EnterUserId,this.$refs[`remoteVideoView${EnterUserId}`][0])})}else{trtcCalling.startRemoteView(EnterUserId,this.$refs[`remoteVideoView${EnterUserId}`][0])}}

对于这部分的代码使用到的原生插件，可以参考uniapp插件市场中的插件，在插件市场也有开源的代码工程哦。

通过插件市场对应的按钮可以直接导入开源代码，但是记得先安装HbuilderX哦