【graceup系列】--WebRTC

webrtc_java视频通话系统

效果图：

1.     基本介绍：

WebRTC，名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的技术。

WebRTC项目的最终目的主要是让Web开发者能够基于浏览器（Chrome\FireFox\...）轻易快捷开发出丰富的实时多媒体应用，而无需下载安装任何插件，Web开发者也无需关注多媒体的数字信号处理过程，只需编写简单的Javascript程序即可实现，W3C等组织正在制定Javascript标准API，；另外WebRTC还希望能够建立一个多互联网浏览器间健壮的实时通信的平台，形成开发者与浏览器厂商良好的生态环境。同时，Google也希望和致力于让WebRTC的技术成为HTML5标准之一，可见Google布局之深远。

       WebRTC提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。

       WebRTC是一项在浏览器内部进行实时视频和音频通信的技术，是谷歌2010年以6820万美元收购Global IP Solutions公司而获得一项技术.

        谷歌2011年6月3日宣布向开发人员开放WebRTC架构的源代码。这个源代码将根据没有专利费的BSD（伯克利软件发布）式的许可证向用户提供。目前，开发人员可访问并获取WebRTC的源代码、规格说明和工具等。

       Google希望开源的WebRTC技术能够获得越来越多的浏览器厂商支持，WebRTC的网站已经宣布将在Chrome、Firefox和Opera上实现相应的API接口。Google能够把价值不菲的代码贡献出来非常了不起。

        目前有关Web实时通信的技术标准正在制定当中，W3C的Web Real-Time Communication工作组在May 2011成立，

        W3C的最新标准见http://dev.w3.org/2011/webrtc/editor/webrtc.html

WebRTC实现了基于网页的视频会议，标准是WHATWG协议，目的是通过浏览器提供简单的javascript就可以达到实时通讯（Real-Time Communications (RTC)）能力。

2.     WebRTC开发方向

目前基于WebRTC的开发其实有两个方向，一个是基于浏览器的WebRTC应用开发，编程语言主要是JavaScript、HTML等，这也是WebRTC作为HTML5标准的组成部分原本的目的；另一个是C层面的移植和开发，作为一款非常强大的开源软件，很多领域的软件项目都可以利用到WebRTC的音视频通信和处理能力，这些场合的应用程序可能是C语言写的，也不一定与浏览器有关。本文是属于前一种方向。

3.     WebRTC架构图

 

      

架构图颜色标识说明：

（1）紫色部分是Web开发者API层；

（2）蓝色实线部分是面向浏览器厂商的API层

（3）蓝色虚线部分浏览器厂商可以自定义实现

 

       Web API——第三方开发人员用来开发基于Web的应用，如视频聊天。

       WebRTC Native C++ API——浏览器厂商用于实现Web API的函数集。

       Session Management——抽象session层，支持调用构建和管理层，由应用开发者来决定如何实现协议。

       VoiceEngine——音频媒体链的框架，从声卡到网络。

       iSAC——一种用于VoIP和流音频的宽带和超宽带音频编解码器，iSAC采用16 kHz或32 kHz的采样频率和12—52 kbps的可变比特率。

       iLBC——用于VoIP和流音频的窄带语音编解码器，使用8 kHZ的采样频率，20毫秒帧比特率为15.2 kbps，30毫米帧的比特率为13.33 kbps，标准由IETF RFC 3951和3952定义。

       NetEQ for Voice——动态抖动缓存和错误隐藏算法，用于缓解网络抖动和丢包引起的负面影响。在保持高音频质量的同时尽可能降低延迟。

       VideoEngine——视频媒体链的框架，从相机像头到网络，从网络到屏幕。

       VP8——来自于WebM项目的视频编解码器，非常适合RTC，因为它是为低延迟而设计开发的。

       Image enhancements——消除通过摄像头获取的图片的视频噪声等。

4.      WebRTC基本概念学习

对浏览器来说，WebRTC其实就是提供了3个API：

MediaStream (即getUserMedia)，用于获取媒体数据，例如来自摄像头和麦克风的视频流和音频流；

RTCPeerConnection，用于peer跟peer之间呼叫和建立连接以便传输音视频数据流；

RTCDataChannel，用于peer跟peer之间传输音视频之外的一般数据。

需要注意的是这几个API的名称在不同浏览器及同一浏览器的不同版本之间略有差异，比如PeerConnection在FireFox上叫做mozRTCPeerConnection，而在当前版本的Chrome上叫做webkitRTCPeerConnection，将来WebRTC标准化完成后会把这些前缀去掉使用统一的名称。

WebRTC是实现peer to peer的实时通信（可以两个或多个peer之间），在能够通信前peer跟peer之间必须建立连接，这是RTCPeerConnection的任务，为此需要借助一个信令服务器（signalingserver）来进行，信令包括3种类型的信息：

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

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

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

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

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

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

5.      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用起来更简单。

6.     WebRTC的各种应用场景

 

 

 

 

            Jingle(XMPP)

 

 

 

这种媒体流连接如何混音？如果在终端上混音，如何支持多达几十方的会议?

 

 

 

Signalling: make me an offer

1. Caller sends offer.

2. Callee receives offer.

3. Callee sends answer.

4. Caller receives answer.

 

Signalling: find me a candidate

1. Caller creates RTCPeerConnection object.

2. If success, callback passedIceCandidate.

3. Callee sends IceCandidate to callee.

4. Callee creates a new remoteIceCandidate, adds to remote description.

5. Ping!

 

 

REST

 

 

 

正如Google所说的，它一直在参与制定和实现HTML 5标准中的视频会议和p2p通信部分，虽然还不是正式标准，但是我们可以从草案的示例中看到未来Web开发人员的使用情况：

 

// the first argument describes theSTUN/TURN server configuration

       var local = new PeerConnection('TURNS example.net', sendSignalingChannel);

       local.signalingChannel(...); // if we have a message from the other side, passit along here

       // (aLocalStream is some GeneratedStream object)

       local.addStream(aLocalStream); // start sending video

       function sendSignalingChannel(message) {

        ... // send message to the other side via the signaling channel

       }

       function receiveSignalingChannel (message) {

        // call this whenever we get a message on the signaling channel

        local.signalingChannel(message);

       }

       local.onaddstream = function (event) {

        // (videoElement is some <video> element)

        videoElement.src = URL.getObjectURL(event.stream);

       };

 

7.     HTTP->WebRTC演进路径

 HTTP(Pre AJAX):原始web，一页里发送请求后才返回另一页，如Geocities

 AJAX(2004)：更新页面不需要刷新.如GMail.

  Web Sockets(2008)：页面能建立双向通信（通过服务器中介)，如Trello。

 WebRTC(2012)：页面之间的通信。

8.     相关网址

     W3C的最新标准见http://dev.w3.org/2011/webrtc/editor/webrtc.html

WebRTC的官方资料可以从其官网http://www.webrtc.org/和W3C网站http://www.w3.org/TR/webrtc/上看到。

学习WebRTC基础知识比较好的网站是《Getting Started with WebRTC》，网址是http://www.html5rocks.com/en/tutorials/webrtc/basics/，这个也是官网上推荐的。

 百度百科：http://baike.baidu.com/view/5855785.htm（介绍webRTC用到的名称，对理解webRTC很有帮助）。

 

简单API：https://hacks.mozilla.org/2013/07/webrtc-and-the-early-api/

 

在线例子：http://www.webrtc-experiment.com/

http://www.simpl.info/rtcpeerconnection/

http://www.simpl.info/getusermedia/

https://talky.io/

9.     总结：

WebRTC目前只支持实现一对一的交流,介绍说可以用于更复杂的网络场景:例如,与多个同行每个直接相互通信,对等,或服务器可以处理大量的参与者和选择性流转发,和混合或录音的音频和视频。

就目前提供的API没有实现一对多的内容。所以说要实现多人同时视频对话，也就是每个用户要两两连接。例如：10个同时视频对话，那么在每个用户的机器上就要开启10个端口用于发送自己视频流，同时也要开启10个端口接收视频流，还10个发送音频流，10个接收音频流。这需要巨大的带宽和CPU。