WebRTC学习笔记_Demo收集
1. WebRTC学习
1.1 WebRTC现状
本人最早接触WebRTC是在2011年底，那时Google已经在Android源代码中添�了webrtc源代码，放在/external/webrtc/，可是Android并没实用到它，更没有被浏览器使用。当时试图在Android 2.3（Gingerbread）高通平台的手机上用H.264 硬件codec替换掉WebRTC缺省使用的VP8软codec，费了不少劲勉强换掉后效果非常差仅仅得放弃。
近期得知Google最新版的Chrome for Android已经支持WebRTC，应老板的要求搭一个手机浏览器上视频通信的demo，为此在网上搜集各种资料，发现经过一年多的发展，国内外研究和使用WebRTC的人明显多起来，可用的demo也非常多。在此做一个笔记，留作日后參考。
眼下基于WebRTC的开发事实上有两个方向，一个是基于浏览器的WebRTC应用开发，编程语言主要是JavaScript、HTML等，这也是WebRTC作为HTML5标准的组成部分原本的目的；还有一个是C层面的移植和开发，作为一款非常强大的开源软件，非常多领域的软件项目都能够利用到WebRTC的音视频通信和处理能力，这些场合的应用程序可能是C语言写的，也不一定与浏览器有关。本文是属于前一种方向。
1.2 WebRTC基本概念学习
WebRTC的官方资料能够从其官网http://www.webrtc.org/和W 3C站点http://www.w3.org/TR/webrtc/上看到。
学习WebRTC基础知识比較好的站点是《Getting Started with WebRTC》，网址是http://www.html5rocks.com/en/tutorials/webrtc/basics/，这个也是官网上推荐的。
对浏览器来说，WebRTC事实上就是提供了3个API：
MediaStream (即getUserMedia)，用于获取媒体数据，比如来自摄像头和麦克风的视频流和音频流；
RTCPeerConnection，用于peer跟peer之间呼叫和建立连接以便传输音视频数据流；
RTCDataChannel，用于peer跟peer之间传输音视频之外的一般数据。
须要注意的是这几个API的名称在不同浏览器及同一浏览器的不同版本号之间略有差异，比方PeerConnection在FireFox上叫做mozRTCPeerConnection，而在当前版本号的Chrome上叫做webkitRTCPeerConnection，将来WebRTC标准化完毕后会把这些前缀去掉使用统一的名称。
眼下网上找到的WebRTC demo都仅仅用到了getUserMedia和RTCPeerConnection这两个API，还有一个API即RTCDataChannel似乎眼下还不太成熟。
WebRTC是实现peer to peer的实时通信（可以两个或多个peer之间），在可以通信前peer跟peer之间必须建立连接，这是RTCPeerConnection的任务，为此须要借助一个信令server（signaling server）来进行，信令包含3种类型的信息：
Session control messages: 初始化和关闭通信，及报告错误；
Network configuration: 两方的IP地址和port号（局域网内部IP地址需转换为外部的IP地址）；
Media capabilities: 两方的浏览器支持使用何种codecs以及多高的视频分辨率。
WebRTC并未规定使用何种信令机制和消息协议，象SIP、XMPP、XHR、WebSocket这些技术都能够用作WebRTC的信令通信。
除了信令server，peer跟peer建立连接还须要借助还有一种server（称为STUN server）实现NAT/Firewall穿越，由于非常多peer是处于私有局域网中，使用私有IP地址，必须转换为公有IP地址才干相互之间数据传输。这当中涉及到一些专业术语包含STUN、TURN、ICE等，详细的本人还有待学习。网上找到的WebRTC demo好象都用的是Google提供的STUN server。
peer跟peer之间一旦建立连接就能够直接传输音视频数据流，并不须要借助第三方server中转。
2. WebRTC封装库
WebRTC的目的是为了简化基于浏览器的实时数据通信的开发工作量，但实际应用编程还是有点复杂，尤其调用RTCPeerConnection必须对怎样建立连接、交换信令的流程和细节有较深入的理解。因此有高人为我们开发了WebRTC封装库，将WebRTC的调用细节封装起来，包装成更简单的API，使开发应用程序更简单。封装库的还有一个目的是为了屏蔽不同浏览器之间的差异，比如上面说的API名称的差异。当然，这些库都是开源的，能够依据自己的须要又一次改动。
眼下网上找到的有两种WebRTC封装库，一个是webrtc.io，网址是https://github.com/webRTC/webRTC.io，上面有具体说明和用法，有非常多demo使用它；还有一个是SimpleWebRTC，网址是https://github.com/HenrikJoreteg/SimpleWebRTC，貌似比webrtc.io用起来更简单。
3. WebRTC
demo试用
网上能够找到一堆WebRTC demo，在code.google.com上也能找到不少WebRTC应用项目的源代码。有些demo是直接调用WebRTC API开发的，但大多数是调用上述两种WebRTC封装库开发的。因为WebRTC API的名称在不同浏览器及同一浏览器的不同版本号之间存在差异，所以不是全部demo都能执行在全部浏览器上。
为了找到一个可在公司局域网环境中跑在手机上的WebRTC demo，本人试用了不少demo，以下选几个有代表性的介绍，当中有两个经改动后已在本人公司的局域网环境中执行成功。
先说一下本人的測试环境：手机上的浏览器是Chrome for Android 26.0.1410.49，执行在Android 4.1.2上，这个Chrome版本号本身是beta版，支持WebRTC但缺省是关闭WebRTC功能的，须要在chrome://flags中使能WebRTC并重新启动Chrome，或者在启动Chrome时添加�命令行选项--enable-webrtc。本人在PC上执行WebRTC的浏览器是Chrome 26.0.1410.43，操作系统是Windows 7。
3.1 http://www.webrtc.org/demo（https://apprtc.appspot.com/）
这是官方的demo，功能非常全，可惜不知为何https://apprtc.appspot.com/这个网址已经连不上了，只是其源代码还是能够下载到的，在https://code.google.com/p/webrtc-samples/。此demo没实用不论什么封装库。
这个demo所使用的信令机制使用了XHR和Google App Engine Channel API ，详细我不懂。
在我的公司局域网环境里无法执行该demo。
3.2 爱立信实验室开发的WebRTC
demo
据说是第一个基于浏览器的WebRTC视频通信demo，爱立信为此还开发了一个浏览器用于支持WebRTC，好象也是基于WebKit的，叫做Bowser browser（当时市场上可能还没有支持WebRTC的浏览器），该项目网址是https://labs.ericsson.com/apps/bowser。这个Bowser browser好象仅仅支持Ubuntu 11.04 and 11.10（见https://labs.ericsson.com/apis/web-real-time-communication/downloads）。
该demo的网址是http://webrtc.labs.ericsson.net:8082。
在我的公司局域网环境里无法执行该demo。
3.3 人脸检測识别
利用WebRTC的getUserMedia从摄像头获取图像进行人脸识别的demo，比如这两个：
http://neave.com/webcam/html5/face/
http://www.raymondcamden.com/demos/2012/mar/29/test1.html
这两个demo在PC和手机上的Chrome上都可执行。
3.4 http://www.simpl.info
这个demo演示HTML, CSS and JavaScript的各种feature和用法，包含WebRTC的3个API：getUserMedia、RTCPeerConnection、RTCDataChannel的演示，但遗憾的是RTCPeerConnection的演示仅仅是本地camera的画面传回给本地，并没有实现真正的设备之间音视频通信。
该项目的源代码在https://github.com/samdutton/simpl。
3.5 Framegrabber
这是一个基于WebRTC实现屏幕共享（screensharing）的Chrome扩展，源代码在https://github.com/samdutton/rtcshare，有关介绍可參考这篇文章：http://blog.sina.com.cn/s/blog_51396f890102es7k.html。
本人没有试用过。
3.6 http://webrtc.dennis.is
这个demo是基于库webrtc.io实现的，是webrtc.io官方的demo，使用WebSocket作为信令手段。
在我的公司局域网环境里无法执行该demo；在家里无线路由器环境下可成功执行，但仅仅能单向传输视频。
3.7 http://v.kainy.cn
国内牛人做的，相当于是汉化版的http://webrtc.dennis.is，自然也是基于webrtc.io实现的，但使用的webrtc.io版本号较老，不支持新版本号Chrome所使用的API名称webkitRTCPeerConnection，所以无法在新版本号Chrome上执行。详细介绍在http://blog.kainy.cn/2013/01/webrtc实现的视频聊天室应用/。
3.8 http://conversat.io
这个demo是基于库SimpleWebRTC实现的，是SimpleWebRTC官方的demo，使用WebSocket作为信令手段。
在我的公司局域网环境里无法执行该demo；在家里无线路由器环境下可成功执行，且可双向传视频，支持多个peer同一时候视频通信。
经改动后在本人公司局域网成功执行，试过两个手机和一个笔记本电脑同一时候视频通信OK。改动和执行步骤：
1.
2.
npm install express
npm install yetify
npm install getconfig
npm install node-uuid
npm install socket.io
3.
4.
5.
3.9 国内牛人开发的视频聊天室应用
这个demo是国内牛人赵书剑开发的视频聊天室，基于webrtc.io实现。
该项目源代码和文档下载地址是http://ishare.iask.sina.com.cn/f/35083616.html，源代码在https://github.com/zsj2145676。
经改动后在本人公司局域网成功执行，试过两个手机和一个笔记本电脑同一时候视频通信OK。改动和执行步骤：
1.
2.
3.
4.
转自：http://blog.sina.com.cn/s/blog_69a04cf401016gz4.html
本人使用3.8在本地调试执行成功。
