乐趣区

关于javascript:uniappnvue开发之仿微信语音视频通话功能-实现一对一语音视频在线通话

jiezi

本篇文章是利用 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：腾讯云音视频通话 - 一对一多对多在线音视频通话 https://ext.dcloud.net.cn/plu…

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

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

退出移动版