使用WebRTC实现远程屏幕共享

来源：互联网发布：淘宝读书官方版编辑：程序博客网时间：2024/05/18 03:57

正如我们上周报道的一样，最近有很多事情发生在我们熟知的WebRTC上。

其中一个是：基于WebRTC的屏幕共享。

这是屏幕录像：youtube.com/watch?v=tD0QtBUZsF4。

这是代码：github.com/samdutton/rtcshare。

从本质上讲，我们使用RTCPeerConnection和chrome.tabCapture构建了一个实验性的Chrome扩展，以此通过浏览器标签来分享实时视频。如果你想尝试一下，你需要使用Chrome的Canary版本，并且在about:flags页面开启实验性扩展（Experimental Extension）的API。

我们的原型很大程度上依赖于强大的apprtc.appspot.com演示，坦率地说，这有点像黑客行为。但是，这是一个概念的证明，并且我们做到了。

下面是我们的实现方法：

1. 当用户点击扩展程序图标（地址栏旁的“录制按钮“），扩展的后台脚本background.js为它自身添加了一个iframe，src指向rtcshare.appspot.com。在background.js中它仅用于获取token和room_key这样的参数值。

[html] view plaincopy
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.  
    }  
}  

2. 当iframe加载后，background.js从iframe获取参数值（由rtcshare.appspot.com应用生成）并调用chrome.tabCapture.capture()来开始摄制当前标签的实时视频流。

[html] view plaincopy
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!  
    });  
}  

3. 一旦实时数据流可用（换句话说，即当前标签的实时视频），background.js便启动点对点连接的进程，信号通过rtcshare.appspot.com使用XHR及Google的Channel API进行传输。所有一切的工作原理就像apprtc的示例一样，除了视频流到远程的传送是通过chrome.tabCapture()而不是getUserMedia()。

[html] view plaincopy
function handleCapture(stream){  
    localStream = stream; // used by RTCPeerConnection addStream();  
    initialize(); // start signalling and peer connection process  
}  

4. 为了演示考虑，这个扩展会在新标签打开一个rtcshare.appspot.com提供的url，其中包含一个房间号的参数。当然，这个URL可以在另一台计算机上或者任何地方打开，这可能是最有价值的事情。me.t

[html] view plaincopy
chrome.tabs.create({url: room_link});abs.create（{URL：room_link}）;  

我们为屏幕共享设想了很多有趣的用例，即使在这个早期的发展阶段，基于插件的标签录制和分享有多快和多稳定也给我们留下了深刻的印象。

如果你想了解更多关于WebRTC的内容，请查阅HTML5 Rocks的文章或我们的快速入门指南。

祝大家2013年快乐！

相关文章：《Chrome引入WebRTC支持视频聊天App》

《如何使用HTML5实现拍照上传应用》

《对HTML5 Device API相关规范的解惑》

译自：http://updates.html5rocks.com/2012/12/Screensharing-with-WebRTC

转载请注明：来自蒋宇捷的博客-http://blog.csdn.net/hfahe