本篇文章是利用uni-app和nvue实现微信成果性能的第三篇了，明天咱们基于uniapp + nvue实现的uniapp仿微信音视频通话插件实例我的项目，实现了以下性能：

1: 语音通话

2: 视频通话

3: 寻呼状态回馈

软件成果：

技术实现
开发环境：HbuilderX + nodejs
技术框架：uniapp + vue2.x + node-sass
测试环境：App端(Android + IOS)
插件：Zhimi-TRTCCalling
代码：开源

成果概览
通过接入到IM中，联合IM的信令性能，能够轻松便捷的实现仿微信音视频通话，咱们只须要专一接入之后的界面逻辑即可。

自在布局的控件
相较于应用固定布局，固定款式，json配置布局的设计，插件采纳了更加合乎前端开发的自在布局模式，即提供单纯的原生组件 + 模块的形式，使得开发者具备自在灵便布局的空间。

<trtc_video_view class="call_video_self" ref="localVideoView"></trtc_video_view>
import trtcCalling from '../../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)

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

// 视频通话须要引入原生组件<trtc_video_view class="call_video_self" ref="localVideoView"></trtc_video_view>
// 语音拨话 0 = 语音通话txcalling.call('callid', 0)// 视频通话 1 = 视频通话txcalling.call('callid', 1)// 群拨txcalling.groupCall(callids, callType)

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

// 承受通话txcalling.accept()// 完结通话txcalling.reject()

进入通话播放画面


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

txcalling.$on('onUserVideoAvailable', this.onUserVideoAvailable)txcalling.$on('onUserAudioAvailable', this.onUserVideoAvailable)// 这里获取到userId之后，通过startRemoteView形式播放对方的画面function onUserVideoAvailable() {                this.isWaiting = false                this.startCountDate()                let EnterUserId = res.data.userId                if (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开发仿微信音视频通话分享到此为止咯

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

TRTC-Calling：腾讯云音视频通话-一对一多对多在线音视频通话 https://ext.dcloud.net.cn/plu...

通过插件市场对应的按钮能够间接导入开源代码，然而记得先装置HbuilderX哦

智密科技，业余开发各类Uniapp原生插件、目前交付给客户的插件曾经超过100个各类插件，正在陆续整顿上架并分享所有对于Uni-app的教程、资讯。