(2013-02-20 12:29:38)
使用WebRTC實(shí)現遠程屏幕共享分類(lèi)：
前端 移動(dòng)開(kāi)發(fā) 2012-12-27 19:37 1181人閱讀
評論(2)
舉報正如我們上周報道的一樣，最近有很多事情發(fā)生在我們熟知的
WebRTC上。
其中一個(gè)是：基于WebRTC的屏幕共享。
這是屏幕錄像：
youtube.com/watch?v=tD0QtBUZsF4。
這是代碼：
github.com/samdutton/rtcshare。
從本質(zhì)上講，我們使用RTCPeerConnection和
chrome.tabCapture構建了一個(gè)實(shí)驗性的Chrome擴展，以此通過(guò)瀏覽器標簽來(lái)分享實(shí)時(shí)視頻。如果你想嘗試一下，你需要使用
Chrome的Canary版本 ，并且在about:flags頁(yè)面開(kāi)啟實(shí)驗性擴展（Experimental Extension）的API。
我們的原型很大程度上依賴(lài)于強大的
apprtc.appspot.com演示，坦率地說(shuō)，這有點(diǎn)像黑客行為。但是，這是一個(gè)概念的證明，并且我們做到了。
下面是我們的實(shí)現方法：
1. 當用戶(hù)點(diǎn)擊擴展程序圖標（地址欄旁的“錄制按鈕“），擴展的后臺腳本background.js為它自身添加了一個(gè)iframe，src指向
rtcshare.appspot.com。在background.js中它僅用于獲取token和room_key這樣的參數值。
[html]
view plaincopychrome.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()來(lái)開(kāi)始攝制當前標簽的實(shí)時(shí)視頻流。
[html]
view plaincopyfunction appendIframe(){
iframe = document.createElement_x("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. 一旦實(shí)時(shí)數據流可用（換句話(huà)說(shuō)，即當前標簽的實(shí)時(shí)視頻），background.js便啟動(dòng)點(diǎn)對點(diǎn)連接的進(jìn)程，信號通過(guò)
rtcshare.appspot.com使用XHR及Google的
Channel API進(jìn)行傳輸。所有一切的工作原理就像
apprtc的示例一樣，除了視頻流到遠程的傳送是通過(guò)chrome.tabCapture()而不是getUserMedia()。
[html]
view plaincopyfunction handleCapture(stream){
localStream = stream; // used by RTCPeerConnection addStream();
initialize(); // start signalling and peer connection process
}
4. 為了演示考慮，這個(gè)擴展會(huì )在新標簽打開(kāi)一個(gè)
rtcshare.appspot.com提供的url，其中包含一個(gè)房間號的參數。當然，這個(gè)URL可以在另一臺計算機上或者任何地方打開(kāi)，這可能是最有價(jià)值的事情。me.t
[html]
view plaincopychrome.tabs.create({url: room_link});abs.create（{URL：room_link}）;
我們?yōu)槠聊还蚕碓O想了很多有趣的用例，即使在這個(gè)早期的發(fā)展階段，基于插件的標簽錄制和分享有多快和多穩定也給我們留下了深刻的印象。
如果你想了解更多關(guān)于WebRTC的內容，請查閱
HTML5 Rocks的文章或我們的
快速入門(mén)指南 。
祝大家2013年快樂(lè )！
相關(guān)文章：《
Chrome引入WebRTC支持視頻聊天App》
《
如何使用HTML5實(shí)現拍照上傳應用》
《
對HTML5 Device API相關(guān)規范的解惑》
譯自：http://updates.html5rocks.com/2012/12/Screensharing-with-WebRTC
轉載請注明：來(lái)自蔣宇捷的博客-http://blog.csdn.net/hfahe
分享到：
上一篇：
在iOS Safari中播放離線(xiàn)音頻下一篇：
Firefox、Android、iOS遇見(jiàn)WebRTCFirefox、Android、iOS遇見(jiàn)WebRTC分類(lèi)：
前端 應用開(kāi)發(fā) 移動(dòng)開(kāi)發(fā) 2012-12-28 23:51 1331人閱讀
評論(2)
舉報注：我昨天剛發(fā)了一篇
關(guān)于WebRTC的文章，但是WebRTC的變化如此之大，讓我不得不再用一篇文章的篇幅從另外一個(gè)方面詳細闡述它帶給我們的變化。Firefox、Opera、Android、iOS平臺的廣泛支持會(huì )讓它可以立即落地，實(shí)現很多有趣的視頻功能和應用。你準備好使用它了嗎？
關(guān)鍵詞：視頻
RTCPeerConnection getUserMedia WebRTC 多媒體
--------
WebRTC在過(guò)去的幾周內發(fā)生了很多事情，有一個(gè)重大的更新。
特別是我們很高興地看到多個(gè)瀏覽器和平臺開(kāi)始支持WebRTC。
getUserMedia目前可以在Chrome瀏覽器中直接使用，此外還有Opera、Firefox Nightly構建版、Aurora瀏覽器（盡管在Firefox中需要
設置首選項）?？梢钥匆豢?a target="_blank" >simpl.info/gum上getUserMedia跨瀏覽器的演示，以及Chris Wilson使用getUserMedia來(lái)進(jìn)行網(wǎng)絡(luò )音頻輸入的
驚人演示。
Chrome穩定版已經(jīng)支持webkitRTCPeerConnection，并且無(wú)須在about:flgas里設置。Chrome24及以上版本已經(jīng)支持TURN服務(wù)器（TURN協(xié)議允許NAT或者
防火墻后面的對象可以通過(guò)TCP或者UDP接收到數據。這在使用了對稱(chēng)式的NAT或者防火墻的網(wǎng)絡(luò )中尤其具有實(shí)用價(jià)值）。在
simpl.info/pc上有一個(gè)Chrome RTCPeerConnection非常簡(jiǎn)單的演示，以及在
apprtc.appspot.com上有一個(gè)超棒的視頻聊天應用。（關(guān)于命名的解釋?zhuān)航?jīng)過(guò)幾次迭代，目前API的命名為webkitRTCPeerConnection。其他名稱(chēng)及實(shí)現已被廢棄。當W3C標準已經(jīng)穩定時(shí)，webkit前綴將被刪除。）
桌面版Firefox Nightly和Aurora瀏覽器也已經(jīng)支持WebRTC，而在iOS和Android上可以通過(guò)
愛(ài)立信Bowser瀏覽器支持。
DATACHANNEL
DataChannel是用于任意數據高性能、低延時(shí)、點(diǎn)對點(diǎn)通信的WebRTC API。這個(gè)API非常簡(jiǎn)單，類(lèi)似于WebSocket，但是它的通信是直接發(fā)生在瀏覽器之間的，所以DataChannel的速度遠遠超過(guò)WebSocket，即便我們還需要一個(gè)中繼（TURN）服務(wù)器（用“TCP/UDP打孔”的方式來(lái)穿越防火墻和防止網(wǎng)絡(luò )地址轉換失?。?。
Chrome 25計劃支持DataChannel，需要通過(guò)about:flags激活-盡管它可能會(huì )錯過(guò)這個(gè)版本。這將僅用于實(shí)驗，可能不會(huì )充分發(fā)揮全部的作用，而且無(wú)法和Firefox進(jìn)行通信。DataChannel在以后的版本中會(huì )更加穩定，并且可以和Firefox互通。
Firefox Nightly構建版和Aurora支持mozGetUserMedia、mozRTCPeerConnection和DataChannel（但是不要忘記在about:flags中設置參數?。?div style="height:15px;">
在Firefox中運行DataChannel的截圖如下：
該演示URL為
http://mozilla.github.com/webrtc-landing/data_test.html。下面是代碼片斷：
[html]
view plaincopypc1.onconnection = function() {
log("pc1 onConnection ");
dc1 = pc1.createDataChannel("This is pc1",{}); // reliable (TCP-like)
dc1 = pc1.createDataChannel("This is pc1",{outOfOrderAllowed: true, maxRetransmitNum: 0}); // unreliable (UDP-like)
log("pc1 created channel " + dc1 + " binarytype = " + dc1.binaryType);
channel = dc1;
channel.binaryType = "blob";
log("pc1 new binarytype = " + dc1.binaryType);
// Since we create the datachannel, don't wait for onDataChannel!
channel.onmessage = function(evt) {
if (evt.data instanceof Blob) {
fancy_log("*** pc2 sent Blob: " + evt.data + ", length=" + evt.data.size,"blue");
} else {
fancy_log('pc2 said: ' + evt.data, "blue");
}
}
channel.onopen = function() {
log("pc1 onopen fired for " + channel);
channel.send("pc1 says Hello...");
log("pc1 state: " + channel.state);
}
channel.onclose = function() {
log("pc1 onclose fired");
};
log("pc1 state:" + channel.readyState);
}
hacks.mozilla.org博客上有更多Firefox實(shí)現的信息和演示。2013年初Firefox 18將會(huì )提供WebRTC基礎功能的支持，并且附加功能在支持計劃中，包括getUserMedia和createOffer/應答限制，以及TURN（允許瀏覽器在防火墻后進(jìn)行互相通信）。
WebRTC的更多信息，請參閱
WebRTC入門(mén)。這里甚至還有一本正在印刷中的
WebRTC書(shū)籍，目前以電子書(shū)格式提供。
分辨率限制
Chrome 24及??以上版本已經(jīng)實(shí)現了
分辨率限制功能。它可用于為getUserMedia()和RTCPeerConnection的addStream()調用設置視頻的分辨率。
在
simpl.info/getusermedia/constraints上有一個(gè)示例，通過(guò)設置一個(gè)斷點(diǎn)和改變參數值展示不同的限制，。
這里有幾個(gè)陷阱。在一個(gè)瀏覽器標簽中設置getUserMedia的分辨率限制會(huì )影響所有的標簽。設置不允許限制分辨率會(huì )出現一個(gè)非常奇怪的錯誤信息：
[html]
view plaincopynavigator.getUserMedia error: NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}
如果你在本地而不是服務(wù)器上使用getUserMedia，會(huì )出現和上面一樣的錯誤。
流式屏幕捕獲
Chrome開(kāi)發(fā)版已經(jīng)支持標簽捕獲。因此我們可以從標簽中捕獲一個(gè)可視區域，作為視頻流用于本地或者RTCPeerConnection的addStream()。這對屏幕捕獲和網(wǎng)頁(yè)共享非常有用（《
使用WebRTC實(shí)現遠程屏幕共享》這篇文章正是講到這方面的內容）。要了解更多信息，請參閱
WebRTC標簽內容捕獲建議。
譯自：http://updates.html5rocks.com/2012/12/WebRTC-hits-Firefox-Android-and-iOS
轉載請注明：來(lái)自蔣宇捷的博客-http://blog.csdn.net/hfahe
分享到：
上一篇：
使用WebRTC實(shí)現遠程屏幕共享下一篇：
HTML5光線(xiàn)傳感器簡(jiǎn)介
