使用 WebRTC 共享屏幕

正如我们上周所报告的,我们的老朋友 WebRTC 最近有很多

嗯...这是另一个先例:WebRTC 屏幕共享。

WebRTC 屏幕共享扩展程序的屏幕截图,其中包含 Jake Archibald、Peter Beverloo、Paul Lewis 和 Sam Dutton

以下是抓屏:youtube.com/watch?v=tD0QtBUZsF4

代码如下:github.com/samdutton/rtcshare

实质上,我们构建了一个使用 RTCPeerConnectionchrome.tabCapture 分享浏览器标签页的实时“视频”的实验性 Chrome 扩展程序。如果您想试用该功能,则需要使用 Chrome Canary,并且需要在 about:flags 页面上启用实验性扩展程序 API。

我们的原型在很大程度上依赖于强大的 appr.tc 演示,坦率地说,这有点像是天马行空!但是...它只是概念验证,而且是可行的。

具体方法如下:

  1. 当用户点击扩展程序图标(地址栏旁边的“记录按钮”)时,该扩展程序的后台脚本 background.js 会向自身附加一个 iframe,其 srcrtcshare.appspot.com。在 background.js 中,它仅用于获取 tokenroom_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 年快乐!