過去幾週,WebRTC 發生了許多重大變化。請更新應用程式!
我們特別期待 WebRTC 在多個瀏覽器和平台上推出。
getUserMedia
現在已可在 Chrome 中使用,且無需標記,也適用於 Opera 和 Firefox Nightly/Aurora (不過,您需要設定偏好設定才能在 Firefox 中使用)。請前往 simpl.info/gum 查看 getUserMedia
的跨瀏覽器示範,並參考 Chris Wilson 的精彩範例,瞭解如何將 getUserMedia
用於 Web Audio 的輸入內容。
webkitRTCPeerConnection
現已在 Chrome 穩定版中,且沒有標記。Chrome 24 以上版本支援 TURN 伺服器。在 simpl.info/pc 中,您可以找到 Chrome 的 RTCPeerConnection 實作方式的超簡單示範,而 apprtc.appspot.com 則提供優質的視訊通訊應用程式。關於名稱,我們想說明一下:經過多次迭代後,目前名稱為 webkitRTCPeerConnection
。其他名稱和實作方式已淘汰。標準程序穩定後,我們會移除 webkit
前置字元)。
WebRTC 也已在 Firefox Nightly 和 Aurora 的電腦版中實作,並透過 Ericsson Bowser 瀏覽器在 iOS 和 Android 上實作。
DataChannel
DataChannel 是 WebRTC API,可用於高效能、低延遲的對等端通訊,用於傳送任意資料。這個 API 與 WebSocket 類似,但通訊是直接在瀏覽器之間進行,因此即使需要中繼 (TURN) 伺服器 (當「洞探」無法處理防火牆和 NAT 時),DataChannel 的速度仍可比 WebSocket 快上許多。
我們預計在 Chrome 25 版中提供 DataChannel,但會在標記後方提供,不過可能會錯過這個版本。這項功能僅供實驗,可能無法完全運作,而且無法透過 Firefox 實作。後續版本的 DataChannel 應更穩定,並會實作以便在 Firefox 中與 DataChannel 互動。
Firefox Nightly/Aurora 支援 mozGetUserMedia
、mozRTCPeerConnection
和 DataChannel
(但別忘了設定 about:config 偏好設定!)
以下是 DataChannel 在 Firefox 中執行的螢幕截圖:

這個示範位於 http://mozilla.github.com/webrtc-landing/data_test.html。以下是程式碼片段:
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);
}
如需 Firefox 導入方式的更多資訊和示範,請前往 hacks.mozilla.org 網誌。基本 WebRTC 支援功能預計在 2013 年初的 Firefox 18 版本中推出,我們也預計支援其他功能,包括 getUserMedia
和 createOffer/Answer 限制,以及 TURN (可讓防火牆後方的瀏覽器進行通訊)。
如要進一步瞭解 WebRTC,請參閱「開始使用 WebRTC」一文。甚至還有 WebRTC 書籍,可提供平裝書和多種電子書格式。
解析度限制
Chrome 24 以上版本已實作限制條件。這些值可用於設定 getUserMedia()
和 RTCPeerConnection addStream()
呼叫的影片解析度值。
請參閱 simpl.info/getusermedia/constraints 中的範例。設定中斷點並調整值,嘗試不同的限制。
幾個注意事項... 在一個瀏覽器分頁中設定的 getUserMedia
限制會影響後續開啟的所有分頁限制。設定限制條件中不允許的值會顯示相當難解的錯誤訊息:
navigator.getUserMedia error: NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}
同樣地,如果您嘗試在本機檔案系統 (而非伺服器) 中使用 getUserMedia
,也會發生錯誤!
串流螢幕擷取
分頁擷取功能現已在 Chrome 開發人員版推出。這樣一來,您就能將分頁的可見區域擷取為串流,然後在本機或使用 RTCPeerConnection 的 addStream()
使用這項串流。非常適合用於投放螢幕畫面和分享網頁。詳情請參閱 WebRTC 分頁內容擷取提案。
歡迎在本篇文章的留言中告訴我們您如何使用這些 API,我們很樂意聽取您的意見。
...別忘了在 chromiumbugs.appspot.com 回報任何遇到的錯誤!