通过WebRTC实现实时视频通信（一）

通过WebRTC实现实时视频通信（一）

通过WebRTC实现实时视频通信（二）

通过WebRTC实现实时视频通信（三）

WebRTC，名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla基金会、Opera支持下被包括进万维网联盟的W3C推荐标准。

不需要插件的实时通信

想像一下，如果你的手机、电视、电脑都可以通过一个平台进行通信，想像一下你可以在Web应用中轻松地加入视频聊天和p2p数据分享，你还没有兴奋吗？这就是WebRTC。

想试一试吗？WebRTC现在已经被集成到Chrome，Opera和火狐上了，你可以试试这个应用：

apprtc.appspot.com:

1. 在Chrome、Opera或Firefox中打开apprtc.appspot.com。

2. 点击允许按钮允许应用使用你的摄像头。

3. 在新的选项卡，甚至在另外一台电脑上打开正文显示的URL。

这里是这个应用的具体教程： later in this article。

开始

如果你没有时间阅读这个系列的文章，想直接编码，你可以这样：

1. 看一看Gooogle关于WebRTC的幻灯片（here)

2. 你果你没有用过getUserMedia，要先学习一下它，教程：HTML5 Rocks article ，Demo：simpl.info/gum。

3. 掌握RTCPeerConnection API，教程：simple example below ，Demo：simpl.info/pc,。

4. 了解一下WebRTC的实现、防火墙和NAT转发，教程：apprtc.appspot.com.

5. webRTC使用大头照拍摄：gbtags.com/gb/share/2491.htm

或者你可以直接跳到这一步：在WebRTC codelab上一步一步的学习如何构建一个完整的视频聊天应用程序，包括一个简单的信号服务器。

关于WebRTC的小故事

其实一个Web开发的终极挑战就是通过音频和视频进行实时通信，视频通信应该像文本通信一样自然，如果没有它，我们在用户交互方面的创新能力会受到限制。

在过去，实时通信都比较复杂，需要非常丰富的音频和视频技术才能被进行开发。 完整的实现实时通信需要整合大量的数据和服务，在Web上实现尤其困难。

2008年，Gmail视频聊天火了。2011年谷歌发布了Hangouts，收购了GIPS，GIPS是一个RTC方向的公司，然后开源了它的相关技术，在同年5月，爱立信构建了 第一个WebRTC的实现。

Hangouts 是谷歌在2013年的Google I/O大会上发布了统一消息服务，整合了此前的Google Talk、Google+ Messenger和 Hangouts视频聊天服务等产品。新的Hangouts完全基于云计算技术，将成为谷歌其他服务的一大支柱。尽管谷歌在热门的移动消息应用市场动作较 慢，但谷歌正在为未来的发展做准备。从表面来看，Hangouts是类似WhatsApp和Facebook Messenger的又一款消息应用。

 WebRTC目前用做实时通信、免费视频插件、音频和视频数据传输。以下是实际的应用：

• 很多Web服务已经使用了RTC，但是都需要下载插件或是原生app，比如Skype，Facebook和Google Hangouts。

• 下载安装更新插件非常麻烦。

• 插件不容易发现问题，测试很困难，大部分都需要授权，开发成本太高。 

安全性

这里有几个实时通信应用可以出现的安全性问题：

• 未加密的媒体数据流可以会在浏览器或通信途中被获取。

• 应用可能会在用户不知情的情况下记录视频和其它信息。

• 恶意软件或病毒可能被安装在一个不起眼的插件或应用中。

WebRTC通过各种特性避免了这些问题：

• WebRTC 实现很多用户安全协议，比如DTLS和SRTP。

• 对数据流和信号量进行编码加密。

• 。WebRTC 不是一个插件，可以运行在浏览器的沙箱中，组件不需要单独安装。

• 摄像头和手机必须通过严格的授权，只有在显示用户界面的时候才能调用。

关于WebRTC安全性的详细讨论不在本文的讲解范围内，如果你想了解更多这方面的问题，可以看一看IETF提供的 WebRTC Security Architecture。

开发者工具

• 当WebRTC会话被创建的时候，chrome://webrtc-internals (opera://webrtc-internals )就会提供会话详细的数据流和图表：

  

  chrome://webrtc-internals 截图

• 跨浏览器的 interop notes

• adapter.js 是一个JavaScript 的WebRTC适配， 由Google贡献，它可以解决浏览器差异化的规范的变化。

• 想了解更多WebRTC信号量，可以通过apprtc.appspot.com 查看输出日至。

• 如果你觉得麻烦可以用WebRTC 框架 甚至是完整的 WebRTC 服务。

• Chrome bugsBug报告：crbug.com/new  。Opera：bugs.opera.com/wizard/ 。Firefox：bugzilla.mozilla.org。

在哪里使用WebRTC

WebRTC有以下三个API：

• MediaStream (别名 getUserMedia)

• RTCPeerConnection

• RTCDataChannel

getUserMedia 可以在Chrome, Opera 和 Firefox中实现。 你可以看看这个跨平台的Demo：simpl.info/gum 和Chris Wilson的 例子 ，让getUserMedia作为音频的输入。

RTCPeerConnection 是在Chrome中和Android设备中使用，经过几次迭代之后RTCPeerConnection现在支持 Chrome and Opera 作为webkitRTCPeerConnection，Firefox 作为mozRTCPeerConnection。

RTCDataChannel 支持Chrome 25, Opera 18 和Firefox 22 以上的版本。

通常有报道说一个平台支持WebRTC，一般都说他们支持getUserMedia，而不支持其它RTC组件，开发的时候需要先弄清楚。

我的第一个WebRTC项目

WebRTC 项目需要做以下几件事情：

• 取到音频、视频或其它数据的数据流。

• 得到网络信息，如IP地址和端口，通过网络和其它WebRTC客户端交换数据，解决防火墙的NAT转发的问题。

• 协调信号来报告错误，启动或关闭会话。

• 交换媒体和客户端信息，处理如分辨率和编码解码器问题。dia and client capability, such as resolution and codecs.

• 数据流通信。

为了实现数据流之间的通信，WebRTC实现了以下的接口:

• MediaStream: 取得数据流，比如从摄像头和手机中获取。

• RTCPeerConnection: 音频和视频通话，设备加密和带宽管理。

• RTCDataChannel: 点对点通信。

总结

大家应该大概明白WebRTC的概要了。在下一篇文章中，我们会针对这三个API来具体的讲解构建WebRTC的流程。

评论

1 楼 ykbj117 2015-10-28  

位大神有木有WebRTC的视频资料网站么？文字的有时候不太看得懂，我前两天逛论坛发现了一个公开课，有兴趣的可以去看看：http://www.lookybang.cc/forum.php?mod=viewthread&tid=409&extra=page%3D1。是刘绍华教授主讲的，我已经看过了，质量很不错，而且还有后续视频会更新。希望以后多有这种视频类的课程网站