从零到一，使用实时音视频 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（在桌面浏览器下打开）。https://demo-rtc.qnsdk.com。Demo 的源码也开源在 Github 上供各位参考 https://github.com/pili-engineering/QNRTC-Web

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

开发流程

一个简单的会议产品，一般是通过如下流程：

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

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

引入 SDK

推荐使用 npm 引入我们的 SDK，直接 npm i pili-rtc-web 即可，或者可以选择直接引入打包好的 js 文件 https://github.com/pili-engineering/QNRTC-Web/blob/master/Release/pili-rtc-web.js

异步处理

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

加入房间

准备完毕后，第一步，加入房间。说是加入房间，抽象后的说法其实是“什么用户以什么身份加入什么房间”。这里有 3 个未知量：用户标识、身份标识（权限）、房间标识。其实整个加入房间的过程需要的未知量还有很多，比如房间隶属于哪个 APP（应用，不同应用中房间独立）&#