使用 WebRTC 進行螢幕分享

Sam Dutton

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

好吧，我們再來談另一個首次推出的功能：WebRTC 螢幕分享。

以下是螢幕側錄：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 中，這個值只用於取得 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 進行信號傳送。總而言之，這項功能的運作方式與 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 年順心！