Uso compartido de pantalla con WebRTC

Sam Dutton

Como informamos la semana pasada, últimamente han sucedido muchas cosas con nuestro viejo amigo WebRTC.

Bueno… aquí hay otra novedad: la función de compartir pantalla de WebRTC.

Aquí tienes 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 experimental de Chrome 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, para ser sinceros, es un poco improvisado. 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), el script de segundo plano de la extensión background.js 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 dijimos que esto era un hack :^}! Esta es una versión modificada 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 de 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 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 general, funciona como la demostración de apprtc, excepto que el flujo de video que se comunica al par remoto proviene 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, este prototipo de extensión abre una pestaña nueva con la URL proporcionada por rtcshare.appspot.com, que tiene agregada una cadena de consulta de "número de sala". 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});

Prevemos muchos casos de uso interesantes para el uso compartido de pantalla y, incluso en esta etapa inicial del desarrollo, nos sorprende la capacidad de respuesta y la estabilidad que pueden tener la captura y el uso compartido de pestañas sin complementos.

Como siempre, agradecemos tus comentarios sobre esta extensión y 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.

¡Felices hackeos y los mejores deseos para el 2013 de parte de todo el equipo de HTML5R y WebRTC!