http://blog.csdn.net/hfahe/article/details/8445000

 

使用WebRTC实现远程屏幕共享

分类： 前端 移动开发 2012-12-27 19:37  6179人阅读  评论(2)  收藏  举报

        正如我们上周报道的一样，最近有很多事情发生在我们熟知的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 plain copy
  1. chrome.browserAction.onClicked.addListener(function(tab) {  
  2.     var currentMode = localStorage["capturing"];  
  3.     var newMode = currentMode === "on" ? "off" : "on";  
  4.   
  5.     if (newMode === "on"){ // start capture  
  6.         appendIframe();  
  7.     } else { // stop capture  
  8.         chrome.tabs.getSelected(null, function(tab){  
  9.             localStream.stop();  
  10.             onRemoteHangup();  
  11.         });  
  12.         // set icon, localStorage, etc.  
  13.     }  
  14. }  

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

[html]  view plain copy
  1. function appendIframe(){  
  2.     iframe = document.createElement("iframe");  
  3.     iframe.src="https://rtcshare.appspot.com";  
  4.     document.body.appendChild(iframe);  
  5.     iframe.onload = function(){  
  6.         iframe.contentWindow.postMessage("sendConfig", "*");  
  7.     };  
  8. }  
  9.   
  10. // serialised config object messaged by iframe when it loads  
  11.   
  12. window.addEventListener("message", function(event) {  
  13.     if (event.origin !== "https://rtcshare.appspot.com"){  
  14.         return;  
  15.     }  
  16.     var config = JSON.parse(event.data);  
  17.     room_link = config.room_link; // the remote peer URL  
  18.     token = config.token; // for messaging via Channel API  
  19.     // more parameter set from config  
  20. );  
  21.   
  22. function startCapture(){  
  23.     chrome.tabs.getSelected(null, function(tab) {  
  24.         var selectedTabId = tab.id;  
  25.         chrome.tabCapture.capture({audio:true, video:true}, handleCapture); // bingo!  
  26.     });  
  27. }  

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

[html]  view plain copy
  1. function handleCapture(stream){  
  2.     localStream = stream; // used by RTCPeerConnection addStream();  
  3.     initialize(); // start signalling and peer connection process  
  4. }  

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

[html]  view plain copy
  1. 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


Logo
即构开发者社区

致力于链接即构和开发者，提供实时互动和元宇宙领域的前沿洞察、技术分享和丰富的开发者活动，共建实时互动世界。

更多推荐

WebSocket实现实时通信

WebSocket 是一种数据通信协议，也是用于客户端和服务端数据通信，类似于我们常见的 http既然有 http，为啥还要 WebSockethttp 通信是单向的请求 + 响应没有请求也就没有响应初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说

avatar 即构开发者社区
cover

【iOS端】基于Uniapp跨平台接入即构RTC+相芯美颜

avatar 即构开发者社区
cover

Android：Uniapp平台中接入即构RTC+相芯美颜

avatar 即构开发者社区