? ? ??[正如我們上周報道的一樣](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