【WebRTC】網頁實時通訊

        WebRTC是HTML5的新特性之一，經過網頁瀏覽器便可進行實時語音對話或視頻對話的技術，無需添加任何插件。Web開發者只需搭建簡單的「信令服務器」和「stun服務器」，就可以基於瀏覽器輕易快捷開發出豐富的實時多媒體應用。

        WebRTC的數據流是居於瀏覽器與瀏覽器（點對點）之間的傳輸通信，不用經過服務器轉發。可是在瀏覽器與瀏覽器創建鏈接以前須要服務器來交換信令等鏈接信息。做爲一個Web開發者，須要創建一個信令服務器用於交換「會話描述協議(SDP)」和"交互鏈接候選地址(ICE Candidate)"。stun服務器則是用於穿透NAT創建鏈接，能夠直接使用Google的stun協議測試服務器：「stun:stun.l.google.com:19302」。

 

1、WebRTC的接口實現

WebRTC實現了三個API，分別是:

        * MediaStream：經過MediaStream的API可以經過設備的攝像頭及話筒得到視頻、音頻的同步流

        * RTCPeerConnection：RTCPeerConnection是WebRTC用於構建點對點之間穩定、高效的流傳輸的組件

        * RTCDataChannel：RTCDataChannel使得瀏覽器之間（點對點）創建一個高吞吐量、低延時的信道，用於傳輸任意數據

        這裏的MediaStream是前端js用於調用本地攝像頭的方法，而RTCPeerConnection是用於瀏覽器之間創建鏈接交換視頻音頻信息的通道。RTCDataChannel用於傳輸數據，使用node.js前端服務器開發會使用到，我並無使用，由於我的從事Java Web後臺開發，使用的是Ajax來傳輸數據。

 

2、WebRTC鏈接創建時序圖

 

3、WebRTC鏈接創建過程

        鏈接雙方，A方發起Offer，B方接收到Offer後發起Answer，A方接收Answer後創建鏈接成功。

Offer發起方：
        一、getUserMedia 獲取本地視頻流stream；
        二、new RTCPeerConnection(servers)創建鏈接並寫入本地視頻流;
（peerConnection.addStream(stream)）
        三、peerConnection建立Offer，將回調參數(desc.sdp)上傳到我的服務器，同時onicecandidate觸發，將回調參數(event.candidate)上傳到我的服務器；
（peer.createOffer(function(desc){...});peerConnection.onicecandidate=function(event){...};）
        四、響應Offer接收方的createAnswer方法，從我的服務器中獲取SDP設置爲遠程描述。雙方連通。

Offer接收方（Answer發起方）：
        一、getUserMedia 獲取本地視頻流stream；
        二、創建RTCPeerConnection鏈接並寫入本地視頻流；
（peerConnection.addStream(stream)）
        三、從我的服務器中獲取Offer發起方的SDP和candidate，設置到本地描述。調用createAnswer方法將回調參數(desc.sdp)上傳到我的服務器，同時onicecandidate觸發，將回調參數(event.candidate)上傳到我的服務器
（peerConnection.createAnswer(function(desc{...};peerConnection.onicecandidate=function(event){...};）；
        四、等待Offer發起方配置遠程描述後，雙方連通。

 

4、注意

1. 雙方創建鏈接須要先配置「會話描述協議(SDP)「，再配置"交互鏈接候選地址(ICE Candidate)"。
2. 只能一方發起Offer，另外一方請求Offer前不能發起Offer，不然視爲請求方不能發起Answer。
3. 雙方Peer連通後，就會觸發peerConnection.onaddstream方法，從回調方法中獲取視頻流。
4. RTCPeerConnection須要經過「stun服務器」來穿透NAT創建鏈接。
5. 舊的調用navigator.getUserMedia()已經改成 navigator.mediaDevices.getUserMedia()。

 

5、相關數據內容

1. Google的stun協議測試服務器：stun:stun.l.google.com:19302
2. SDP：會話描述協議(Session Description Protocal)
3. ICE：交互式連通創建方式(Interactive Connectivity Establishment)

 

6、信令服務器實例項目

    本項目源碼(GitHub)：https://github.com/alvinlovelife/WebRTCServer.git

 

7、參考內容

mozilla WebRTC API：https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API

WebRTC GitHub samples：https://github.com/webrtc/samples

WebRTC通信流程圖：http://blog.csdn.net/xyblog/article/details/50515031

WebRTC進階-信令、stun、turn、ICE：http://blog.csdn.net/fireroll/article/details/50780863

WebRTC 實例（node.js）：http://www.javashuo.com/article/p-eutyuhmu-gq.html

WebRTC實例（Java+WebSocket）：http://www.tuicool.com/articles/qmE3ii

WebRTC的官方實例：https://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-rtcpeerconnection