Uso compartido de pantalla con WebRTC

Sam Dutton

Como informamos la semana pasada, últimamente ha pasado mucho con nuestro viejo amigo WebRTC.

Pero esta es otra primera: la opción de compartir pantalla con WebRTC.

Consulta esta presentación en pantalla: youtube.com/watch?v=tD0QtBUZsF4

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

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

Nuestro prototipo depende en gran medida de la poderosa demostración de appr.tc y, para ser sinceros, es un poco hackeado. Pero… es una prueba de concepto y funciona.

A continuación, te mostramos cómo 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 de la extensión background.js agrega un iframe a sí misma, cuyo src es rtcshare.appspot.com. En background.js, solo se usa para obtener valores como token y room_key. Te dijimos que esto era un hack :^}. Esta es una versión cortada y canalizada de apprtc.appspot.com. Al igual que con el ejemplo de apprtc, rtcshare.appspot.com también se usa 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 (generados por 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 (es decir, un "video" en vivo de la pestaña actual), background.js inicia el proceso de conexión entre pares, y la señalización se realiza a través de rtcshare.appspot.com con XHR y la API de Channel de Google. En resumen, funciona como la demostración de apprtc, excepto que la transmisión de video 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. A modo de demostración, esta extensión de prototipo abre una pestaña nueva con la URL que proporciona rtcshare.appspot.com, que tiene una cadena de consulta "número de habitación" agregada. Por supuesto, esta URL se podría abrir en otra computadora, en otro lugar, y ESO podría ser el comienzo de algo útil.

chrome.tabs.create({url: room_link});

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

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

Feliz hackeo y los mejores deseos para 2013 de parte de todos los que trabajan en HTML5R y WebRTC.