七牛实时音视频云视频连线demo（web部分）

官方文档
git
申请账号之类的我没有作考虑，因为这些都是后端同志给准备。此片文章注意记录一下我遇到的问题
1.按照依赖：

npm install --save pili-rtc-web

2. 代码：

<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.注意：苹果电脑的话，我遇到一个尴尬的问题，说我没有打开权限，那就需要在设置里面允许共享