转:webrtc学习笔记

WebRTC学习笔记 (2013-04-12 15:49:42)转载▼ 标签： webrtc html5 chrome android it 分类： 嵌入式软件技术 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/%E5%92%8CW 3C网站http://www.w3.org/TR/webrtc/%E4%B8%8A%E7%9C%8B%E5%88%B0%E3%80%82

学习WebRTC基础知识比较好的网站是《Getting Started with WebRTC》，网址是http://www.html5rocks.com/en/tutorials/webrtc/basics/%EF%BC%8C%E8%BF%99%E4%B8%AA%E4%B9%9F%E6%98%AF%E5%AE%98%E7%BD%91%E4%B8%8A%E6%8E%A8%E8%8D%90%E7%9A%84%E3%80%82

对浏览器来说，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的任务，为此需要借助一个信令服务器（signaling server）来进行，信令包括3种类型的信息：

Session control messages: 初始化和关闭通信，及报告错误；

Network configuration: 双方的IP地址和端口号（局域网内部IP地址需转换为外部的IP地址）；

Media capabilities: 双方的浏览器支持使用何种codecs以及多高的视频分辨率。

WebRTC并未规定使用何种信令机制和消息协议，象SIP、XMPP、XHR、WebSocket这些技术都可以用作WebRTC的信令通信。

除了信令服务器，peer跟peer建立连接还需要借助另一种服务器（称为STUN server）实现NAT/Firewall穿越，因为很多peer是处于私有局域网中，使用私有IP地址，必须转换为公有IP地址才能相互之间传输数据。这其中涉及到一些专业术语包括STUN、TURN、ICE等，具体的本人还有待学习。网上找到的WebRTC demo好象都用的是Google提供的STUN server。

peer跟peer之间一旦建立连接就可以直接传输音视频数据流，并不需要借助第三方服务器中转。

  1. WebRTC封装库 WebRTC的目的是为了简化基于浏览器的实时数据通信的开发工作量，但实际应用编程还是有点复杂，尤其调用RTCPeerConnection必须对如何建立连接、交换信令的流程和细节有较深入的理解。因此有高人为我们开发了WebRTC封装库，将WebRTC的调用细节封装起来，包装成更简单的API，使开发应用程序更简单。封装库的另一个目的是为了屏蔽不同浏览器之间的差异，例如上面说的API名称的差异。当然，这些库都是开源的，可以根据自己的需要重新修改。

目前网上找到的有两种WebRTC封装库，一个是webrtc.io，网址是https://github.com/webRTC/webRTC.io%EF%BC%8C%E4%B8%8A%E9%9D%A2%E6%9C%89%E8%AF%A6%E7%BB%86%E8%AF%B4%E6%98%8E%E5%92%8C%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%EF%BC%8C%E6%9C%89%E5%BE%88%E5%A4%9Ademo%E4%BD%BF%E7%94%A8%E5%AE%83%EF%BC%9B%E5%8F%A6%E4%B8%80%E4%B8%AA%E6%98%AFSimpleWebRTC%EF%BC%8C%E7%BD%91%E5%9D%80%E6%98%AFhttps://github.com/HenrikJoreteg/SimpleWebRTC%EF%BC%8C%E8%B2%8C%E4%BC%BC%E6%AF%94webrtc.io%E7%94%A8%E8%B5%B7%E6%9D%A5%E6%9B%B4%E7%AE%80%E5%8D%95%E3%80%82

  1. 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%EF%BC%88https://apprtc.appspot.com/%EF%BC%89 这是官方的demo，功能很全，可惜不知为何https://apprtc.appspot.com/%E8%BF%99%E4%B8%AA%E7%BD%91%E5%9D%80%E5%B7%B2%E7%BB%8F%E8%BF%9E%E4%B8%8D%E4%B8%8A%E4%BA%86%EF%BC%8C%E4%B8%8D%E8%BF%87%E5%85%B6%E6%BA%90%E7%A0%81%E8%BF%98%E6%98%AF%E5%8F%AF%E4%BB%A5%E4%B8%8B%E8%BD%BD%E5%88%B0%E7%9A%84%EF%BC%8C%E5%9C%A8https://code.google.com/p/webrtc-samples/%E3%80%82%E6%AD%A4demo%E6%B2%A1%E6%9C%89%E7%94%A8%E4%BB%BB%E4%BD%95%E5%B0%81%E8%A3%85%E5%BA%93%E3%80%82

这个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%E3%80%82%E8%BF%99%E4%B8%AABowser browser好象只支持Ubuntu 11.04 and 11.10（见https://labs.ericsson.com/apis/web-real-time-communication/downloads%EF%BC%89%E3%80%82

该demo的网址是http://webrtc.labs.ericsson.net:8082%E3%80%82

在我的公司局域网环境里无法运行该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%E3%80%82

3.5 Framegrabber 这是一个基于WebRTC实现屏幕共享（screensharing）的Chrome扩展，源码在https://github.com/samdutton/rtcshare%EF%BC%8C%E6%9C%89%E5%85%B3%E4%BB%8B%E7%BB%8D%E5%8F%AF%E5%8F%82%E8%80%83%E8%BF%99%E7%AF%87%E6%96%87%E7%AB%A0%EF%BC%9Ahttp://blog.sina.com.cn/s/blog_51396f890102es7k.html%E3%80%82

本人没有试用过。

3.6 http://webrtc.dennis.is 这个demo是基于库webrtc.io实现的，是webrtc.io官方的demo，使用WebSocket作为信令手段。

在我的公司局域网环境里无法运行该demo；在家里无线路由器环境下可成功运行，但只能单向传输视频。

3.7 http://v.kainy.cn 国内牛人做的，相当于是汉化版的http://webrtc.dennis.is%EF%BC%8C%E8%87%AA%E7%84%B6%E4%B9%9F%E6%98%AF%E5%9F%BA%E4%BA%8Ewebrtc.io%E5%AE%9E%E7%8E%B0%E7%9A%84%EF%BC%8C%E4%BD%86%E4%BD%BF%E7%94%A8%E7%9A%84webrtc.io%E7%89%88%E6%9C%AC%E8%BE%83%E8%80%81%EF%BC%8C%E4%B8%8D%E6%94%AF%E6%8C%81%E6%96%B0%E7%89%88%E6%9C%ACChrome%E6%89%80%E4%BD%BF%E7%94%A8%E7%9A%84API%E5%90%8D%E7%A7%B0webkitRTCPeerConnection%EF%BC%8C%E6%89%80%E4%BB%A5%E6%97%A0%E6%B3%95%E5%9C%A8%E6%96%B0%E7%89%88%E6%9C%ACChrome%E4%B8%8A%E8%BF%90%E8%A1%8C%E3%80%82%E5%85%B7%E4%BD%93%E4%BB%8B%E7%BB%8D%E5%9C%A8http://blog.kainy.cn/2013/01/webrtc%E5%AE%9E%E7%8E%B0%E7%9A%84%E8%A7%86%E9%A2%91%E8%81%8A%E5%A4%A9%E5%AE%A4%E5%BA%94%E7%94%A8/%E3%80%82

3.8 http://conversat.io 这个demo是基于库SimpleWebRTC实现的，是SimpleWebRTC官方的demo，使用WebSocket作为信令手段。

在我的公司局域网环境里无法运行该demo；在家里无线路由器环境下可成功运行，且可双向传视频，支持多个peer同时视频通信。

经修改后在本人公司局域网成功运行，试过两个手机和一个笔记本电脑同时视频通信OK。修改和运行步骤：

  1. 从http://www.nodejs.org/download/%E4%B8%8B%E8%BD%BDnodejs%E6%9C%80%E6%96%B0%E7%89%88%E5%B9%B6%E5%AE%89%E8%A3%85%EF%BC%8C%E6%88%91%E6%98%AF%E5%9C%A8Windows7 64位上安装的；

  2. 在命令行下依次运行如下命令（安装运行signaling server所需的模块）：

npm install express npm install yetify npm install getconfig npm install node-uuid npm install socket.io

  1. 从https://github.com/andyet/signalmaster%E4%B8%8B%E8%BD%BD%E4%BF%A1%E4%BB%A4%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%BA%90%E7%A0%81%EF%BC%8C%E8%AF%A5%E4%BF%A1%E4%BB%A4%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%98%AFSimpleWebRTC%E7%BC%BA%E7%9C%81%E4%BD%BF%E7%94%A8%E7%9A%84%EF%BC%8C%E8%A7%A3%E5%BC%80%E8%AF%A5%E6%BA%90%E7%A0%81%E5%90%8E%E8%BF%90%E8%A1%8Cnode server.js，该服务器监听8888端口，通过WebSocket与浏览器通信。

  2. 在同一台PC上运行apache server，将从http://conversat.io%E7%BD%91%E7%AB%99%E6%89%92%E4%B8%8B%E6%9D%A5%E7%9A%84%E6%96%87%E4%BB%B6%E6%94%BE%E5%88%B0%E8%AF%A5server%E4%B8%8A%EF%BC%88%E5%8F%AF%E5%9C%A8Chrome%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E6%89%93%E5%BC%80http://conversat.io%E7%84%B6%E5%90%8E%E9%BC%A0%E6%A0%87%E5%8F%B3%E9%94%AE%E5%8D%95%E5%87%BB%E5%9C%A8%E8%8F%9C%E5%8D%95%E4%B8%AD%E9%80%89%E2%80%9C%E5%8F%A6%E5%AD%98%E4%B8%BA%E2%80%9D%E3%80%81%E2%80%9C%E7%BD%91%E9%A1%B5%EF%BC%8C%E5%85%A8%E9%83%A8%E2%80%9D%E5%8D%B3%E5%8F%AF%EF%BC%89%EF%BC%8C%E4%BF%AE%E6%94%B9%E5%85%B6%E4%B8%AD%E7%9A%84 index.html 和 simplewebrtc.js，将其中 url 改为 ‘http://10.100.156.83:8888‘（其中IP地址是我的PC在公司局域网中的IP地址）。

  3. 在同一局域网中的其他设备上打开Chrome浏览器，地址栏输入http://10.100.156.83%EF%BC%8C%E8%BE%93%E5%85%A5%E7%9B%B8%E5%90%8C%E7%9A%84room%E5%90%8D%E7%A7%B0%EF%BC%88%E9%9A%8F%E4%BE%BF%E8%B5%B7%EF%BC%89%E5%8D%B3%E5%8F%AF%E5%BC%80%E5%A7%8B%E5%A4%9A%E6%96%B9%E8%A7%86%E9%A2%91%E9%80%9A%E4%BF%A1%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BF%AE%E6%94%B9%E4%B8%8A%E8%BF%B0index.html%E4%B8%AD%E7%9A%84%E2%80%9Cvar room”一行，设定为固定的room名称，就不需要每次在每个设备上手工输入room名称了。

3.9 国内牛人开发的视频聊天室应用 这个demo是国内牛人赵书剑开发的视频聊天室，基于webrtc.io实现。

该项目源码和文档下载地址是http://ishare.iask.sina.com.cn/f/35083616.html%EF%BC%8C%E6%BA%90%E7%A0%81%E5%9C%A8https://github.com/zsj2145676%E3%80%82

经修改后在本人公司局域网成功运行，试过两个手机和一个笔记本电脑同时视频通信OK。修改和运行步骤：

  1. 从http://ishare.iask.sina.com.cn/f/35083616.html%E4%B8%8B%E8%BD%BDwebrtc.chatdemo.zip%EF%BC%8C%E8%A7%A3%E5%8E%8B%E7%BC%A9%EF%BC%8C%E4%BF%AE%E6%94%B9%E5%85%B6%E4%B8%ADpublic\javascripts\client.js%E4%B8%AD%E7%9A%84rtc.connect%E4%B8%80%E8%A1%8C%EF%BC%8C%E5%B0%86%E5%AE%9E%E9%99%85%E7%9A%84%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%9C%B0%E5%9D%80%E5%86%99%E8%BF%9B%E5%8E%BB%EF%BC%8C%E4%BE%8B%E5%A6%82%E6%94%B9%E4%B8%BA%EF%BC%9Artc.connect(“ws://10.100.156.83:8001”, room);

  2. 同上文3.8节步骤1、2安装nodejs

  3. 运行node app.js，注意该demo本身已包含http server，不需要其他的比如apache server

  4. 在同一局域网中的其他设备上打开Chrome浏览器，地址栏输入http://10.100.156.83:8000%EF%BC%8C%E8%BE%93%E5%85%A5%E7%9B%B8%E5%90%8C%E7%9A%84room%E5%90%8D%E7%A7%B0%EF%BC%88%E9%9A%8F%E4%BE%BF%E8%B5%B7%EF%BC%89%E5%8D%B3%E5%8F%AF%E5%BC%80%E5%A7%8B%E5%A4%9A%E6%96%B9%E8%A7%86%E9%A2%91%E9%80%9A%E4%BF%A1%E3%80%82

转自：http://blog.sina.com.cn/s/blog_69a04cf401016gz4.html