从零到一，使用实时音视频 SDK 一块儿开发一款 Zoom 吧

zoom(zoom.us) 是一款受到普遍使用的在线会议软件。相信各位必定在办公、会议、聊天等各类场景下体验或者使用过，做为一款成熟的商业软件，zoom 提供了稳定的实时音视频通话质量，以及白板、聊天、屏幕共享、PPT放映等经常使用功能。可是在当今浏览器成为端上主流的时代，实时音视频又怎甘于落后呢？相比于须要安装包的 Zoom，直接在网页上开发一款相似的会议软件确定会受到更多的关注。当须要开会的时候，直接经过一个连接，你们就能够接入并开始会议了。如今，使用七牛实时音视频的 Web SDK，咱们能够将您的想法轻松变为现实。

首先，让咱们梳理一下一款Web的在线会议产品须要哪些关键点须要攻破

• 浏览器兼容性要好，须要支持大部分主流桌面浏览器。

七牛实时音视频基于 Google 在 Chrome 上推行的 WebRTC 协议，目前该协议已经正式写入 Web 标准之中，全部的现代浏览器对其都有很好的兼容性。

• 通话质量要好，延迟低，清晰度高

不一样于传统 WebRTC 采用用户和用户 P2P 的形式进行通讯，咱们使用了在全球范围内部署的节点做为低延迟的实时互动网络来和各个端上进行 P2P 通讯，在保证延迟的同时也保证了通话的质量。

• 会议功能要丰富，ppt演示、白板、屏幕共享等等我都要

咱们的 SDK 提供了丰富的功能列表，知足绝大多数会议场景的需求，理论上使用 SDK 能够彻底复刻一个 Web 版本的 zoom。

• 说了这么多，接入难不难？有没有示例和文档？

固然！目前就能够去体验咱们 Web 的 Demo（在桌面浏览器下打开）。demo-rtc.qnsdk.com。Demo 的源码也开源在 Github 上供各位参考 github.com/pili-engine…

这个 Demo 实现了绝大多数 SDK 直接提供的功能，集成白板/PPT共享/聊天等场景的 Demo 目前还在准备上线中，敬请期待哦。关于接入的具体过程咱们下面将会简单地介绍一遍，详细的说明和参考能够移步咱们的文档站 developer.qiniu.com/rtn/sdk/441…

开发流程

一个简单的会议产品，通常是经过以下流程：

• 用户注册/登录 （开发者本身集成，SDK 只须要用于区分用户的 userID）
• 建立一个会议房间/加入一个会议房间
• 采集本身的摄像头/麦克风数据
• 将采集到的媒体数据发布到房间中
• 订阅房间里其余人的媒体数据并实时播放
• 处理用户加入/离开，发布/取消发布

这里简化到 SDK 的各个功能，其实就是 加入房间-采集本地媒体流-发布媒体流-订阅媒体流-事件处理，SDK 对每一个步骤都作了简单的封装，使用几行代码便可搞定。

引入 SDK

推荐使用 npm 引入咱们的 SDK，直接 npm i pili-rtc-web 便可，或者能够选择直接引入打包好的 js 文件 github.com/pili-engine…

异步处理

实时音视频是一个强异步的场景，各类各样的操做由于涉及到网络都是异步相关的，为了让开发者可以更好地控制代码编写过程当中的异步逻辑。SDK 没有使用繁琐的 callback 模式，而是使用了现代 Javascript 的 async/await 或者是 Promise 特性来编写异步代码，尽可能避免了开发过程当中回调地狱的状况（如下全部 await 代码都假定在一个 async 函数包裹之下）。

加入房间

准备完毕后，第一步，加入房间。说是加入房间，抽象后的说法实际上是“什么用户以什么身份加入什么房间”。这里有 3 个未知量：用户标识、身份标识（权限）、房间标识。其实整个加入房间的过程须要的未知量还有不少，好比房间隶属于哪一个 APP（应用，不一样应用中房间独立），APP 隶属于哪一个七牛帐户等等。在这里咱们将这些值统一进行编码签名，变成一个 roomToken 提供给前端，端上就只须要经过这个 token 便可加入房间。（token 的生成能够在七牛控制台完成，也可使用服务端 SDK 根据须要动态生成）

const myRTC = new QNRTC.QNRTCSession(); // 初始化
await myRTC.joinRoomWithToken(ROOM_TOKEN); // 加入房间
复制代码

采集本地媒体流

通常采集都会同时采集音频和视频，即麦克风和摄像头，可是根据需求 SDK 也支持纯音频采集或者纯视频采集的模式。调用方法也很简单，更改一下 options 便可。

const DOM_ELEMENT = ... // 页面上准备用来播放流的 dom 元素
// 采集本地流
const localStream = await QNRTC.deviceManager.getLocalStream({
    video: { enabled: true },
    audio: { enabled: true },
});
// 播放采集到的流
localStream.play(DOM_ELEMENT)
复制代码

发布媒体流

直接将刚刚拿到的流对象做为参赛，调用 publish 方法便可

await myRTC.publish(localStream);
复制代码

订阅媒体流

当加入房间成功后，随时能够经过访问 users 成员来获取当前房间内用户状态，若是房间内存在用户正在发布且不是本身，那么咱们就能够发起订阅了

const users = myRTC.users;
users.forEach(async (user) => {
    if (user.published && user.userId !== myRTC.userId) {
        // 订阅房间其余用户返回的流数据
        const remoteStream = await myRTC.subscribe(user.userId);
        // 一样，直接调用 play 就能够播放流了
        remoteStream.play(DOM_ELEMENT);
    } 
});
复制代码

事件处理

SDK 暴露了丰富的事件列表来知足绝大多数场景的需求，事件的处理也很简单，以“有其余用户发布”这个事件为例

// 监听事件
myRTC.on('user-publish', handleUserPublish);
// 只监听一次
myRTC.once('user-publish', handleUserPublish);
// 取消某个监听函数
myRTC.off('user-publish', handleUserPublish);
// 取消全部监听函数
myRTC.removeAllListeners('user-publish');
复制代码

具体的事件列表能够参考 developer.qiniu.com/rtn/sdk/442…

特点功能

除了这些基本的功能，SDK 还提供了不少强大的高级功能，进一步知足各行各业的使用需求。

屏幕共享

除了直接采集摄像头，SDK 还支持进行屏幕采集（或者窗口采集）来实现共享屏幕进行会议。而且在屏幕共享和摄像头采集之间支持无缝切换，保证用户的使用体验。

// 屏幕共享
await QNRTC.deviceManager.getLocalStream({
    screen: { enabled: true },
    audio: { enabled: true },
});
复制代码

直播转推

对于一个在线会议而言，参与会议讨论的可能只有十我的左右，而却有大部分的人须要实时地观看这场会议（但不参与实时讨论）。这就是实时音视频和直播两大块场景的交集，将少数有实时互动需求的用户分配到超低延迟( 200ms )的实时音视频云上，将大部分只有实时观看需求的用户分配到低延迟( 2~3s )的直播云上，能够最大限度的减小成本知足需求。同时，实时视频流被转推到直播云上后，就可使用七牛直播云的 API 将这些流数据储存到各个存储空间中进行长期的保存。完成了一个从 实时互动 到 直播观看 到最后 转为文件存储（用于点播等等）的完整业务流程。

首先，在实时音视频云的控制台页面上关联好相应的直播云空间，再打开合流转推的开关。

若是想推送到自定义的 RTMP 地址（不使用七牛直播云），也经过实时音视频云的后端 API 来配置（详细见文档）

以后的工做就是 SDK 上了，使用 SDK 开启直播转推也很是简单，加入房间后调用一行代码便可。

myRTC.setDefaultMergeStream(WIDTH, HEIGHT); // 这里的 width height 对应上文设置的合流输出尺寸
复制代码

使用这个代码，SDK 将会默认将房间内的全部流平均布局，最终推送到目标 RTMP 地址实现合流转推。若是您想自定义画面布局，可使用以下 API：

myRTC.setMergeStreamLayout("目标用户ID", { w: 100, h: 100, x: 0, y: 0, muted: false, hidden: false });
复制代码

另外，咱们还提供了网页实时白板的服务，就像 Zoom 同样，用户能够在页面上和房间里的其余用户共享一个白板进行辅助演示，同时白板也支持 PPT 和 PDF 的演示。关于这一块的演示 Demo，能够访问咱们的牛课堂体验 edu-demo.qnsdk.com。

以上只是列举了一款会议软件经常使用的功能场景，将这些基本功能和用户自身的场景集成，一款简单的会议软件就可以轻松完成。若是您已经打算开始尝试并体验一下，访问咱们的 Demo（见上）会是一个很好的选择。若是您打算将本身的产品接入到咱们实时音视频中，这里有一份更为详细的实时音视频应用开发实践https://developer.qiniu.com/rtn/sdk/5043/rtc-application-development-process，从 html/css 到 js，从每一行代码到每个功能都有详细的解释和示例，帮助您快速接入。