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

一、 七牛实时音视频云介绍

1、产品架构

　　

　　客户端SDK：主要负责客户端的音视频采集、渲染、滤镜处理、编解码、传输等工作，客户可以快速集成到自己 App 中，让自己的应用具备音视频通话的能力。 支持 Android、iOS、Web ，集成 SDK 就可实现音视频的采集、编解码、渲染播放等工作。

　　服务端REST API和SDK：主要提供房间管理、状态回调等基本的业务功能，另外还提供鉴黄鉴暴、质量分析等配套功能 只需要集成对应语言的服务端 SDK 即可以管理实时音视频互动房间、调用配套数据处理服务、向客户端通知音视频流和数据处理的状态。

2、信令传输

　　实时通话交互流程如下：

　　

　　因此，服务端需要开发的主要工作如下：

　　1.为用户创建通话房间，并将通话房间和对应主播的Id关联起来；

　　2.计算加入房间的roomToken并提供给App，该roomToken是结合uerId、roomName等信息使用七牛的AccessKey和SecretKey按照一定的规则生成；

　　3.提供通话的业务逻辑，如：通话请求/应答业务逻辑、服务端房间管理和踢人等；

　　4.关于roomToken的计算方法及RTC Server API的说明可查阅《七牛实时音视频云服务端 API 接口规范》。

3、产品相关资料

　　RTN Demo体验：https://doc.qnsdk.com/rtn/docs/demo

　　七牛实时音视频云web SDK官方地址：https://doc.qnsdk.com/rtn/web

　　音视频云接入流程：https://doc.qnsdk.com/rtn/docs/rtn_startup

　　web SDK接入文档：https://doc.qnsdk.com/rtn/web/docs/sdk_overview.html

二、Vue前端项目中开发准备

1、引入SDK

　　这里通过npm引入SDK：

npm install --save pili-rtc-web

　　如果想更新到最新版本或指定版本，运行如下命令：

npm install --save pili-rtc-web@latest  # 最新版本
npm install --save pili-rtc-web@2.0.0   # 指定版本 

2、在单页面应用中引入

<template>
</template>

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

    export default {
        name: 'VideoConference',
    },
    mounted() {
        console.log("current version is", QNRTC.version);
    }
</script>

　　访问对应页面地址，看到打印的 current version 表示引入成功。

3、关于async/await

　　SDK 在对外 API 以及之后的示例中都会默认使用 async/await 的异步方案。

　　这里以最常用的异步操作 setTimeout 为例，分别介绍 Promise/Async/Await 这三种异步方案。

　　这里编写了 2 个函数，功能都是调用 setTimeout 然后 1s 后执行相关代码。前者是最常用的 Callback 模式，后者是一个 Promise：

const setTimeoutCallback = (callback) => {
  setTimeout(callback, 1000);
}

const setTimeoutPromise = () => new Promise(resolve => {
  setTimeout(resolve, 1000);
})

　　然后利用上面的函数分别用三种异步方案实现一个需求——每隔一秒钟打印一行字，重复 3 次。

（1）callback方案

setTimeoutCallback(() => {
  console.log("text!");
  setTimeoutCallback(() => {
    console.log("text!");
    setTimeoutCallback(() => {
      console.log("text!");
    });
  });
});

（2）promise方案

// promise
setTimeoutPromise()
  .then(() => {
    console.log("text!");
    return setTimeoutPromise();
  }).then(() => {
    console.log("text!");
    return setTimeoutPromise();
  }).then(() => {
    console.log("text!");
  });

（3）async/await方案

// async/await
(async () => {
  await setTimeoutPromise();
  console.log("text!");
  await setTimeoutPromise();
  console.log("text!");
  await setTimeoutPromise();
  console.log("text!");
})();

　　在这种场景下 async/await 的写法会更加简洁优雅。在七牛的 SDK 中，大部分都是这种串行异步的场景，也推荐使用 async/await 的写法。

4、Track模式和Stream模式对比

　　Web 端选择封装了两套模式的 API 供用户选择。一套为 Stream 模式，也就是用户和流一对一关系的模式。一套为 Track 模式，也就是用户和 Track 一对多关系的模式。

　　需要注意的是，这 2 个模式只有在 Web SDK 下 的 API 中有区别，在实际实现上，都是通过以 Track 为单位操作流实现的。只是在 Stream 模式下，只允许用户发布至多一个音频 Track 和至多一个视频 Track。

（1）什么情况使用Track模式

　　需求场景满足以下情况时，优先使用Track模式：

• 不清楚需求边界的情况
• 需要一个用户同时发布多路视频画面或多路音频画面
• 用户订阅时需要有动态订阅逻辑，即纯音频订阅、纯视频订阅等
• 虽同时刻只有一个视频画面，但有画面切换的需求

（2）什么情况使用Stream模式

　　需求场景满足以下情况时，优先使用Stream模式：

• 明确需求中一个用户最多只发布一路视频和一路音频
• 没有动态订阅需求，远端发布什么就订阅什么
• 老版本用户希望升级v2

三、房间管理

　　由于我需要实现多人在线会议场景，因此必须选用Track模式实现。

1、从后端获取token

　　SDK通过传入RoomToken来完成加入房间的。这个RoomToken是包含连麦所需要的主要信息：七牛的账户标识、连麦的应用 ID(appId)、连麦的房间号 (roomName)、连麦的用户名(userId)、有效期等。

<template>
</template>

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

  export default {
    name: 'VideoConference',
    data() {
      return {

      }
    },
    methods: {
      httpGetList: function () {
        var self = this;
        this.$httpGet(this.$http, "users/teachingprocController/getClassroomInfo", this.$trimJson(self.queryInfo), function (ret) {
          if (ret.currentTimetableInfo != undefined) {
            self.queryInfo = ret;
            self.queryInfo.currentStudentList = [];
            var timenow = Date.parse(new Date());
            if (timenow >= ret.currentTimetableInfo.endTime || ret.currentTimetableInfo.status == 3) {
              self.classroomType = 2;  //2 表示直播已结束
            } else if (timenow > ret.currentTimetableInfo.beginTime && timenow < ret.currentTimetableInfo.endTime) {
              self.classroomType = 0;  //0 表示正在直播
              self.token = ret.currentTimetableInfo.realParam;
              self.joinRoom(self.token);
            } else if (timenow < ret.currentTimetableInfo.beginTime) {
              self.classroomType = 1;  //1 表示尚未开始直播
              //为尚未开始直播时，开启倒计时定时器
              if (!!self.counterTimer) {
                clearInterval(self.counterTimer);
                self.counterTimer = setInterval(self.handleCounter, 1000);
              } else {
                self.counterTimer = setInterval(self.handleCounter, 1000);
              }
            }
          } else {
            self.classroomType = 3;  // 3 表示点播课堂
          }
        });
      },
    created() {
      let self = this;
      this.currentUser = this.$sessionUser.fetch();// 获取url中携带的值
      if (Object.keys(this.$route.query).length > 0) {
        if (this.$route.query.classroomno != undefined) {
          this.queryInfo.classroomno = this.$route.query.classroomno;
        }
        if (this.$route.query.timetableno != undefined) {
          this.queryInfo.timetableno = this.$route.query.timetableno;
        }
        // 获取token
        this.httpGetList();
      }
    },
  }
</script>

　　在用户跳转到该页面时，created在实例创建完成后被立即调用，根据url携带的值触发httpGetList函数，根据课程类型执行joinRoom方法。

2、实例化全局房间session对象

　　加入房间之前，需要实例化一个全局 Session 对象。之后所有和房间相关的操作都会通过调用这个对象的方法来实现。

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

const myRoom = new QNRTC.TrackModeSession();

3、加入房间

　　通过前面获取的token加入房间。

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

4、离开房间

　　离开房间后 SDK 会自动和房间断开连接并销毁所有订阅音视频对象，但不会清理采集到的音视频对象。

　　如果离开房间后想再次加入房间，重新调用加入房间的方法。

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

  export default {
    name: 'VideoConference',
    // 略
    beforeDestroy() {
      // 销毁释放本地track
      for (let localTrack of this.localTracks) {
        localTrack.release();
      }
      // 离开房间
      this.myRoom.leaveRoom();
    }
  }
</script>

　　监听窗口关闭事件，在每次页面即将被关闭或刷新时自动离开房间。

　　配合浏览器的 onbeforeunload 事件在每次页面即将被关闭或者刷新时自动离开房间。

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

  export default {
    name: 'VideoConference',
    methods: {
      beforeunloadHandler(){
        this._beforeUnload_time=new Date().getTime();
        // 销毁释放本地track
        for (let localTrack of this.localTracks) {
          localTrack.release();
        }
        // 离开房间
        this.myRoom.leaveRoom();
      }
    },
    mounted() {
      // 略
      // 监听窗口关闭事件
      window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    },
  }
</script>

5、踢人

　　以管理员身份签发的RoomToken加入，可以通过如下方法强制将其他用户踢出房间。

await myRoom.kickoutUser("USERID");   // 暂时没用到

四、页面模板设计

1、页面设计目标

　　

2、模板结构

<template>
  <div class="meeting">
    <div class="meeting-wraper">
      <div class="meeting-header">
        <h4>多人在线视频直播</h4>
      </div>
      <div class="meeting-content">
        <div class="main-meeting">
          <div id="maintracks" class="maintracks" v-show="!whitePadStatus"></div>
          </div>
          <div class="meeting-member">
            <!-- 其他人的头像 -->
            <div class="meeting-item" v-for="(remoteUser, index) in remoteUserList" :key="index"
                 v-show="remoteUser.isLive">
              <div :id="remoteUser.userId"></div>
              <div :id="remoteUser.userId + '_vol'" style="visibility:hidden;"></div>
              <div class="btn-box" v-if="currentUser.userType == 1">
                <button @click="setSpeaker(remoteUser.userId)">
                  <span v-if="remoteUser.screenStatus" key="1" class="iconfont iconjinzhitouping"></span>
                  <span v-else key="2" class="iconfont iconzhibo"></span>
                </button>
                <button @click="setAudio(remoteUser.userId)">
                  <!-- 有声音，显示静音图标 -->
                  <span v-if="!remoteUser.audioStatus" key="1" class="iconfont iconjingyin"></span>
                  <!-- 无声音，显示声音图标 -->
                  <span v-else key="2" class="iconfont iconyingliang"></span>
                </button>
                <button @click="setWhitePad(remoteUser.userId)">
                  <!-- 禁止使用画板绘画 -->
                  <span v-if="!remoteUser.drawStatus" key="1" class="iconfont iconsousuo"></span>
                  <!-- 默认不能使用画板绘画,授权可以使用画板绘画 -->
                  <span v-else key="2" class="iconfont iconzu1"></span>
                </button>
                <button @click="exitMeeting(remoteUser.userId)">
                  <span class="iconfont icontuichu"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="meeting-list">
          <!-- 自己的头像 -->
          <div class="self_wraper">
            <div id="localtracks" class="self_camera"></div>
            <div id="local_vol_tracks" style="visibility:hidden;"></div>
            <div class="btn-box">
              <button @click="setSpeaker('localtracks')" :disabled="localScreenDisable">
                <span v-if="localScreenStatus" key="1" class="iconfont iconjinzhitouping"></span>
                <span v-else class="iconfont iconzhibo"></span>
              </button>
              <button @click="setAudio('localtracks')" :disabled="localAudioDisable">
                <!-- 有声音，显示静音图标 -->
                <span v-if="!localAudioStatus" key="1" class="iconfont iconjingyin"></span>
                <!-- 无声音，显示声音图标 -->
                <span v-else key="2" class="iconfont iconyingliang"></span>
              </button>
              <button @click="setWhitePad('localtracks')">
                <span class="iconfont iconzu1"></span>
              </button>
              <button @click="exitMeeting('localtracks')"><span class="iconfont icontuichu"></span></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>