QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

从零到一,使用实时音视频 SDK 一起开发一款 Zoom 吧

  • 2019-10-08
  • 本文字数:3179 字

    阅读完需:约 10 分钟

从零到一,使用实时音视频 SDK 一起开发一款 Zoom 吧

Zoom 是一款受到广泛使用的在线会议软件。相信各位一定在办公、会议、聊天等各种场景下体验或者使用过,作为一款成熟的商业软件,Zoom 提供了稳定的实时音视频通话质量,以及白板、聊天、屏幕共享、PPT 放映等常用功能。但是在当今浏览器成为端上主流的时代,实时音视频又怎甘于落后呢?相比于需要安装包的 Zoom,直接在网页上开发一款类似的会议软件肯定会受到更多的关注。当需要开会的时候,直接通过一个链接,大家就可以接入并开始会议了。现在,使用七牛实时音视频的 Web SDK,我们可以将您的想法轻松变为现实。


首先,让我们梳理一下一款 Web 的在线会议产品需要哪些关键点需要攻破。


  • 浏览器兼容性要好,需要支持大部分主流桌面浏览器


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


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


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


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


我们的 SDK 提供了丰富的功能列表,满足绝大多数会议场景的需求,理论上使用 SDK 可以完全复刻一个 Web 版本的 zoom。


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


当然!目前就可以体验我们 Web 的 Demo(在桌面浏览器下打开)


Demo 的源码开源在 Github 上供各位参考


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

开发流程

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


  • 用户注册/登陆 (开发者自己集成,SDK 只需要用于区分用户的 userID)

  • 创建一个会议房间/加入一个会议房间

  • 采集自己的摄像头/麦克风数据

  • 将采集到的媒体数据发布到房间中

  • 订阅房间里其他人的媒体数据并实时播放

  • 处理用户加入/离开,发布/取消发布


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

01 引入 SDK

推荐使用 npm 引入我们的 SDK,直接 npm i pili-rtc-web 即可,或者可以选择直接引入打包好的 js 文件

02 异步处理

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

03 加入房间

准备完毕后,第一步,加入房间。说是加入房间,抽象后的说法其实是「什么用户以什么身份加入什么房间」。这里有 3 个未知量:用户标识、身份标识(权限)、房间标识。其实整个加入房间的过程需要的未知量还有很多,比如房间隶属于哪个 APP(应用,不同应用中房间独立),APP 隶属于哪个七牛账户等等。在这里我们将这些值统一进行编码签名,变成一个 roomToken 提供给前端,端上就只需要通过这个 token 即可加入房间。(token 的生成可以在七牛控制台完成,也可以使用服务端 SDK 根据需要动态生成)


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

04 采集本地媒体流

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


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

05 发布媒体流

直接将刚刚拿到的流对象作为参数,调用 publish 方法即可:


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

06 订阅媒体流

当加入房间成功后,随时可以通过访问 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);    } });
复制代码

07 事件处理

SDK 暴露了丰富的事件列表来满足绝大多数场景的需求,事件的处理也很简单,以「有其他用户发布」这个事件为例:


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


具体的事件列表可以参考

特色功能

除了这些基本的功能,SDK 还提供了很多强大的高级功能,进一步满足各行各业的使用需求。

01 屏幕共享

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


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

02 直播转推

对于一个在线会议而言,参与会议讨论的可能只有十个人左右,而却有大部分的人需要实时地观看这场会议(但不参与实时讨论)。这就是实时音视频和直播两大块场景的交集,将少数有实时互动需求的用户分配到超低延迟( 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,可以访问我们的牛课堂体验


以上只是列举了一款会议软件常用的功能场景,将这些基本功能和用户自身的场景集成,一款简单的会议软件就能够轻松完成。如果您已经打算开始尝试并体验一下,访问我们的 Demo(见上)会是一个很好的选择。如果您打算将自己的产品接入到我们实时音视频中,这里有一份更详细的实时音视频应用开发实践,从 html/css 到 js,从每一行代码到每一个功能都有详细的解释和示例,帮助您快速接入。


本文转载自公众号七牛云(ID:qiniutek)。


原文链接:


https://mp.weixin.qq.com/s/_acp9l5FEm94TZRO9XDLhA


2019-10-08 23:032450

评论 1 条评论

发布
用户头像
使用七牛云/RTC服务可联系微信GJ333333333,注:(9个3)
2021-06-02 11:00
回复
没有更多了
发现更多内容

八月裸辞,九月疫情在家闭关狂刷面试题,十月成功上岸京东物流

小二,上酒上酒

Java 阿里

Linux下automake工具使用(自动构建Makefile文件)

DS小龙哥

10月月更

阿里内部手写的Spring Security,真的香啊

小二,上酒上酒

spring spring security

Bug改不完,迭代总延期,咋办?

华为云开发者联盟

开发流程 bug 迭代 瀑布开发 企业号十月 PK 榜

十大 CI/CD 安全风险(二)

SEAL安全

DevOps CI/CD DevSecOps CI/CD管道 软件供应链安全

从无到有,一步一步教你搭建微服务电商项目,包含笔记+视频+源码

小二,上酒上酒

微服务

Linux下基础命令(二)

DS小龙哥

10月月更

Linux下Shell脚本基础语法

DS小龙哥

10月月更

融云实践:主流叙事之外,科技如何助力民生改善

融云 RongCloud

数据 服务 科技

有人想用开源工具DBT取代 SQL,你同意吗?

雨果

sql

5分钟,带你创建一个智能电梯检测器模型

华为云开发者联盟

物联网 华为云 iotda 智慧电梯 企业号十月 PK 榜

IT人士必须警惕这9个信号:说明你的IT架构很糟糕

雨果

数据管理工具 数据服务平台

MatrixOne混沌测试之道

MatrixOrigin

数据库 分布式 混沌测试

Linux下文件目录权限操作

DS小龙哥

10月月更

你从未见过如此详细的 TCP 八股文!

C++后台开发

TCP 网络编程 网络协议 八股文 C++开发

别按部就班的背面试题了!吃透这份Java面试核心知识手册,大环境不好Offer也能拿到手软!

Java全栈架构师

程序员 面试 程序人生 架构师 Java后端

阿里p8免费公开五份Java架构师学习手册,助力金九银十

小二,上酒上酒

Java 架构 阿里

阿里内部独家Java架构面试题,面试再不过来找我

小二,上酒上酒

MySQL spring JVM 多线程 MQ

Linux系统下基础命令介绍

DS小龙哥

10月月更

Python进阶(十二)浅谈python中的方法

No Silver Bullet

Python 方法 10月月更

再不看就来不及了,腾讯Spring Boot高阶笔记,限时开源48小时

小二,上酒上酒

Java 面试 大厂

阿里高工携18位架构师耗时两个月整合1000页的Java岗面试八股文

程序知音

Java 架构 java面试 后端技术 Java面试八股文

数字化转型案例解读:德意志银行数字化转型背后的故事

雨果

数字化转型

挑战海量数据:基于Apache DolphinScheduler对千亿级数据应用实践

白鲸开源

大数据任务调度 任务调度 dophinscheduler 大数据调度

数据库故障处理优质文章汇总(含Oracle、MySQL、MogDB等)

墨天轮

MySQL 数据库 oracle 故障定位 国产数据库

Github三天点击破亿,四天助力金九银十,精通SpringCloud微服务架构,成就大厂梦

小二,上酒上酒

Java spring 编程 Spring Cloud

专利解析|混合缓存技术在元年多维库中的应用

元年技术洞察

数据分析 多维数据库

阿里内部JVM G1GC纯手写学习笔记,你确定看得完?

小二,上酒上酒

编程 JVM 马士兵

如何使用华为云IoT平台实现远程控制无人机,资深物联网从业者手把书一步一步教你!

wljslmz

物联网 IoT 无人机 华为云 10月月更

Gartner:被CIO们忽略的7个颠覆性趋势

雨果

CIO

5年大厂开发经验,加上这份Java高性能架构笔记,终于拿到了架构师薪资

小二,上酒上酒

Java 大厂 大厂面试 Java面试题

从零到一,使用实时音视频 SDK 一起开发一款 Zoom 吧_文化 & 方法_张显阳_InfoQ精选文章