使用WebRTC实现远程屏幕共享
最后更新于：2022-04-01 19:44:44
[正如我们上周报道的一样](http://updates.html5rocks.com/2012/12/WebRTC-hits-Firefox-Android-and-iOS)，最近有很多事情发生在我们熟知的[WebRTC](http://www.html5rocks.com/en/tutorials/webrtc/basics/)上。
其中一个是：基于WebRTC的屏幕共享。
[](https://www.youtube.com/watch?v=tD0QtBUZsF4 ""链接截屏WebRTC的屏幕共享行动。截屏图像显示WebRTC的屏幕共享扩展，杰克阿奇博尔德，彼得Beverloo，保罗·刘易斯和山姆达顿。" ")
这是屏幕录像：[youtube.com/watch?v=tD0QtBUZsF4](https://www.youtube.com/watch?v=tD0QtBUZsF4 "Video on YouTube: screencast of WebRTC screensharing in action")。
这是代码：[github.com/samdutton/rtcshare](https://www.github.com/samdutton/rtcshare "Github code repository for WebRTC screensharing extension")。
从本质上讲，我们使用RTCPeerConnection和[`chrome.tabCapture`](http://developer.chrome.com/dev/extensions/tabCapture.html "chrome.tabCapture API文档")构建了一个实验性的Chrome扩展，以此通过浏览器标签来分享实时视频。如果你想尝试一下，你需要使用[Chrome的Canary](https://tools.google.com/dlpage/chromesxs/)版本 ，并且在about:flags页面开启实验性扩展（Experimental Extension）的API。
我们的原型很大程度上依赖于强大的[apprtc.appspot.com](http://apprtc.appspot.com/)演示，坦率地说，这有点像黑客行为。但是，这是一个概念的证明，并且我们做到了。
下面是我们的实现方法：
1. 当用户点击扩展程序图标（地址栏旁的“录制按钮“），扩展的后台脚本background.js为它自身添加了一个iframe，`src``指向`[rtcshare.appspot.com](https://rtcshare.appspot.com/)。在background.js中它仅用于获取`token`和`room_key``这样的参数`值。
~~~
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()来开始摄制当前标签的实时视频流。
~~~
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](http://www.rtcshare.appspot.com/)使用XHR及Google的[Channel API](https://developers.google.com/appengine/docs/python/channel/overview)进行传输。所有一切的工作原理就像[apprtc](http://www.apprtc.appspot.com/)的示例一样，除了视频流到远程的传送是通过chrome.tabCapture()而不是getUserMedia()。
~~~
function handleCapture(stream){
localStream = stream; // used by RTCPeerConnection addStream();
initialize(); // start signalling and peer connection process
}
~~~
4. 为了演示考虑，这个扩展会在新标签打开一个[rtcshare.appspot.com](https://rtcshare.appspot.com/)提供的url，其中包含一个房间号的参数。当然，这个URL可以在另一台计算机上或者任何地方打开，这可能是最有价值的事情。me.t
~~~
chrome.tabs.create({url: room_link});abs.create（{URL：room_link}）;
~~~
我们为屏幕共享设想了很多有趣的用例，即使在这个早期的发展阶段，基于插件的标签录制和分享有多快和多稳定也给我们留下了深刻的印象。
如果你想了解更多关于WebRTC的内容，请查阅[HTML5 Rocks的文章](http://www.html5rocks.com/en/tutorials/webrtc/basics/)或我们的[快速入门指南](https://docs.google.com/document/d/1idl_NYQhllFEFqkGQOLv8KBK8M3EVzyvxnKkHl4SuM8/edit) 。
祝大家2013年快乐！
相关文章：《[Chrome引入WebRTC支持视频聊天App](http://blog.csdn.net/hfahe/article/details/8083572)》
《[如何使用HTML5实现拍照上传应用](http://blog.csdn.net/hfahe/article/details/7354912)》
《[对HTML5 Device API相关规范的解惑](http://blog.csdn.net/hfahe/article/details/7338032)》
译自：http://updates.html5rocks.com/2012/12/Screensharing-with-WebRTC
转载请注明：来自蒋宇捷的博客-http://blog.csdn.net/hfahe
';