Condivisione schermo con WebRTC

Sam Dutton

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

Ecco un'altra novità: la condivisione schermo WebRTC.

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

Ed ecco il codice: github.com/samdutton/rtcshare

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

Il nostro prototipo si basa molto sulla potente demo di appr.tc e, a dirla tutta, è 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 ("pulsante di registrazione" accanto alla barra degli indirizzi), lo script di background dell'estensione background.js aggiunge a se stesso un iframe il cui src è rtcshare.appspot.com. In background.js viene utilizzato solo per ottenere valori come token e room_key. Ti abbiamo detto che si tratta di un hack :^}. Questa è una versione tagliata e incanalata di apprtc.appspot.com. Come per l'esempio di apprtc, rtcshare.appspot.com viene utilizzato anche 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. Una volta caricato l'iframe, background.js ne 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 che il live streaming è disponibile (in altre parole, un "video" in diretta della scheda corrente), background.js avvia la procedura di connessione tra pari e il signalling viene eseguito 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 di prototipo apre una nuova scheda con l'URL fornito da rtcshare.appspot.com, a cui è stata aggiunta una stringa di query "numero stanza". Ovviamente, 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 schermo e, anche in questa fase iniziale di sviluppo, siamo impressionati da quanto possa essere reattiva e stabile l'acquisizione e la condivisione di schede senza plug-in.

Come sempre, sono graditi i tuoi commenti su questa estensione e sulle API WebRTC in generale. Per scoprire di più su WebRTC, consulta l'articolo HTML5 Rocks o la nostra Guida rapida.

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