Come riferito la scorsa settimana, ultimamente sono successe molte cose con il nostro vecchio amico WebRTC.
Ecco un'altra prima novità: la condivisione schermo WebRTC.
Ecco uno screencast: youtube.com/watch?v=tD0QtBUZsF4
Ecco il codice: github.com/samdutton/rtcshare
In sostanza, abbiamo sviluppato un'estensione di Chrome sperimentale che utilizza RTCPeerConnection
e chrome.tabCapture
per condividere un "video" live di una scheda del browser. Se vuoi provarlo, dovrai avere Chrome Canary e abilitare le API Experimental Extension nella pagina about:flags.
Il nostro prototipo si basa molto sull'efficace demo appr.tc e, ad essere sinceri, è un po' un trucco. Ma... è una proof of concept e funziona.
Ecco come abbiamo fatto:
- Quando l'utente fa clic sull'icona dell'estensione (il "pulsante Registra" accanto alla barra degli indirizzi), lo script in background dell'estensione background.js aggiunge a se stesso un iframe, il cui
src
è rtcshare.appspot.com. In background.js è utilizzato solo per ottenere valori cometoken
eroom_key
. Ti abbiamo detto che si tratta di un attacco :^}. Questa è una versione troncata e incanalata di apprtc.appspot.com. Come nell'esempio di apprtc, per il client remoto viene utilizzato anche rtcshare.appspot.com.
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.
}
}
- Una volta caricato l'iframe, background.js riceve dei valori (generati dall'app rtcshare.appspot.com) e chiama
chrome.tabCapture.capture()
per iniziare ad acquisire un live streaming della scheda corrente.
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!
});
}
- Una volta che il live streaming è disponibile (in altre parole, un "video" dal vivo della scheda corrente), background.js avvia il processo di connessione peer e la segnalazione avviene tramite rtcshare.appspot.com utilizzando XHR e l'API Channel di Google. Nel complesso, funziona come la demo apprtc, con la differenza che il video stream comunicato al peer remoto proviene da
chrome.tabCapture
e non dagetUserMedia()
.
function handleCapture(stream){
localStream = stream; // used by RTCPeerConnection addStream();
initialize(); // start signalling and peer connection process
}
- Ai fini della demo, questa estensione prototipo apre una nuova scheda con l'URL fornito da rtcshare.appspot.com, in cui è stata aggiunta una stringa di query "numero stanza". Naturalmente questo URL potrebbe essere aperto su un altro computer o in un altro punto, e questo potrebbe essere l'inizio di qualcosa di utile.
chrome.tabs.create({url: room_link});
Prevediamo molti casi d'uso interessanti per la condivisione dello schermo e, anche in questa prima fase di sviluppo, siamo colpiti da quanto possa essere reattiva e stabile l'acquisizione e la condivisione di schede senza plug-in.
Come sempre, accogliamo con favore i tuoi commenti su questa estensione e sulle API WebRTC in generale. Per scoprire di più su WebRTC, consulta l'articolo su HTML5 Rocks o la nostra guida rapida.
Buon lavoro di pirateria informatica e auguri di un 2013 da parte di HTML5R e WebRTC!