? ? ? 注：我昨天剛發了一篇[關于WebRTC的文章](http://blog.csdn.net/hfahe/article/details/8445000)，但是WebRTC的變化如此之大，讓我不得不再用一篇文章的篇幅從另外一個方面詳細闡述它帶給我們的變化。Firefox、Opera、Android、iOS平臺的廣泛支持會讓它可以立即落地，實現很多有趣的視頻功能和應用。你準備好使用它了嗎？ ? ? ??關鍵詞：視頻?[RTCPeerConnection](http://updates.html5rocks.com/tag/rtcpeerconnection)?[getUserMedia](http://updates.html5rocks.com/tag/getusermedia) WebRTC 多媒體 ? ? ? -------- ? ? ??WebRTC在過去的幾周內發生了**很多事情**，有一個重大的更新。 ? ? ??特別是我們很高興地看到多個瀏覽器和平臺開始支持WebRTC。 ? ? ??getUserMedia目前可以在Chrome瀏覽器中直接使用，此外還有Opera、Firefox Nightly構建版、Aurora瀏覽器（盡管在Firefox中需要[設置首選項](https://hacks.mozilla.org/2012/11/progress-update-on-webrtc-for-firefox-on-desktop/comment-page-1/#comment-1851192 "Firefox在桌面上WebRTC的最新進展")）。可以看一看[simpl.info/gum](http://www.simpl.info/gum "Simple cross-platform getUserMedia demo")上getUserMedia跨瀏覽器的演示，以及Chris Wilson使用getUserMedia來進行網絡音頻輸入的[驚人演示](http://webaudiodemos.appspot.com/)。 ? ? ??Chrome穩定版已經支持webkitRTCPeerConnection，并且無須在about:flgas里設置。Chrome24及以上版本已經支持TURN服務器（TURN協議允許NAT或者[防火墻](http://baike.baidu.com/view/3067.htm)后面的對象可以通過TCP或者UDP接收到數據。這在使用了對稱式的NAT或者防火墻的網絡中尤其具有實用價值）。在[simpl.info/pc](http://www.simpl.info/peerconnection "Simple cross-platform getUserMedia demo")上有一個Chrome RTCPeerConnection非常簡單的演示，以及在[apprtc.appspot.com](http://updates.html5rocks.com/2012/12/apprtc.appspot.com "Video chat demo")上有一個超棒的視頻聊天應用。（關于命名的解釋：經過幾次迭代，目前API的命名為webkitRTCPeerConnection。其他名稱及實現已被廢棄。當W3C標準已經穩定時，webkit前綴將被刪除。） ? ? ??桌面版Firefox Nightly和Aurora瀏覽器也已經支持WebRTC，而在iOS和Android上可以通過[愛立信Bowser瀏覽器](https://labs.ericsson.com/apps/bowser "愛立信庫巴瀏覽器")支持。  ? ? ??**DATACHANNEL** ? ? ??[DataChannel](http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-datachannel "HTML5Rocks文章的DataChannel章節")是用于任意數據高性能、低延時、點對點通信的WebRTC API。這個API非常簡單，類似于WebSocket，但是它的通信是直接發生在瀏覽器之間的，所以DataChannel的速度遠遠超過WebSocket，即便我們還需要一個中繼（TURN）服務器（用“TCP/UDP打孔”的方式來穿越防火墻和防止網絡地址轉換失敗）。 ? ? ??Chrome 25計劃支持DataChannel，需要通過about:flags激活-盡管它可能會錯過這個版本。這將僅用于實驗，可能不會充分發揮全部的作用，而且無法和Firefox進行通信。DataChannel在以后的版本中會更加穩定，并且可以和Firefox互通。 ? ? ??Firefox Nightly構建版和Aurora支持mozGetUserMedia、mozRTCPeerConnection和DataChannel（但是不要忘記在about:flags中設置參數！） ? ? ??在Firefox中運行DataChannel的截圖如下：  ? ? ??該演示URL為[http://mozilla.github.com/webrtc-landing/data_test.html](http://mozilla.github.com/webrtc-landing/data_test.html "Mozilla DataChannel的例子")。下面是代碼片斷： ~~~ pc1.onconnection = function() { log("pc1 onConnection "); dc1 = pc1.createDataChannel("This is pc1",{}); // reliable (TCP-like) dc1 = pc1.createDataChannel("This is pc1",{outOfOrderAllowed: true, maxRetransmitNum: 0}); // unreliable (UDP-like) log("pc1 created channel " + dc1 + " binarytype = " + dc1.binaryType); channel = dc1; channel.binaryType = "blob"; log("pc1 new binarytype = " + dc1.binaryType); // Since we create the datachannel, don't wait for onDataChannel! channel.onmessage = function(evt) { if (evt.data instanceof Blob) { fancy_log("***pc2 sent Blob: " + evt.data + ", length=" + evt.data.size,"blue"); } else { fancy_log('pc2 said: ' + evt.data, "blue"); } } channel.onopen = function() { log("pc1 onopen fired for " + channel); channel.send("pc1 says Hello..."); log("pc1 state: " + channel.state); } channel.onclose = function() { log("pc1 onclose fired"); }; log("pc1 state:" + channel.readyState); } ~~~ ? ? ??[hacks.mozilla.org博客](https://hacks.mozilla.org/2012/11/progress-update-on-webrtc-for-firefox-on-desktop/comment-page-1/#comment-1851192)上有更多Firefox實現的信息和演示。2013年初Firefox 18將會提供WebRTC基礎功能的支持，并且附加功能在支持計劃中，包括getUserMedia和createOffer/應答限制，以及TURN（允許瀏覽器在防火墻后進行互相通信）。 ? ? ??WebRTC的更多信息，請參閱[WebRTC入門](http://www.html5rocks.com/en/tutorials/webrtc/basics/)。這里甚至還有一本正在印刷中的[WebRTC書籍](http://webrtcbook.com/)，目前以電子書格式提供。 ? ? ??**分辨率限制** ? ? ??Chrome 24及??以上版本已經實現了[分辨率限制](http://tools.ietf.org/html/draft-alvestrand-constraints-resolution-00#page-4)功能。它可用于為getUserMedia()和RTCPeerConnection的addStream()調用設置視頻的分辨率。 ? ? ??在[simpl.info/getusermedia/constraints](http://simpl.info/getusermedia/constraints/index.html "Resolution Constraints example on simpl.info")上有一個示例，通過設置一個斷點和改變參數值展示不同的限制，。 ? ? ??這里有幾個陷阱。在一個瀏覽器標簽中設置getUserMedia的分辨率限制會影響所有的標簽。設置不允許限制分辨率會出現一個非常奇怪的錯誤信息： ~~~ navigator.getUserMedia error: NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1} ~~~ ? ? ??如果你在本地而不是服務器上使用getUserMedia，會出現和上面一樣的錯誤。 ? ? ??**流式屏幕捕獲** ? ? ??[Chrome開發版](https://developer.chrome.com/trunk/extensions/tabCapture.html)已經支持標簽捕獲。因此我們可以從標簽中捕獲一個可視區域，作為視頻流用于本地或者RTCPeerConnection的addStream()。這對屏幕捕獲和網頁共享非常有用（《[使用WebRTC實現遠程屏幕共享](http://blog.csdn.net/hfahe/article/details/8445000)》這篇文章正是講到這方面的內容）。要了解更多信息，請參閱[WebRTC標簽內容捕獲建議](http://www.chromium.org/developers/design-documents/extensions/proposed-changes/apis-under-development/webrtc-tab-content-capture "WebRTC選項卡的內容捕獲建議")。 ? ? ? 譯自：http://updates.html5rocks.com/2012/12/WebRTC-hits-Firefox-Android-and-iOS ? ? ? 轉載請注明：來自蔣宇捷的博客-http://blog.csdn.net/hfahe