本篇文章是利用uni-app和nvue實現微信效果功能的第三篇了，今天我們基于uniapp + nvue實現的uniapp仿微信音視頻通話插件實例項目，實現了以下功能：
1: 語音通話
2: 視頻通話
3: 尋呼狀態回饋
軟件效果：
技術實現
開發環境：HbuilderX + nodejs
技術框架：uniapp + vue2.x + node-sass
測試環境：App端(Android + IOS)
插件：Zhimi-TRTCCalling
代碼：開源
效果概覽
通過接入到IM中，結合IM的信令功能，可以輕松便捷的實現仿微信音視頻通話，我們只需要專注接入之后的界面邏輯即可。愛掏網 - it200.com
自由布局的控件
相較于使用固定布局，固定樣式，json配置布局的設計，插件采用了更加符合前端開發的自由布局模式，即提供單純的原生組件 + 模塊的方式，使得開發者具備自由靈活布局的空間。愛掏網 - it200.com
import trtcCalling from '../../tx-jssdk/trtc-calling-jssdk'
txcalling.$on('onUserVideoAvailable', this.onUserVideoAvailable)
txcalling.$on('onUserAudioAvailable', this.onUserVideoAvailable)
// 用戶離開voip
txcalling.$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.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) {
trtcCalling.startRemoteView(EnterUserId, this.$refs[`remoteVideoView${EnterUserId}`][0])
})
} else {
trtcCalling.startRemoteView(EnterUserId, this.$refs[`remoteVideoView${EnterUserId}`][0])
}
}至此uniapp開發仿微信音視頻通話分享到此為止咯
對于這部分的代碼使用到的原生插件，可以參考uniapp插件市場中的插件，在插件市場也有開源的代碼工程哦。愛掏網 - it200.com
TRTC-Calling：騰訊云音視頻通話-一對一多對多在線音視頻通話 https://ext.dcloud.net.cn/plu...
通過插件市場對應的按鈕可以直接導入開源代碼，但是記得先安裝HbuilderX哦
智密科技，專業開發各類Uniapp原生插件、目前交付給客戶的插件已經超過100個各類插件，正在陸續整理上架并分享一切關于Uni-app的教程、資訊。愛掏網 - it200.com