WebRTC 充分運用 Firefox、Android 和 iOS

過去幾週,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 支援 mozGetUserMediamozRTCPeerConnectionDataChannel (但別忘了設定 about:config 偏好設定!)

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

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 回報任何遇到的錯誤!