第一章 开启WebRTC之旅

音频和视频可以在互联网上传输，诸如Netflix和Pandora这样的web应用每天都向成千上万的用户传输着音视频内容。然而，在如今的Web平台上尚未形成一套成熟的实时通讯解决方案，如果Facebook这样的网站要在浏览器中加入视频通讯的功能，通常会引导用户安装一个插件来实现。于是，WebRTC（Web实时通讯）技术就应运而生了。

在本章中，我们将介绍WebRTC的基础知识，包括：

• 音频和视频领域的发展现状
• WebRTC对音视频领域的影响
• WebRTC主要特性及使用方法

音视频通讯领域的发展现状

人们在很久以前就利用各式各样的技术和工具进行通讯，就以移动电话运营商为例，大型电话公司建立起大规模的音频通讯网络，为全球成千上万的用户提供音频通讯服务，让每个人的语音都能够传播到世界各地。

后来，视频通讯也随之流行起来，各厂商纷纷开发自己的产品，例如：苹果的FaceTime，Google的Hangouts，Skype的视频通话。基于这些技术，用户可以很方便地与其他人进行视频对话。开发者们为了将用户体验优化到极致，通过大量的技术手段保障视频质量，针对每一种问题都提出了相应的工程化解决方案，例如：减少丢包，断网恢复，及时响应用户网络变化等。

WebRTC的目标是将所有这些技术都植入到浏览器中。上述解决方案大多都需要用户在PC和移动设备中安装相应的插件或应用程序，这些公司还会向开发者征收技术授权费，并构筑起巨大的技术壁垒以防新公司加入到这个领域中蚕食市场份额。而WebRTC技术一旦实现，每一位浏览器用户不再需要安装插件，开发者也不再需要缴纳昂贵的授权费，大家只需要打开特定的网站就可以立即与其他用户建立连接。

在Web平台传输音频和视频

WebRTC的成就非凡，无需借助第三方软件或插件便可在开放网络中传输高质量音视频流，在过去的浏览器中一直没出现过这种免费优质的实时通讯解决方案。互联网的成功很大程度上可以归因于HTML、HTTP还有TCP/IP这些高度开放且高度可用的技术，我们希望基于此来构建WebRTC，推动互联网的进步。这便是WebRTC的由来。

从零开始构建一个实时通讯应用，首先需要引入大量的库和框架，这些代码能够解决实际开发中将面临问题，例如：连接断开、数据丢失、NAT穿透等等。WebRTC的优点是可以在浏览器API中内建上述这些库和框架，Google也开源了许多提供高品质完整通讯功能的技术。

访问http:// www.webrtc.org/获取更多有关WebRTC的信息和具体实现的源码。

为了使开发者专注于实现具体的产品细节，WebRTC在浏览器API中集成了大量的技术，解决了所有繁重的问题，例如：捕捉摄像头和麦克风、音视频编解码、传输层以及会话（Session）管理。

WebRTC应用
WebRTC API
捕捉摄像头和麦克风
处理音视频流
传输层
会话管理

捕捉摄像头和麦克风

建立通讯平台的第一步是获取用户设备的摄像头和麦克风权限。先检测设备的可用性，然后获取用户授权并与设备建立连接，最后再从设备获取一段数据流。一切准备就绪后开始实现我们的第一个应用。

音频及视频的编解码

很不幸，如果我们要通过互联网发送一段音视频数据，即使优化了网络速度，数据尺寸也还是太大，根本无法处理。所以我们势必要对数据流进行编码，这个过程会将视频帧或音频声波分解成许多很小的数据块，再将它们压缩到更小的尺寸，从而可以让这些数据块在网络间更快速地传输，然后在接收端将它们解压。这项技术背后的算法通常被成为codec（多媒体数字信号编解码器）。

如果你曾在计算机上遇到过无法播放视频文件的情况，并且深入了解过视频和音频编解码器的复杂原理，便会知晓编码音频和视频流的方法有很多种，每一种各有千秋。此外，有很多公司出于各种商业目的开发维护自己的收费编解码器。

WebRTC内置的几种编解码器包括：H.264、Opus、iSAC还有VP8。当两个浏览器会话时，会综合两位使用者的情况选出最优的编解码器。众多浏览器厂商也会经常会面，讨论选取适合支撑WebRTC技术运行的编解码器。访问http://www.webrtc.org/faq可以了解更多有关不同codec的信息。

若要探讨编解码器的细节，其内容之多都可以写很多本书了，也确实有很多专门围绕这个话题写就的书。幸好，WebRTC在浏览器层做了绝大多数的编码工作，在整本书中我们无需担心这个问题，如若你想冒险做一些基础音视频通讯技术之外的尝试，很有可能会在编解码的问题上头疼一阵子了。

传输层

关于传输层的知识同样是只语片言难以概括，总的来说，传输层主要处理数据包丢失、数据包排序以及建立用户间的连接等问题。通过传输层API可以轻松获知用户网络的波动，并及时对连接状态的变化做出反应。

WebRTC处理数据包的传输，很大程度上借鉴了浏览器处理其它传输层（例如：AJAX和WebSockets）的方式。浏览器提供一组易于访问且结合了事件机制的API，能够在连接出现问题时触发相应事件。事实上，无论是在移动设备、桌面设备还是其它任何设备中，控制WebRTC调用的代码可能有成千上万行，这些代码可以用来处理所有的用例。

会话（Session）管理

WebRTC难题的最后一部分是会话管理，虽然其原理比网络连接管理要简单得多，却仍不失为一个很重要的部分。通常来说我们称之为信令（Signaling），负责在浏览器中建立并管理多个连接，我们会在第四章，创建一个信令服务器中详细介绍。

数据传输也是这一系列的新特性之一。我们需要通过高质量的数据连接才能在两个客户端之间传输音视频数据，自然也可以通过这个连接来传输其它任意数据。这个功能通过RTCDataChannel API暴露给JavaScript层，我们也将在后面详加描述。

如今的WebRTC需要非常多的构件来协同打造超高质量的实时通讯体验，Google、Mozilla、Opera还有其它很多公司为此投入了大量的时间和精力，请最好的音视频工程师在Web平台优化体验。WebRTC中应用了与VOIP（互联网协议电话）同源的技术，将在未来改变工程师构建实时通讯应用的方式。

创建web标准

Web平台的优势是发展迅猛，新旧标准日新月异，浏览器可以在用户无感知的情况下自动下载升级程序并自动安装，进一步提升了快速迭代的体验。这使得Web开发者的工作变得相对轻松了，但也意味着需要开发者时刻关注包括WebRTC在内的新技术。

推广浏览器API并推动各大厂商实现新技术的是一些独立的标准化组织，其中掌管WebRTC标准的两个组织分别是W3C（万维网联盟）和IETF（互联网工程任务组）。

W3C与其它的很多标准化组织不同，它免费向公众公开大量的信息，让每一个人都可以在W3C的网站上查看API实现的具体细节。访问http://www.w3.org/TR/webrtc/可以参考和学习更多有关WebRTC的信息。

参与这些组织不仅可以紧跟最新的技术，也能够共同塑造未来的Web世界。参与这些社区有利于促进浏览器成为成长最快的开发栈。访问http://www.w3.org/participate/可以通过文中提到的多种方式参与到讨论中来。

浏览器支持

尽管WebRTC的目标是为每一个用户服务，但这不意味着所有浏览器要同时实现相同的功能。不同浏览器可能会选择在特定的领域突进领先，如此一来在某些浏览器里可以运行的程序兴许在其它浏览器中就无法工作。后续的小节中我们会介绍WebRTC在不同浏览器中的支持情况。

你可以在很多网站上查到自己的浏览器对某项技术的支持程度，例如访问http://caniuse.com/rtcpeerconnection你就会知道自己的浏览器是否支持WebRTC。

Chrome、Firefox和Opera的兼容性

你现在使用的浏览器很有可能就支持WebRTC。在主流的操作系统Windows、Mac和Linux中，Chrome、Firefox还有Opera这三种浏览器都支持并且默认启用了WebRTC功能。浏览器厂商之间，比如Chrome和Firefox，也会一起合作解决互操作性的问题，目前二者间能够实现互相通信。

安卓操作系统的兼容性

安卓系统上的Chrome和Firefox浏览器同样也支持WebRTC。鉴于这两种浏览器都实现了桌面端和移动端程序的代码共享，所以安卓4.0版本（代号为Ice Cream Sandwich）以后的浏览器都默认启用了WebRTC，且能够与其它基于WebRTC的程序互相通信。

苹果操作系统兼容性

苹果没有针对Safari和iOS提供WebRTC的支持。有传言称他们正在研发相关功能，但是目前苹果官方尚未公布支持WebRTC的具体时间。有的人为了在WebView中加载WebRTC应用，直接在混合模式的移动应用（Hybrid App）中嵌入了WebRTC的代码。

IE的兼容性

微软尚未宣布任何在IE中添加WebRTC支持的计划。他们也曾提出过一个可以在浏览器中支持音视频通讯的可选方案，但这个方案在与WebRTC标准竞争后并没有得到采纳。自那时起，微软便没有过多参与WebRTC标准的研发。

推荐你使用Chrome查看贯穿整本书的示例，切记这是一个日新月异的领域，请及时检查并更新你的浏览器。

在浏览器中使用WebRTC

准备好浏览器环境后，让我们开始尝试WebRTC吧！在浏览器的地址栏中输入https://apprtc.appspot.com/访问demo应用。如果你使用的是Chrome、Firefox或Opera中的任意一款浏览器，你都应该看到这样的一个下拉通知：

点击允许按钮，授权这个web页面接收设备传出的音频和视频流，在这个过程中你可能需要设置一下麦克风，或者选择一个可以使用的web摄像头。完成这一切后，你应该就可以在页面中看到摄像头捕捉的影像了。

页面会根据当前的会话生成一个自定义ID并在URL中显示，例如 https://apprtc.appspot.com/r/359323927。复制这个URL，在本机或其它机器把它粘贴到另一个浏览器的地址栏里，页面加载后，如若一切顺利，你会分别看到来自两个客户端的实时视频。WebRTC是一个强大的解决方案，通过它可以很轻松地在浏览器中实现实时通信的功能。

支持WebRTC的应用

深入考究，WebRTC首次真正意义上地在浏览器本身实现了对等连接的技术，其核心思想是在两个浏览器之间建立一条点对点的连接，所以任何利用对等连接技术实现的程序都可以轻松地扩展到WebRTC，例如：文件共享、文本聊天、多人游戏甚至货币流通等等。现在有上百个这类的应用已经可以在浏览器中运行起来了。

这些应用大都有一个共同点：需要在两个用户之间建立一条低延迟、高性能的连接。这要求WebRTC不得不通过底层协议来提供高速性能，从而加速数据在网络间的流动，实现在短时间内传输大量的数据。

WebRTC可以提供更高级别的隐私保护，这需要在两个用户之间建立一条安全连接。流量在对等连接之间完全加密，并且可以直接路由到其它用户，所以在不同的连接上发送的数据包可能经过完全不同的路由，使用WebRTC应用的用户由此可以匿名，否则难以保证何时可以连接到一台应用服务器上。

这些只是众多WebRTC应用中的一部分，由于WebRTC构建在JavaScript和Web平台的基础上，可以从已有的应用中吸取很多经验。阅读完本书后，你应该能够掌握亲自编写一个WebRTC应用所需的知识！

自测题

Q1：WebRTC的目标是在不安装插件且不收取许可费的基础上提供易访问的实时通讯功能，对还是错？
Q2：下列哪个不是浏览器通过WebRTC提供的功能？
1. 捕捉摄像头和麦克风
2. 处理视频和音频流
3. 访问联系人列表
4. 管理会话
Q3：必须是有钱的大公司才可以加入W3C和IETF，对还是错？
Q4：下列哪种应用不能通过WebRTC实现？
1. 文件共享
2. 视频通讯
3. 多人游戏
4. 以上都不是

总结

在本章中，我们简要介绍了WebRTC背后的特性和技术。你应该已经知晓WebRTC的目标、对Web平台的促进作用及其可应用的场景，而且你应该已经跟随着我们在浏览器中体验了WebRTC的威力。

本章蕴含着大量的信息，如果没有悉数吸收也不要担心，我们将在整本书中更详尽地讲解上述每一个主题。请尽情在网上查阅相关资料，多了解一些有关WebRTC的知识。

接下来，我们将开始通过getUserMedia API来探究如何捕捉用户的摄像头和麦克风。

然后，我们会在浏览器中构建一个完整的WebRTC应用来处理视频和音频电话。

完成之后，我们再一起探讨如何将这个应用扩展成多用户版本，并通过添加文字聊天和文件共享等功能学习数据传输相关的知识，以及使用WebRTC时的最佳安全实践。