初探WebRTC

本文同步自我得博客:http://www.joeray61.comhtml

簡介

WebRTC is a new front in the long war for an open and unencumbered web.html5

這句話是JavaScript之父Brendan Eich對於WebRTC的評價,大體意思是『WebRTC是爭取開放和無阻礙Web的漫長戰爭中一條新戰線』。web

WebRTC

那麼WebRTC究竟是一種什麼樣的技術呢?WebRTC是一個免費的開放項目,提供了幾個簡單的API讓瀏覽器、手機平臺還有其餘設備經過一個通用的協議進行實時通訊,幫助開發者開發出豐富並且高質量的跨平臺實時通訊應用。瀏覽器

本文的目的就是經過簡潔的介紹和引導讓開發者瞭解WebRTC的工做流程並可以快速上手開發WebRTC應用。服務器

API

  • MediaStream(getUserMedia) 網絡

    MediaStream表示一段多媒體流,獲取多媒體流的一個簡單方式就是經過 getUserMedia函數,該函數能夠調用設備的攝像頭和麥克風,並拿到這些硬件生成的多媒體流。這些多媒體流能夠輸出到video標籤或者一個RTCPeerConnectionsession

    getUserMedia接受3個參數:架構

    1. 一個限制對象,用於指定接受的流框架

    2. 獲取stream成功後的回調函數,被調用時能獲取到對應的流ide

    3. 獲取stream失敗後的回調函數,被調用時能獲取到一個錯誤對象

    具體用法以下所示:

    var getUserMedia = navigator.getUserMedia || 
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia;
    var constraints = {video: true};
    getUserMedia(constraints, function (stream) {
        var video = document.querySelector("video");
        //URL.createObjectURL方法把stream轉換成blob,做爲video的src屬性進行播放
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }, function (error) {
        console.log(error);
    });
  • RTCPeerConnection

    WebRTC Diagram

這是WebRTC的架構圖,看完這張圖,我表示徹底不懂這是什麼鬼,太複雜了。不過不懂不要緊,RTCPeerConnection已經幫咱們作了不少事情,咱們只須要把RTCPeerConnection理解成一種p2p傳輸音視頻數據的通道,可是咱們仍然還須要服務器來爲咱們傳遞消息,由於在創建p2p以前須要先互相交換session、網絡配置、媒體適配等信息。另外,WebRTC還須要服務器幫助完成NAT穿越,以及在p2p創建失敗的時候做爲中轉服務器。具體用法將在流程講解中說明。

  • RTCDataChannel

    WebRTC除了支持視頻和音頻流以外,還支持其餘類型的數據。RTCDataChannel用於點到點的任意數據交換,具備低延遲和高吞吐量的特色。RTCDataChannel必須創建在RTCPeerConnnection之上,沒辦法單獨工做。

    這個API潛在的應用場景不少,例如:

    • 遊戲

    • 遠程桌面應用

    • 實時文字聊天

    • 文件傳輸

    建立一個RTCDataChannel的方式以下:

    var RTCPeerConnection = webkitRTCPeerConnection || mozRTCPeerConnection;
    var peerConn = new RTCPeerConnection();
    var dc = peerConn.createDataChannel("label");

流程講解

看完上面的內容,你們應該仍是處於雲裏霧裏的狀態,不知道WebRTC應用要如何開發,3個API如何配合使用。不要緊,這裏纔是重點,看完這一段,相信你的全部疑惑就都解開了。

要用WebRTC創建一個p2p通道須要經歷2個步驟:

  1. 得到本機SDP描述符並交換

    • A、B均實例化一個RTCPeerConnection(如下簡稱rpcA和rpcB),調用rpcA的createOffer()方法創建一個offer信令,而且拿到A的SDP

    • 經過rpcA的setLocalDescription()方法設置A機器的本地描述

    • A經過服務器將offer信令發給B

    • B接收到A的offer信令,經過rpcB的setRemoteDescription()方法設置遠程機器(即A)的描述

    • B調用rpcB的createAnswer()方法創建一個answer信令,而且拿到B的SDP

    • 經過rpcB的setLocalDescription()方法設置B機器的本地描述

    • B經過服務器將answer信令發送給A

    • A接收到B的answer信令,經過rpcA的setRemoteDescription()方法設置遠程機器B的描述

    這個過程完成後,A和B就都拿到各自的SDP描述符了

  2. 經過ICE框架鏈接兩段主機的網絡地址

    ICE框架具體內容我不清楚,我們姑且先了解在WebRTC中如何使用,對ICE感興趣的同窗能夠自行谷歌。

    在實例化RTCPeerConnection對象的時候能夠傳入ICE服務器的地址,咱們可使用谷歌提供的『stun:stun.l.google.com:19302』或者Mozilla提供的『stun:stun.services.mozilla.com』,代碼以下:

    var configuration = {iceServers: [{url: "stun:stun.l.google.com:19302"}]};
    var rpc = new RTCPeerConnection(configuration);

    在rpc上綁定onicecandidate事件的回調函數,當網絡候選可用時這個函數會被調用,在這個回調函數中,本機能夠拿到ice candidate信令,而後經過服務器發給遠程機器,遠程機器經過本身的rpc實例的addIceCandidate()方法添加,一樣地,遠程機器也應該將本身的ice candidate信令經過服務器發送給本機。

    當雙方的ice candidate交換完成時,鏈接就創建成功了,能夠在rpc示例上調用addStream()來添加流,另外一邊經過綁定onaddstream事件就能夠獲取到傳過去的流。

    服務器通訊部分,沒有規定必需要用某種協議,因此只要能在兩邊傳輸消息的技術可使用,例如WebSocketXHR等,你們自行選擇便可。

示例

原本想本身寫個例子給你們參考的,後來發現網上有個很是棒的實例教程,我就直接上地址了https://bitbucket.org/webrtc/codelab

小結

寫這篇文章的目的是爲了讓學習WebRTC的同窗可以快速上手,對WebRTC技術有個總體的概念,因此文章寫的比較簡短,專一於講解WebRTC的運做流程,對一些相關技術,好比ICE、SDP等沒有深刻探討(固然我也不太懂)。若是你想快速上手製做WebRTC應用,看完這篇文章再對着codelab提供的例子一步一步跟着作應該就沒問題了。Good luck!

參考資料

相關文章
相關標籤/搜索