WebRTC 充分運用 Firefox、Android 和 iOS

過去幾週內,WebRTC 發生失敗。請更新應用程式!

尤其我們非常高興看到 WebRTC 導入多個瀏覽器和平台。

getUserMedia 現在已可在 Chrome 中使用,且沒有旗標、Opera 和 Firefox Nightly/Aurora (在 Firefox 中,您必須設定喜好)。前往 simpl.info/gum 查看 getUserMedia 的跨瀏覽器示範,並參閱 Chris Wilson 關於使用 getUserMedia 做為網路音訊輸入內容的實用範例

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 快。

DataChannel 預計會在 Chrome 25 版中推出,並加上旗標,但可能會錯過這個版本。這僅供實驗測試之用,可能沒有完全正常運作,且無法透過 Firefox 安裝。較新版本的 DataChannel 應該更加穩定,且將會導入,以便在 Firefox 中與 DataChannel 進行互動。

Firefox Nightly/Aurora 支援 mozGetUserMediamozRTCPeerConnectionDataChannel (別忘了調整 about:config 偏好設定!)

以下是在 Firefox 中執行 DataChannel 的螢幕截圖:

Firefox DataChannel 螢幕擷取畫面

本示範位於 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 中回報錯誤!