uniapp+nvue開發之仿微信語音+視頻通話功能 ：實現一對一語音視頻在線通話

 ​

本篇文章是利用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)
// 用戶離開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)

 

 

---

語音/視頻通話

對於語音通話而言，無需引入原生組件即可實現，視頻通話需要引入原生組件

// 視頻通話需要引入原生組件
<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：騰訊雲音視頻通話-一對一多對多在線音視頻通話-QQ群755910061-智密科技 - DCloud 插件市場

​

通過插件市場對應的按鈕可以直接導入開源代碼，但是記得先安裝HbuilderX哦

​

智密科技，專業開發各類Uniapp原生插件、目前交付給客戶的插件已經超過100個各類插件，正在陸續整理上架並分享一切關於Uni-app的教程、資訊。

插件使用交流QQ群：755910061