使用 WebRTC 進行螢幕分享

Sam Dutton

Twitter GitHub Glitch Mastodon 首頁

如同我們上週的報告所述，老友的朋友 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，也就是 rtcshare.appspot.com。在 background.js 中，只會用來取得 token 和 room_key 等值。src我們明白這是駭客入侵 :^}！這是 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 會啟動對等連線程序，並透過 XHR 和 Google 的 Channel API 透過 rtcshare.appspot.com 傳送信號。總體而言，運作方式與 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 文章或我們的快速入門指南。

祝您一切順利，也祝福 2013 年 HTML5R 和 WebRTC 的所有人！