基于七牛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)、连麦的房间