Condivisione schermo con WebRTC

Sam Dutton

Twitter GitHub Glitch Mastodon Homepage

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:

1. 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 come token e room_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.
    }
}

1. 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!
    });
}

1. 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 da getUserMedia().

function handleCapture(stream){
    localStream = stream; // used by RTCPeerConnection addStream();
    initialize(); // start signalling and peer connection process
}

1. 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!