摘 要

WebRTC是基于HTML5实现的一套即时通信标准，其良好的跨平台特性和优质的音视频处理技术使得越来越多的开发者开始关注这项技术。

本论文的研究目标是基于HTML5实现一套web端视频直播系统，关键的流媒体处理基于开源webRTC库PeerJS实现，web端界面及功能基于前端react实现，数据库选用非关系型数据库MongoDB，使用webpack实现工程自动化和代码打包编译，后台服务器基于Node框架Express实现。

关键词：视频直播；HTML5；WebRTC；PeerJS

Abstract

WebRTC is based on HTML5 to achieve a set of instant messaging standards, its good cross-platform features and high-quality audio and video processing technology makes more and more developers began to pay attention to this technology.

The goal of this paper is to realize a web-based video broadcast system based on HTML5. Key streaming media processing is based on open source webRTC library PeerJS implementation, web interface and function based on front-end library implementation, database selection non-relational database MongoDB, To achieve engineering automation and code package compilation, the background server based on Node framework Express to achieve.

Key Words：Video live ; HTML5 ; WebRTC ; Peer

目 录

第1章 绪论 1

1.1 研究背景 1

1.2 国内外研究现状 2

1.3 研究内容与意义 3

1.4 文档框架 3

第2章 关键技术介绍 4

2.1 WebRTC和PeerJS 4

2.2 node.js和Express 5

2.3 HTML5 6

2.4 MongoDB 6

2.5 前端技术实现 7

2.5.1 react 7

2.5.2 webpack 7

第3章 系统架构设计 9

3.1 视频直播实现 9

3.2 数据库设计 11

3.2.1 数据库文档设计 12

3.2.2 数据库功能实现 13

3.3 用户交互服务器 16

第4章 系统具体实现 18

4.1 系统目录设计 18

4.2 客户端实现 20

4.2.1 用户功能 20

4.2.2 自定义直播间 22

4.2.3 弹幕实现 23

4.3 UI规范 25

第5章 总结 27

参考文献 28

致谢 30

第1章 绪论

1.1 研究背景

随着4G网络的普及以及带宽的提高，视频直播悄然占据了互联网的风口。但其实直播并不是一个新的IP，最开始只有电子媒体和企业才可以进行的直播，如今已经走进寻常百姓家。究其原因不外乎三点，一个是网名数量的增长，几乎每个人都有一个一个或多个可访问网络的设备。二是高速网络的普及，给发布直播和观看直播都提供了条件，三是人们娱乐需求的改变，社交方式的普及及改变推动了整个直播行业的发展。综上也可以看出，移动视频直播才是近几年令直播走上风口的原因，同时移动端的欣欣向荣也带动了web端的发展，各种直播网站雨后春笋般出现，开始走进大众的视野。

然而，移动视频直播的火热始终也掩盖不了web端直播市场的乏力，虽然国内一些大型直播网站(如斗鱼、哔哩哔哩、熊猫TV等)占据了绝大部分的移动端入口，但这些并不是严格意义上web端的直播。在这些直播平台中，web端只是作为一个视频播放载体，直播的实现大部分还是基于HLS和RTMP，和HTML5并没有什么直接的联系，而且相对来说这些解决方案各自有自己的缺陷。HLS延迟较大，但是跨平台，RTMP具有低延迟、高实时性的特点，但是只能用flash播放，无法在移动端web播放(即移动端浏览器)，只能通过第三方的video.js库来弥补这一缺陷。其他的移动端视频直播解决方案如哔哩哔哩的flv.js也也只是让浏览器能够更好地支持HTML5，并不能改变完全改变flash依然强势的局面。

也正是因为目前市场上并没有一套统一的视频直播方案，具有跨平台特性的WebRTC出现了。WebRTC，中文解释是网页即时通信，英文是Web Real-Time Communication，是HTML5在即时通信领域制定的一套标准^[1]，它的出现让web端视频直播重新进入大众的视野。这并不是一项新的技术，说重新进入大家的视野是因为在11年发布之初就已经受到了很多的关注，但结果确是以糟糕兼容性(那时只有最新的chrome和Firefox浏览器支持，移动端完全不支持)和性能问题淡出了大家的视线。幸运的是六年后的今天，WebRTC以更好的姿态重新出现在大众面前。目前市场上主流的浏览器除Safari(预计今年年底也会支持WebRTC)和IE外，最新版本均已经支持了WebRTC的全部特性,移动端最新的Firefox和Chrome也已经支持WebRTC，同时WebRTC也有相关的native API来支持Android和IOS开发者的需求，跨平台性已经相当好了。同时WebRTC也解决了流数据常见的编码解码和回声消除问题，进一步增强了WebRTC在视频直播领域的竞争力^[2]。Google也开始在全球范围内推广WebRTC，使其能够受到更多开发者和相关行业人员的关注，进一步促进整个WebRTC生态的发展。

1.2 国内外研究现状

过去的一年对于直播来说是爆炸发展的一年。新生直播平台雨后春笋般走进大众视野，如映客、花椒、熊猫等平台更是争先抢占市场，老牌直播平台如斗鱼、战旗等也相继发力，直播领域开始进入一个群雄割据的局面。虽然直播平台数量有了很大的量变，但直播技术并没有产生相应的质变。各个平台所用的直播技术基本上还是相差不大，直播流程和相关技术实现见下图：

图1.1 直播流程图

上图介绍的就是目前国内外直播平台主流的技术架构，也是目前HTML5视频直播应用最广泛的直播方案。虽然是叫做HTML5视频直播，但是实际上并没有用到多少HTML5相关的技术。可能使用到HTML5的地方基本上发生在流媒体的采集或者播放阶段，采集阶段有可能通过WebRTC的getUserMedia API采集，这种方式也只是在WebRTC在13年完善该API之后才逐渐被推广，播放阶段有关HTML5指的是用HTML5新增的video标签播放视频(RTMP支支持flash播放，需要借助开源的video.js实现)。

再对比一下基于HTML5实现的WebRTC，发布之初也曾名噪一时，成为互联网相关人员争先研究的对象。然而由于当时相关标准的兼容性离其跨平台特性还想去甚远，所以很快就被大多数开发者放弃。但是这些结论并没有随着WebRTC的更新而更新，当前的WebRTC已经有了移动端(IOS，Android及HTML5)的解决方案(WebRTC的底层实现是用的C ，为了让浏览器调用才封装了一层JavaScript)，在官网上提供了对应的native API供开发者使用，在视频流的采集和上传方面已经做得比较完善了，而且自身的实际实现已经解决了一些在直播中存在的痛点问题(如回声消除，事件侦听等)^[3]。