基于七牛RTN实现多人在线会议或课堂(二)

一、采集和发布本地的track

　　采集本地音视频轨这个操作涉及到 2 个模块 —— deviceManager 和 Track。

　　deviceManager：SDK的媒体设备管理模块，用于监听媒体设备变化及发起采集操作。

　　Track：采集方法的返回。Track模式下，所有可在页面上播放的媒体元素，都称为Track对象。

1、发起本地采集的方法

// 采集并发布本地的音视频轨
let screenLocalTracks = await QNRTC.deviceManager.getLocalTracks({
    screen: {enabled: true, tag: "screen"}   // 采集屏幕共享
});

// 采集并发布本地的音频轨
let audioLocalTracks = await QNRTC.deviceManager.getLocalTracks({
    audio: {enabled: true, tag: "audio"},    // 采集音频
});

// 采集并发布本地的视频轨
let videoLocalTracks = await QNRTC.deviceManager.getLocalTracks({
    video: {enabled: true, tag: "video"}     // 采集视频
});

　　getLocalTracks 可以重复调用，即时指定的配置项完全相同，每次调用返回的Track也是各自独立的。

2、播放本地音视频轨

　　通过如下操作，即可在页面指定元素内播放音频、视频。

// 获取页面上一个元素作为播放画面的父元素
let mainElement = document.getElementById("maintracks");
let localElement = document.getElementById("localtracks");


// 将 Track 列表发布到房间中
await this.myRoom.publish(screenLocalTracks);
// 遍历本地采集的屏幕对象
for (const screenTrack of screenLocalTracks) {
  this.localTracks.push(screenTrack);
  screenTrack.play(mainElement, true);
}
self.localScreenStatus = true;
console.log("发布后我的本地Track", key, this.localTracks);


// 将 Track 列表发布到房间中
await this.myRoom.publish(audioLocalTracks);
// 遍历本地采集的Track对象，不播放自己的音频
for (const audioTrack of audioLocalTracks) {
  this.localTracks.push(audioTrack);
}
self.localAudioStatus = true;
console.log("发布后我的本地Track", key, this.localTracks);


// 将 Track 列表发布到房间中
await this.myRoom.publish(videoLocalTracks);
// 遍历本地采集的Track对象并播放
for (const videoTrack of videoLocalTracks) {
  this.localTracks.push(videoTrack);
  videoTrack.play(localElement, true);
}
console.log("发布后我的本地Track", key, this.localTracks);

　　SDK 会自动在 domElement 下创建 <audio> 或者 <video> 元素来播放媒体（使用 audio 还是 video 取决于 Track 本身的 kind）。

3、浏览器自动播放策略及处理

　　在没有与用户任何交互的情况下调用play()方法会导致音频无法播放。

　　在实际应用场景中，经常需要实现加入房间之后进行自动的发布和订阅。其中自动订阅往往伴随着自动播放。

　　浏览器再没有交互操作之前不允许有声音的媒体自动播放，自动播放策略如下：

• 始终允许静音(muted)的视频自动播放
• 以下情况允许带声音的自动播放
  • 用户已经在访问的域名下有交互操作
  • 顶级页面可以把autoplay权限委托给iframe，从而允许自动播放声音

　　各个浏览器实现：

• Chrome：Autoplay Policy Changes
• Safari：Auto-Play Policy Changes for macOS
• FireFox：Allow or block media autoplay in Firefox

二、发布/取消本地的Track

　　可以看到前面在播放Track前都将这些Track发布到房间中供其他人订阅。

1、发布本地Track

// 采集并发布本地的音视频轨
let screenLocalTracks = await QNRTC.deviceManager.getLocalTracks({
    screen: {enabled: true, tag: "screen"}   // 采集屏幕共享
});
// 将 Track 列表发布到房间中
await this.myRoom.publish(screenLocalTracks);

　　当一个Track对象经过发布操作后，有2个值的变化需要注意：

• track.userId：将会标记为加入这个房间用户的 userId
• track.info.trackId：因为Track发布到房间，会被分配一个这个房间相对其他Track唯一的trackId
• trackId是房间内所有 Track 的唯一标识，需要指定 Track 的操作都会要求提供 trackId 参数

2、取消发布音视频轨

　　由于我需要让用户可以轮流投屏桌面、发布或取消发布自己的声音。因此不使用 Track 的 mute 状态，统一使用取消发布Track。

<script>
  import * as QNRTC from "pili-rtc-web";

  export default {
    name: 'VideoConference',
    methods: {
      // 取消发布
      async unpublish(key) {
        var self = this;
        var tag = '';
        if (key === 'speaker') {
          tag = "screen";
          self.localScreenStatus = false;
        } else if (key === 'voice') {
          self.localAudioStatus = false;
          tag = "audio";
        } else {
          tag = "video";
        }

        for (let i = self.localTracks.length - 1; i >= 0; i--) {
          if (self.localTracks[i].info.tag === tag) {
            // 取消发布
            await self.myRoom.unpublish([self.localTracks[i].info.trackId]);

            // 释放本地资源
            self.localTracks[i].release();
            self.localTracks.splice(i, 1);

            console.log("取消发布后我的本地Track", key, this.localTracks);
          }
        }
      },
    },
  }
</script>

　　遍历所有的本地track，查看info.tag信息。判断track类型：screen、voice、audio。

　　如果key='speaker'则停止发布screen媒体流。如果是video则停止发布video媒体流。如果是audio则停止发布audio媒体流。

3、销毁本地Track

　　由于在七牛的SDK里，退出情况房间或者取消发布并不会销毁本地Track，这些音视频轨也不会被释放。

　　如果音视频轨没有及时释放，它们会一直占用摄像头/麦克风等媒体设备。需要用release()方法逐个销毁释放。

　　前面取消音视频轨的代码中，就在取消的同时，销毁释放track：

for (let i = self.localTracks.length - 1; i >= 0; i--) {
  if (self.localTracks[i].info.tag === tag) {
    // 取消发布
    await self.myRoom.unpublish([self.localTracks[i].info.trackId]);

    // 释放本地资源
    self.localTracks[i].release();
    self.localTracks.splice(i, 1);

    console.log("取消发布后我的本地Track", key, this.localTracks);
  }
}

　　退出房间时也会用到release销毁音视频轨：

// 退出房间
exitMeeting(id) {
  var self = this;
  if (id === 'localtracks') {
    // 销毁释放本地音视频轨
    if (self.localTracks) {
      for (let localTrack of self.localTracks) {
        localTrack.release();
      }
    }
    // 离开房间
    self.myRoom.leaveRoom();
    // 跳转到首页
    window.location.href = '/';
  } else {
    console.log(id);
    // self.kickOut(id);
    self.myRoom.sendCustomMessage('quitRoom', [id]);
  }
},

三、订阅远端的音视频轨

　　这一部分官方文档非常简陋。但却是业务实现的核心。

　　在前面代码中，创建房间时，首先执行publish函数自动播放自己本地视频流。随后则是启动自动订阅(autoSubscribe)，随时订阅到其他加入房间的track。

// 创建房间
async joinRoom(token) {
  // 初始化一个房间Session对象，这里使用Track模式
  const myRoom = new QNRTC.TrackModeSession();
  this.myRoom = myRoom;
  // 使用 RoomToken加入房间
  await myRoom.joinRoomWithToken(token);
  // 自动加载视频
  this.publish();
  this.autoSubscribe(myRoom);
},

1、由TrackInfo列表获取用户列表

　　由myRoom.trackInfoList可以获取到当前房间中的 TrackInfo 列表。

// 获取订阅列表
autoSubscribe(myRoom) {
  let self = this;
  // 加入房间成功后，就可以通过访问myRTC.trackInfoList获取房间当前其他人的TrackInfo
  self.trackInfoList = myRoom.trackInfoList;
  console.log("房间当前音视频轨对象列表!", self.trackInfoList);

  self.userId = myRoom.userId;    // 自己的userId
  self.remoteUserList = [];
  for (var index in self.myRoom.users) {
    if (self.myRoom.users[index].userId !== self.userId) {
      self.remoteUserList.push({
        userId: self.myRoom.users[index].userId,
        isLive: true,
        screenStatus: false,
        audioStatus: false,
        drawStatus: false,
        user: self.myRoom.users[index]
      });
    }
  }
  for (let i = self.remoteUserList.length; i < 20; i++) {
    self.remoteUserList.push({
      userId: '',
      isLive: false,
      screenStatus: false,
      audioStatus: false,
      drawStatus: false,
      user: null
    });
  }
  console.log("房间当前用户", self.remoteUserList);

　　myRoom.users：获取的user列表在页面遍历时，会发现存在重复，并包含自己的user信息。因此需要重新构造一个列表。

　　但是用v-for在页面遍历时，会发现另一个问题：每次track发生变化，列表都会发生变化，随后均会导致v-for遍历生成的dom销毁重建。一般情况下不影响，但这里dom中包含视频和音频标签，会导致音频或视频丢失。因此用如上方式创建固定长度列表，仅替换元素值，不增减值。

2、订阅远端发布的音视频轨

　　如上所示autoSubscribe()方法中，获取到房间中 TrackInfo 列表和用户列表后。订阅房间已经有的所有track。

if (self.trackInfoList.length > 0) {
  // 取出每个 TrackInfo 的 trackId 当作参数发起订阅
  self.subscribe(self.trackInfoList)
    .then(() => console.log("订阅成功!"))
    .catch(e => console.error("订阅失败", e));
}

　　官方文档中发起订阅核心示例方法：

// 过滤 tag 为 screen_track 的 TrackInfo
const filterTrackInfoList = trackInfoList.filter(info => info.tag !== "screen_track");

// 取出每个 TrackInfo 的 trackId 当作参数发起订阅
const tracks = await myRoom.subscribe(filterTrackInfoList.map(info => info.trackId));

　　文档中返回的 tracks 就是 Track 对象列表，对应相应的 TrackInfo，可以访问 Track 的 info 来查看它的 TrackInfo。

　　订阅远端发布的track并用play方法在页面播放：

// 订阅远端发布的音视频轨
// trackInfoList 是一个 trackInfo 的列表，订阅支持多个 track 同时订阅
async subscribe(trackInfoList) {
  // 通过传入 trackId 调用订阅方法发起订阅，成功会返回相应的Track对象，也就是远端的 Track列表
  let remoteTracks = await this.myRoom.subscribe(trackInfoList.map(info => info.trackId));
  console.log('远端Track列表', remoteTracks);

  // 遍历返回远端的Track，调用play方法完成页面播放
  for (const remoteTrack of remoteTracks) {
    // 选择页面上的一个元素作为元素，播放远端的音视频轨
    let mainElement = document.getElementById("maintracks");
    let remoteElement = document.getElementById(remoteTrack.userId);
    let remoteVolElement = document.getElementById(remoteTrack.userId + '_vol');
    // 如果这是麦克风采集的音频Track，则不播放它
    if (remoteTrack.info.tag === "screen") {
      remoteTrack.play(mainElement, true);
    } else if (remoteTrack.info.tag === "video") {
      remoteTrack.play(remoteElement, true);
    } else if (remoteTrack.info.tag === "audio") {
      remoteTrack.play(remoteVolElement, false)
    }
  }
  console.log('调阅后的远端Track列表', remoteTracks);
},

3、取消订阅

　　当成功订阅获取 Track 之后，就可以选择这些 Track 来取消订阅了。

　　取消订阅操作完成后，SDK会自动释放相应的媒体对象。

// 取消订阅
async unsubscribe(trackInfoList) {
  var self = this;
  // 从刚刚订阅返回的 tracks 中找到视频轨
  let remoteTracks = await self.myRoom.unsubscribe(trackInfoList.map(info => info.trackId));
},

　　以清除已存在的scream媒体流，自己投屏为例：

if (key === 'speaker') {
  // 清除已存在的screen媒体流
  self.trackInfoList = self.myRoom.trackInfoList;
  for (let item of self.trackInfoList) {
    if (item.tag === "screen") {
      // 自己停止订阅
      self.unsubscribe([item]);
      // 通知对方停止投屏
      self.myRoom.sendCustomMessage('stopScreen', [item.userId]);
    }
  }

四、事件监听处理

　　TrackModeSession 是 Track 模式下的房间管理模块，所有和房间有关的操作都通过该模块实现。

　　官方API文档地址：https://doc.qnsdk.com/rtn/web/docs/api_track_mode_session

　　在加入房间时，已经初始化了一个房间TrackModeSession对象:

import * as QNRTC from "pili-rtc-web";

const myRoom = new TrackModeSession();

1、监听新track发布事件

　　前面在进入房间时订阅了所有已经存在的track，但是后面再进入房间的客户或者新产生的track，需要实时监听并订阅。

　　track-add：可以监听到房间内其他用户发布的Track。

　　　　　　　　事件参数：tracks——Array<TrackInfo> 新发布Track的TrackInfo。

// 添加事件监听。当房间出现新的 Track 时触发，参数是 trackInfo 列表
myRoom.on("track-add", trackInfoList => {
  // 房间里有新的track发布
  console.log("Track新增!", trackInfoList);

  self.subscribe(trackInfoList)
    .then(() => console.log("订阅成功!"))
    .catch(e => console.log("订阅失败!", e))
});

　　在监控到新Track，执行订阅前，可以触发更新房间user列表及执行其他操作，这里省略。

2、监听track取消发布事件

　　track-remove：监听到其他用户取消发布了Track。可以和前面的unpublish产生配合。

　　　　　　　　　事件参数：tracks——Array<TrackInfo>取消发布Track的TrackInfo。

<script>
  export default {
    name: 'VideoConference',

    methods: {
      // 获取订阅列表
      autoSubscribe(myRoom) {

        myRoom.on("track-remove", trackInfoList => {
          // 房间里有 Track 取消发布
          console.log("Track移除", trackInfoList, self.myRoom.users);

          self.unsubscribe(trackInfoList)
            .then(() => console.log("取消订阅成功!"))
            .catch(e => console.log("取消订阅失败!", e))
        });

　　在监控到Track取消发布时，执行取消订阅前，同样可以触发更新房间user列表。

3、消息发送和接收

　　虽然RTN的SDK中没有介绍，但是它的核心功能是利用webSocket实现。查看源码可以找到消息发送和接收的方法。

（1）发送消息

　　这里以发送是否允许投屏为例展示：

// 控制其他用户投屏权限
for (let remoteUser of self.remoteUserList) {
  if (remoteUser.userId === id) {
    if (!remoteUser.screenStatus) {
      // 开启禁止投屏
      self.myRoom.sendCustomMessage('enableScreen', [id]);
      remoteUser.screenStatus = true;
    } else {
      // 取消禁止投屏
      self.myRoom.sendCustomMessage('disableScreen', [id]);
      remoteUser.screenStatus = false;
    }
    return;
  }
}

（2）接收消息

　　这里以接收投屏消息为例：

myRoom.on("messages-received", trackInfoList => {
  console.log("send-message", trackInfoList);
  if (trackInfoList[0].data === 'enableScreen') {
    // 允许投屏
    self.localScreenDisable = false;
    self.setSpeaker("localtracks");
  } else if (trackInfoList[0].data === 'disableScreen') {
    // 禁止投屏
    self.localScreenDisable = true;
    self.setSpeaker("localtracks");
  }