使用 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 附加到自身，该 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 会从中获取值（由 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 年万事如意！