使用 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 中，這只用於取得 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 會從中取得值 (由 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 提供的網址，且已加入「房號」查詢字串。當然，這個網址可以在其他電腦上開啟，也可以在其他地方開啟，而這可能就是有用的開始！
chrome.tabs.create({url: room_link});

我們預期分享螢幕畫面功能將有許多有趣的用途，即使目前仍處於開發初期，免外掛程式的索引標籤擷取和分享功能，在回應速度和穩定性方面都令人驚豔。

我們一如既往歡迎您提供意見，包括對這項擴充功能和一般 WebRTC API 的看法。如要進一步瞭解 WebRTC，請參閱 HTML5 Rocks 文章或快速入門指南。

祝您駭客松愉快，HTML5R 和 WebRTC 團隊全體成員也在此祝您 2013 年一切順利！