Condivisione schermo con WebRTC

Sam Dutton

Come abbiamo segnalato la scorsa settimana, ultimamente sono successe molte cose con il nostro vecchio amico WebRTC.

Beh… ecco un'altra novità: la condivisione dello schermo WebRTC.

Ecco uno screencast: youtube.com/watch?v=tD0QtBUZsF4

Ecco il codice: github.com/samdutton/rtcshare

In sostanza, abbiamo creato un'estensione di Chrome sperimentale che utilizza RTCPeerConnection e chrome.tabCapture per condividere un "video" live di una scheda del browser. Se vuoi provarla, devi utilizzare Chrome Canary e attivare le API sperimentali delle estensioni nella pagina about:flags.

Il nostro prototipo si basa in gran parte sulla potente demo di appr.tc e, a dire il vero, è un po' un hack. Ma… è una proof of concept e funziona.

Ecco come abbiamo fatto:

1. Quando l'utente fa clic sull'icona dell'estensione (il "pulsante di registrazione" accanto alla barra degli indirizzi), lo script di background dell'estensione background.js aggiunge un iframe a se stesso, il cui src è rtcshare.appspot.com. In background.js viene utilizzato solo per ottenere valori come token e room_key. Te l'avevamo detto che era un hack :^}! Questa è una versione modificata di apprtc.appspot.com. Come nell'esempio di apprtc, anche rtcshare.appspot.com viene utilizzato per il client remoto.

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. Quando l'iframe è stato caricato, background.js recupera i valori (generati dall'app rtcshare.appspot.com) e chiama chrome.tabCapture.capture() per avviare l'acquisizione di 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 disponibile lo stream live (ovvero un "video" in diretta della scheda corrente), background.js avvia la procedura di connessione peer e la segnalazione viene eseguita tramite rtcshare.appspot.com utilizzando XHR e l'API Channel di Google. Nel complesso, funziona come la demo apprtc, tranne per il fatto che lo stream video 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. A scopo dimostrativo, questa estensione prototipo apre una nuova scheda con l'URL fornito da rtcshare.appspot.com, a cui è stata aggiunta una stringa di query "numero di stanza". Naturalmente, questo URL potrebbe essere aperto su un altro computer, in un altro luogo, 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 fase iniziale di sviluppo, siamo rimasti colpiti dalla reattività e dalla stabilità della condivisione e dell'acquisizione delle schede senza plug-in.

Come sempre, i tuoi commenti sono graditi: su questa estensione e sulle API WebRTC in generale. Se vuoi saperne di più su WebRTC, consulta l'articolo di HTML5 Rocks o la nostra guida rapida.

Buon hacking e auguri per il 2013 da parte di tutto il team di HTML5R e WebRTC.