使用 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 会启动对等连接流程，并使用 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 提供的网址，该网址添加了“room number”查询字符串。当然，您也可以在其他地方的其他计算机上打开此网址，这可能就是开始做一些有用的事情的开始！
chrome.tabs.create({url: room_link});

我们预计屏幕共享功能会有许多有趣的用例，即使在开发的早期阶段，我们也对无插件标签页截取和共享功能的响应速度和稳定性印象深刻。

一如既往，我们欢迎您就此扩展程序和 WebRTC API 提供反馈。如需详细了解 WebRTC，请参阅 HTML5 Rocks 文章或我们的快速入门指南。

祝您编程愉快！HTML5R 和 WebRTC 团队全体成员祝您 2013 年一切顺利！