使用 WebRTC 進行螢幕分享

Sam Dutton

如同我們上週所報導，我們的老朋友 WebRTC 近期發生了許多變化。

好吧，我們再來介紹另一項功能：WebRTC 螢幕分享。

WebRTC 螢幕分享擴充功能的螢幕截圖，其中有 Jake Archibald、Peter Beverloo、Paul Lewis 和 Sam Dutton

以下是螢幕側錄：youtube.com/watch?v=tD0QtBUZsF4

以下是程式碼：github.com/samdutton/rtcshare

基本上，我們已建構一款實驗性 Chrome 擴充功能，使用 RTCPeerConnection 和 chrome.tabCapture 分享瀏覽器分頁的「影片」直播內容。如要試用，您需要使用 Chrome Canary，並在 about:flags 頁面中啟用實驗性擴充功能 API。

我們的原型設計大量仰賴強大的 appr.tc 示範，坦白說，這有點像是駭客攻擊！但... 這是概念驗證，而且運作正常。

我們做法如下：

  1. 當使用者按一下擴充功能圖示 (網址列旁的「錄製」按鈕) 時，擴充功能的背景指令碼 background.js 會在自身後方附加一個 iframe，其 src 為 rtcshare.appspot.com。在 background.js 中，這個 iframe 只用於取得 token 和 room_key 等值。我們告訴你這是一個駭客攻擊 :^}！這是 apprtc.appspot.com 的截斷和管道版本。與 apprtc 範例一樣，遠端用戶端也會使用 rtcshare.appspot.com。
chrome.browserAction.onClicked.addListener(function(tab) {
    var currentMode = localStorage["capturing"];
    var newMode = currentMode === "on" ? "off" : "on";

    if (newMode === "on"){ // start capture
        appendIframe();
    } else { // stop capture
        chrome.tabs.getSelected(null, function(tab){
            localStream.stop();
            onRemoteHangup();
        });
        // set icon, localStorage, etc.
    }
}
  1. 當 iframe 載入後，background.js 會從 iframe (由 rtcshare.appspot.com 應用程式產生) 取得值，並呼叫 chrome.tabCapture.capture() 開始擷取目前分頁的直播串流。
function appendIframe(){
    iframe = document.createElement("iframe");
    iframe.src="https://rtcshare.appspot.com";
    document.body.appendChild(iframe);
    iframe.onload = function(){
        iframe.contentWindow.postMessage("sendConfig", "*");
    };
}

// serialised config object messaged by iframe when it loads

window.addEventListener("message", function(event) {
    if (event.origin !== "https://rtcshare.appspot.com"){
        return;
    }
    var config = JSON.parse(event.data);
    room_link = config.room_link; // the remote peer URL
    token = config.token; // for messaging via Channel API
    // more parameter set from config
);

function startCapture(){
    chrome.tabs.getSelected(null, function(tab) {
        var selectedTabId = tab.id;
        chrome.tabCapture.capture({audio:true, video:true}, handleCapture); // bingo!
    });
}
  1. 直播開始時 (亦即目前分頁的即時「影片」)，background.js 就會啟動對等連線程序，並透過 rtcshare.appspot.com 使用 XHR 和 Google 的 Channel API。基本上，這個 API 的運作方式與 apprtc 示範相同，只是與遠端對等節點通訊的影片串流來自 chrome.tabCapture，而非 getUserMedia()。
function handleCapture(stream){
    localStream = stream; // used by RTCPeerConnection addStream();
    initialize(); // start signalling and peer connection process
}
  1. 為了方便示範，這個原型擴充功能會使用 rtcshare.appspot.com 提供的網址開啟新分頁，並在其中加入「room number」查詢字串。當然，這個網址也可以在其他電腦上開啟，在其他地方使用，這可能會是開始做些有用的事情的起點！
chrome.tabs.create({url: room_link});

我們認為螢幕分享功能有許多有趣的用途，即使在開發的初期階段，我們也已深刻體會到無外掛程式分頁擷取和分享功能的穩定性和回應速度。

一如往常，歡迎您針對這項擴充功能和 WebRTC API 提供意見。如要進一步瞭解 WebRTC，請參閱 HTML5 Rocks 文章或快速入門指南。

祝你開發順利！HTML5R 和 WebRTC 團隊祝你 2013 年順心！