Uso compartido de pantalla con WebRTC

Como lo informamos la semana pasada, últimamente ocurrió muchas cosas con nuestro viejo amigo, WebRTC.

Esta es la primera vez: Uso compartido de pantalla mediante WebRTC.

Captura de pantalla de la extensión para compartir pantalla de WebRTC, con Jake Archibald, Peter Beverloo, Paul Lewis y Sam Dutton

Aquí hay una presentación en pantalla: youtube.com/watch?v=tD0QtBUZsF4

Y este es el código: github.com/samdutton/rtcshare.

En esencia, creamos una extensión de Chrome experimental que usa RTCPeerConnection y chrome.tabCapture para compartir un "video" en vivo de una pestaña del navegador. Si quieres probarla, necesitarás Chrome Canary y habilitar las APIs de extensiones experimentales en la página about:flags.

Nuestro prototipo se basa en gran medida en la poderosa demostración de appr.tc y, honestamente, es un truco. Pero... es una prueba de concepto y funciona.

Así es como lo hicimos:

  1. Cuando el usuario hace clic en el ícono de la extensión (el "botón de grabación" junto a la barra de direcciones), la secuencia de comandos en segundo plano background.js de la extensión agrega un iframe a sí mismo, cuyo src es rtcshare.appspot.com. En background.js, solo se usa para obtener valores como token y room_key. ¡Te informamos que fue un hackeo :^}! Esta es una versión cortada y canalizada de apprtc.appspot.com. Al igual que en el ejemplo de apprtc, también se usa rtcshare.appspot.com para el cliente 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. Cuando se carga el iframe, background.js obtiene valores de él (que genera la app rtcshare.appspot.com) y llama a chrome.tabCapture.capture() para comenzar a capturar una transmisión en vivo de la pestaña actual.
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 vez que la transmisión en vivo está disponible (en otras palabras, un "video" en vivo de la pestaña actual), background.js inicia el proceso de conexión de pares, y la señalización se realiza a través de rtcshare.appspot.com mediante XHR y la API de canal de Google. En general, funciona como la demostración de apprtc, con la excepción de que la transmisión de video por Internet que se comunica al par remoto es de chrome.tabCapture, y no de getUserMedia().
function handleCapture(stream){
    localStream = stream; // used by RTCPeerConnection addStream();
    initialize(); // start signalling and peer connection process
}
  1. Para fines de demostración, esta extensión de prototipo abre una nueva pestaña con la URL proporcionada por rtcshare.appspot.com, que tiene agregada una cadena de consulta 'número de habitación'. Por supuesto, esta URL podría abrirse en otra computadora o en otro lugar, y ESO podría ser el comienzo de algo útil.
chrome.tabs.create({url: room_link});

Imaginamos muchos casos de uso interesantes para compartir la pantalla y, incluso en esta etapa temprana del desarrollo, nos impresiona lo receptivo y estable que puede ser la captura y el uso compartido de pestañas sin complementos y sin complementos.

Como siempre, recibiremos con gusto tus comentarios sobre esta extensión y sobre las APIs de WebRTC en general. Si quieres obtener más información acerca de WebRTC, consulta el artículo HTML5 Rocks o nuestra Guía de inicio rápido.

¡Feliz hackeo y mejores deseos para 2013 de todos en HTML5R y WebRTC!