VUE接入腾讯实时音视频TRTC方法
VUE接入腾讯实时音视频TRTC方法
·
VUE接入腾讯实时音视频TRTC方法
由于公司很多项目中都涉及到了音视频实时通话,在刚开始项目工期比较紧就直接给腾讯的Demo下载下来,在项目中iframe引入使用了。最近领导说让给改成vue的,方便以后好维护。于是结合官网和demo代码终于完成了改造。下边梳理出来一些供大家参考。
官方文档:https://cloud.tencent.com/document/product/647/17249
1.首先集成TRTC,在项目中运行如下命令下载依赖,在所需组件中引入;
npm install trtc-js-sdk
//在所需组件中引入
import TRTC from 'trtc-js-sdk'
2.视频容器
//主视频窗口
<div id="local_stream" class="local-stream" style="width:100%;height:100%"> </div>
//小视频(这块考虑的是多人视频)
<div v-for="(item,i) in remoteStream" :key="i" class="video-box" >
<div :class="item?'distant-stream':''" v-html="item" ></div>
</div>
3.核心音视频链接方法
export default {
data() {
userId: '', //用户id --可更改
roomId: '', //房间号--加入相同房间才能聊
client: '', //客户端服务
remoteStream: [], //远方视频流
localStream: null, //本地流
sdkAppId: '', //sdkID
userSig: '', //签名
localStream:null,//本地视频流
},
mounted(){
//下方参数是链接的必要参数。需要根据自己情况的情况获取!!!。
this.sdkAppId = sessionStorage.getItem('sdkAppId')
this.userSig = sessionStorage.getItem('userSig')
this.userId = sessionStorage.getItem('userId')
this.roomId = this.$route.query.roomId * 1 //必须是number
this.createClient(this.userId)
},
methods: {
//创建链接
createClient(userId) {
const sdkAppId = this.sdkAppId
const userSig = this.userSig
this.client = TRTC.createClient({
mode: 'rtc',
sdkAppId,
userId,
userSig
})
//注册远程监听,要放在加入房间前--这里用了发布订阅模式
this.subscribeStream(this.client)
//初始化后才能加入房间
this.joinRoom(this.client, this.roomId)
// 公共监听方法----主要是推流方摄像头关闭,音频关闭开启等;下方有说!!
// this.publicMonitor(this.client)
},
//加入房间
joinRoom(client, roomId) {
client.join({ roomId })
.catch(error => {
console.error('进房失败 ' + error)
})
.then(() => {
console.log('进房成功')
//创建本地流
this.createStream(this.userId)
//播放远端流
this.playStream(this.client)
})
},
//创建本地音视频流
createStream(userId) {
const localStream = TRTC.createStream({ userId, audio: true, video: true })
this.localStream = localStream
localStream
.initialize()
.catch(error => {
console.error('初始化本地流失败 ' + error)
})
.then(() => {
console.log('初始化本地流成功')
localStream.play('local_stream')
//创建好后才能发布
this.publishStream(localStream, this.client)
})
},
//发布本地音视频流
publishStream(localStream, client) {
client
.publish(localStream)
.catch(error => {
console.error('本地流发布失败 ' + error)
})
.then(() => {
console.log('本地流发布成功')
})
},
//订阅远端流--加入房间之前
subscribeStream(client) {
client.on('stream-added', event => {
const remoteStream = event.stream
//订阅远端流
client.subscribe(remoteStream)
})
},
//播放远端流
playStream(client) {
client.on('stream-subscribed', event => {
const remoteStream = event.stream
console.log('远端流订阅成功:' + remoteStream.getId())
// 创建远端流标签,因为id是动态的,所以动态创建,用了v-html
const base = `<view id="${'remote_stream-' + remoteStream.getId()}" style="width:100%;height:100%"></view>`
this.remoteStream.push(base)
//做了dom操作 需要使用$nextTick(),否则找不到创建的标签无法进行播放
this.$nextTick(() => {
//播放
remoteStream.play('remote_stream-' + remoteStream.getId())
})
})
},
//退出音视频
leaveRoom() {
var client = this.client
client.leave().then(() => {
// 停止本地流,关闭本地流内部的音视频播放器
this.localStream.stop()
// 关闭本地流,释放摄像头和麦克风访问权限
this.localStream.close()
this.localStream = null
this.client = null
// 退房成功,可再次调用client.join重新进房开启新的通话。
})
.catch(error => {
console.error('退房失败 ' + error)
// 错误不可恢复,需要刷新页面。
})
}
}
}
4.公共监听方法(新增删减人员,开始关闭音频等)
//主要检测推流方公共方法内
publicMonitor(client) {
var that = this
// 新增人员
client.on('peer-join', evt => {
console.log(evt)
})
// 删减人员
client.on('peer-leave', evt => {
console.log(evt)
})
// 推流方关闭音频
client.on('mute-audio', evt => {
console.log(evt)
})
// 推流方开启音频
client.on('unmute-audio', evt => {
console.log(evt)
})
},
//关闭本地摄像头 this.localStream.muteVideo()
//开始本地摄像头 this.localStream.unmuteVideo()
//关闭本地麦克风 this.localStream.muteAudio()
//开启本地麦克风 this.localStream.unmuteAudio()
//监听声音大小 在本地视频里发布成功后调用。
setVolumeInterval(stream, userId) {
setInterval(() => {
const volume = stream.getAudioLevel()
console.log(volume)
// volume>0.01 算是正常说话;
//如需监听房间内所有人声音大小需要在增加人员后调用下;针对每个人设置一个setInterval
//在关闭麦克风和人员退出需要清除该人员的定时器。房间退出后结束全部定时器;
})
}
以上就是一些核心的方法。希望对大家有帮助 如有疑问请留言!
更多推荐
已为社区贡献1条内容
所有评论(0)