摘 要

随着网络通讯技术的不断发展，网络的带宽和延迟均已控制在了一个可观的地步。特别是随着5G时代的降临，数据传输质量得到提升。因此普通用户与企业对实时音视频通话的需求必然与日俱增。而被W3C纳入标准的WebRTC无疑是开发音视频通讯系统的首选。

由绝大部分的主流浏览器支持的WebRTC不仅在各浏览器之间具有良好的兼容性，而且还支持Android和IOS端。同时WebRTC为应用层的开发者提供友好的API，开发方便且不需要安装额外插件，仅需要HTML标签加上JavaScript代码即可实现端对端的音视频通话，且为开源项目技术成熟且不收取额外费用，是实时音视频通讯的上佳技术选型。

本文将打造一个实时音视频通讯系统，从服务器端的配置，到服务端逻辑处理代码的编写，与前端显示页面结合，呈现出一个功能丰富的网络音视频通话的系统。本系统使用JavaScript语言编写代码，服务器端使用Node.js运行服务器端代码，网络穿透使用ICE框架，客户端使用苹果的Safari浏览器与谷歌的Chrome浏览器上测试运行，最终实现一个一对一的音视频通话系统，并且实现非音视频数据的发送。

尽管WebRTC还存在着许多的缺点，包括各浏览器提供的API名称不统一，没有为多人通话的情景进行优化，以及在Chrome与安卓设备上的音频采集会出现回音噪声等的问题，且缺乏服务器部署的方案，开发者只能自己进行服务器技术选型。但是瑕不掩瑜，WebRTC提供的音视频编解码器与成熟的框架均使得音视频开发者从中受益。

文末是对本毕业设计的反思与总结，总结设计中的难题与技术要点，反思设计中途出现的困难与问题，为本次的毕业设计画上句号。

关键词：WebRTC；JavaScript；Node.js； ICE框架；coTurn服务

Abstract

With the continuous development of network communication technology, the bandwidth and latency of the network have been controlled to a considerable extent. Especially with the advent of the 5G era, the quality of data transmission has been improved. Therefore, the demand of ordinary users and enterprises for real-time audio and video communications is bound to increase day by day. WebRTC, which was included in the standard by W3C, is undoubtedly the first choice to develop audio and video communication systems.

WebRTC, supported by most mainstream browsers, not only has good compatibility among all kinds of browsers, but also supports Android and IOS. At the same time, WebRTC provides a friendly API for developers of the Application layer. It is easy to develop and does not require the installation of additional plug-ins. Only HTML tags and JavaScript code are required to implement audio and video communications. It is mature for open source projects and is free to everybody. It’s the best technology selection for real-time audio and video communication.

This article will create a real-time audio and video communication system, from the server configuration to the server logic processing code writing, combined with the front-end display page, presenting a rich network audio and video call system. The system uses JavaScript as programming language, the server uses Node.js to run the server code, the network penetration uses the ICE framework, the client uses Apple's Safari browser and Google's Chrome browser to test and run, and finally realizes one-to-one Audio and video communication system, and realize the transmission of non-audio and video data.

Although WebRTC still has many shortcomings, including the API provided by various browsers are not uniform, not optimized for multi-person calls, and the audio collection on Chrome and Android devices will have echo noise and other problems, and lack For the server deployment solution, developers can only choose the server technology by themselves. But the flaws cannot be concealed. Audio and video codecs and mature frameworks provided by WebRTC have benefited audio and video developers.

At the end of the article is a reflection and summary of the graduation project, summing up the difficult problems and technical points in the design, reflecting on the difficulties and problems in the middle of the design, and ending the graduation project.

Keywords: WebRTC；JavaScript；Node.js；ICE framework；coTurn service

目 录

第1章 诸论 1

1.1 课题的研究背景和意义 1

1.1.1 研究背景 1

1.1.2 研究的目的与意义 1

1.2 国内外研究现状 2

1.3 本次研究的主要内容 2

第2章 WebRTC基本工作流程 3

2.1 WebRTC整体架构 3

2.2 WebRTC运行机制 4

2.3 WebRTC服务器端的部署 6

2.3.1 服务器使用Node.js实现Web服务 6

2.3.2 服务器使用socket.io实现信令交换 6

2.3.3 服务器部署coTurn服务 7

2.4 WebRTC网络部分前置知识 8

2.4.1 P2P中的NAT穿越 8

2.4.2 STUN/TURN与ICE框架 9

2.4.3 WebRTC使用的媒体流通讯协议 12

第3章WebRTC本机设计调试 13

3.1 WebRTC获取用户设备 13

3.2 WebRTC获取视频流 14

3.2.1 通过getUserMedia获取视频流并设置约束 14

3.2.2 视频滤镜，仅传输音频与共享屏幕 15

3.2.3 WebRTC录制 16

第4章 实现一对一实时音视频通信系统 18

4.1 一对一连接前置知识 18

4.1.1 RTCPeerConnection类 18

4.1.2 媒体协商 20

4.1.3 端对端连接基本流程 22

4.2 本机对本机连接调试 23

4.3 实现一对一的音视频通信 25

4.3.1 socket.io信令服务器的实现 25

4.3.2 WebRTC音视频通信客户端实现 25

4.3.3 传输非音视频数据与传输速率控制 27

4.4 最终效果 29

第5章 总结 29

参考文献 30

致 谢 32

诸论

课题的研究背景和意义

研究背景

我们正处于一个网络技术更新的时代，特别是5G时代的到来，网络的带宽和延迟均控制在了可观的水平上。良好的网络状况为应用层的网络应用提供了强大的基础去开发一系列功能丰富的软件。而其中对于网络音视频通话的需求无疑是其中最大的，基于网络的音视频通话越来越成为人们生活中的一部分，在异地工作的年轻人与老年人进行视频通话，年轻人之间通过音视频通话谈话交流等等的情景。因此WebRTC应运而生。

WebRTC（Web Real-Time Communication）原本是Global IP Solutions公司的GIPS引擎，作为一个基本被各大厂商引用的引擎包括国内的QQ与国外的Skype。在2010年被谷歌收购后开源并且更改名字。目前谷歌把WebRTC集成到Chrome浏览器中。WebRTC如名字所示，在最开始的时候旨在为浏览器提供音视频通话的API（接口），目前已开源并被纳入W3C的推荐标准中。随着其技术的发展，现在已经支持在Android与IOS设备上支持了。WebRTC通过P2P方式，不需要中转，在终端之间直接建立通信连接，传输层采用udp协议，相对传输质量，更注重传输效率。^[1]

目前有Chrome浏览器，Firefox浏览器，Opera浏览器以及Safari浏览器对WebRTC进行了支持，至于其他使用谷歌内核的国内浏览器如360极速浏览器，QQ浏览器等浏览器便不再列举。并且Discord，Facebook等国外知名软件均采用了WebRTC技术作为音视频通讯的架构。对于已经有如此多主流浏览器支持的标准，用于开发音视频通讯的系统无疑是极其方便的。