Jak informowaliśmy w zeszłym tygodniu, ostatnio dużo działo się z naszym starym przyjacielem WebRTC.
A oto kolejne pytanie: udostępnianie ekranu WebRTC.
Oto screencast: youtube.com/watch?v=tD0QtBUZsF4
Oto kod: github.com/samdutton/rtcshare
W skrócie stworzyliśmy eksperymentalne rozszerzenie do Chrome, które za pomocą RTCPeerConnection
i chrome.tabCapture
przesyła na żywo film z karty przeglądarki. Jeśli chcesz go wypróbować, potrzebujesz Chrome Canary i chcesz włączyć eksperymentalne interfejsy API rozszerzeń na stronie about:flags.
Nasz prototyp opiera się w dużej mierze na potężnej wersji demonstracyjnej appr.tc. Szczerze mówiąc, jest to trochę szkodliwa! Ale... to model koncepcyjny, który działa.
Osiągnęliśmy to w następujący sposób:
- Gdy użytkownik kliknie ikonę rozszerzenia (przycisk rejestrowania obok paska adresu), skrypt tła rozszerzenia background.js dołączy do siebie element iframe, którego
src
to rtcshare.appspot.com. W pliku background.js używany jest tylko do pobierania wartości takich jaktoken
iroom_key
. Uznaliśmy, że to był haker :^}. To jest rozdrobniona i kanałowa wersja apprtc.appspot.com. Tak jak w przypadku przykładu apprtc, adres rtcshare.appspot.com jest też używany dla klienta zdalnego.
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.
}
}
- Po wczytaniu elementu iframe background.js pobiera z niego wartości (wygenerowane przez aplikację rtcshare.appspot.com) i wywołuje metodę
chrome.tabCapture.capture()
, by rozpocząć przechwytywanie transmisji na żywo z bieżącej karty.
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!
});
}
- Gdy transmisja na żywo będzie dostępna (czyli będzie to „transmisja wideo” na żywo z bieżącej karty), skrypt background.js uruchamia proces połączenia z peerem, a sygnalizacja jest realizowana przez rtcshare.appspot.com za pomocą XHR i Channel API od Google. W ogóle to działa jak wersja demonstracyjna apprtc z tą różnicą, że strumień wideo komunikowany ze zdalnym peerem pochodzi ze źródła
chrome.tabCapture
, a niegetUserMedia()
.
function handleCapture(stream){
localStream = stream; // used by RTCPeerConnection addStream();
initialize(); // start signalling and peer connection process
}
- Do celów demonstracyjnych to-prototypowe rozszerzenie otwiera nową kartę z adresem URL udostępnionym przez adres rtcshare.appspot.com, do którego dodany jest ciąg zapytania „numer sali”. Oczywiście ten adres URL można otworzyć na innym komputerze, w innym miejscu, co może być początkiem czegoś przydatnego!
chrome.tabs.create({url: room_link});
Przewidujemy wiele interesujących przypadków użycia udostępniania ekranu i jesteśmy pod wrażeniem tego, jak szybkie i stabilne może być przechwytywanie i udostępnianie kart bez użycia wtyczek, nawet na wczesnym etapie tworzenia.
Czekamy na komentarze o tym rozszerzeniu i ogólnie o interfejsach API WebRTC. Jeśli chcesz dowiedzieć się więcej o WebRTC, przeczytaj artykuł o HTML5 Rocks lub nasz krótki przewodnik.
Życzymy powodzenia w 2013 roku od wszystkich pracowników HTML5R i WebRTC!