相较于使用固定布局,固定样式,json配置布局的设计,插件采用了更加符合前端开发的自由布局模式,即提供单纯的原生组件+模块的方式,使得开发者具备自由灵活布局的空间。
对于语音通话而言,无需引入原生组件即可实现,视频通话需要引入原生组件
//视频通话需要引入原生组件
//语音拨话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哦