七牛实时音视频云视频连线demo(web部分)
官方文档git申请账号之类的我没有作考虑,因为这些都是后端同志给准备。此片文章注意记录一下我遇到的问题按照官方文档很好操作的,我这个是从登录页面选择加入会议房间,携带参数跳转到此页面,不作任何操作,开始共享屏幕,也就是跳转之后的页面如下:分享成功完之后的页面画面:...
·
官方文档
git
申请账号之类的我没有作考虑,因为这些都是后端同志给准备。此片文章注意记录一下我遇到的问题
1.按照依赖:
npm install --save pili-rtc-web
- 代码:
<template>
<div>
<div id="localtracks">
<el-row v-show="isoperation" class="operation">
<el-button :type="ismit?'primary':'danger'" icon="el-icon-mic" circle @click="Microphone"></el-button>
<el-button @click="back">离开房间</el-button>
</el-row>
</div>
<div id="remotetracks" v-show="isremotetracks"></div>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import * as QNRTC from 'pili-rtc-web'
export default {
name: 'meeting',
data () {
return {
username: '', // 用户名
userphone: '', // 手机号
codetokenroom: '', // 加入房间token
isoperation: false, // 是否打开操作按钮
isremotetracks: false, // 是否展示别人的
myRoom: 0,
ismit: true, // 话筒切换样式
localTracks: [],
isScreenshar: true, // 屏幕共享切换样式
roomcode: ''
}
},
created () {
// isChromeExtensionAvailable().then(isAvailable => { //这个是谷歌版本低于72的要按照的插件
// if (!isAvailable) {
// console.log('插件异常!')
// this.$message({
// duration: 1000,
// type: 'error',
// message: '插件异常!'
// })
// } else {
// console.log('插件正常!')
// }
// })
const phonenum = window.localStorage.getItem('mobliephone')
this.userphone = phonenum
console.log(this.userphone)
if (this.userphone === '' || this.userphone === null) {
this.$router.push({
path: '/'
})
return
}
this.username = this.$route.query.username
this.roomcode = this.$route.query.roomcodenum
// console.log('current version is', QNRTC.version)
this.myRoom = new QNRTC.TrackModeSession()
this.getroomtoken()
},
methods: {
async getroomtoken () {
const datajson = {
name: this.username,
user_id: this.userphone,
room_code: this.roomcode,
province: '全国',
city: '全国',
area: '全国'
}
console.log(datajson)
await this.http
.post('videoMeeting/joinRoom', datajson)
.then(
res => {
// console.log(res.token)
if (res.code === 1) { // 调接口的目的在于拿到加入房间的token,然后用七牛云的方法
this.codetokenroom = res.token
this.$message({
duration: 1000,
type: 'success',
message: '加入成功!'
})
} else {
this.$message({
duration: 1000,
type: 'error',
message: '加入失败!'
})
}
},
// eslint-disable-next-line handle-callback-err
(err) => {
this.$message(err.message)
}
)
console.log(this.codetokenroom)
await this.myRoom.joinRoomWithToken(this.codetokenroom)
console.log('joinRoom success!')
await this.publish(this.myRoom)
this.autoSubscribe(this.myRoom)
this.myRoom.on('user-join', (res) => {
console.log('监听', res)
})
},
// 采集并发布本地的音视频轨
async publish (myRoom) {
console.log(myRoom)
// 我们打开了 3 个参数,即采集音频,采集视频,采集屏幕共享。
// 这个函数会返回一个列表,列表中每一项就是一个音视频轨对象
this.localTracks = await QNRTC.deviceManager.getLocalTracks({
audio: { enabled: true, tag: 'audio' },
// video: { enabled: true, tag: 'video' },
screen: { enabled: true, tag: 'screen' }
})
console.log('my local tracks', this.localTracks)
// 将刚刚的 Track 列表发布到房间中
await myRoom.publish(this.localTracks)
console.log('publish success!')
// 获取页面上的一个元素作为播放画面的父元素
const localElement = document.getElementById('localtracks')
// 遍历本地采集的 Track 对象
for (const localTrack of this.localTracks) {
// 如果这是麦克风采集的音频 Track,我们就不播放它。
if (localTrack.info.tag === 'audio') continue
if (localTrack.info.tag === 'video') continue
// 调用 Track 对象的 play 方法在这个元素下播放视频轨
this.isoperation = true
localTrack.play(localElement, true)
}
},
// 订阅远端发布的音视频轨
async subscribe (myRoom, trackInfoList) {
// 通过传入 trackId 调用订阅方法发起订阅,成功会返回相应的 Track 对象,也就是远端的 Track 列表了
const remoteTracks = await myRoom.subscribe(trackInfoList.map(info => info.trackId))
// console.log(remoteTracks)
// 选择页面上的一个元素作为父元素,播放远端的音视频轨
const remoteElement = document.getElementById('remotetracks')
// 遍历返回的远端 Track,调用 play 方法完成在页面上的播放
for (const remoteTrack of remoteTracks) {
remoteTrack.play(remoteElement)
}
},
autoSubscribe (myRoom) {
console.log('myRoom', myRoom)
const that = this
const trackInfoList = myRoom.trackInfoList
console.log('room current trackInfo list', trackInfoList)
// 调用我们刚刚编写的 subscribe 方法
// 注意这里我们没有使用 async/await,而是使用了 Promise,大家可以思考一下为什么
that.subscribe(myRoom, trackInfoList)
.then(() => console.log('subscribe success!'))
.catch(e => console.error('subscribe error', e))
// 就是这样,就像监听 DOM 事件一样通过 on 方法监听相应的事件并给出处理函数即可
// 添加事件监听,当房间中出现新的 Track 时就会触发,参数是 trackInfo 列表
myRoom.on('track-add', (trackInfoList) => {
console.log('get track-add event!', trackInfoList)
that.subscribe(myRoom, trackInfoList)
.then(() => console.log('subscribe success!'))
.catch(e => console.error('subscribe error', e))
})
},
Microphone () {
console.log('闭麦')
console.log(this.localTracks)
switch (this.ismit) {
case true:
for (const remoteTrack of this.localTracks) {
remoteTrack.setVolume(0)
}
break
case false:
for (const remoteTrack of this.localTracks) {
remoteTrack.setVolume(1)
}
break
}
this.ismit = !this.ismit
},
back () {
this.myRoom.leaveRoom()
// 遍历 tracks,逐个销毁释放
for (const track of this.localTracks) {
track.release()
}
this.$router.push({
path: '/'
})
}
},
beforeDestroy () {
this.myRoom.leaveRoom()
// 遍历 tracks,逐个销毁释放
for (const track of this.localTracks) {
track.release()
}
},
destroyed () {
this.myRoom.leaveRoom()
// 遍历 tracks,逐个销毁释放
for (const track of this.localTracks) {
track.release()
}
}
}
</script>
3.结果:
按照官方文档很好操作的,我这个是从登录页面选择加入会议房间,携带参数跳转到此页面,不作任何操作,开始共享屏幕,也就是跳转之后的页面如下:
分享成功完之后的页面画面:
4.注意:苹果电脑的话,我遇到一个尴尬的问题,说我没有打开权限,那就需要在设置里面允许共享
更多推荐
所有评论(0)