Compartilhamento de tela com WebRTC

Sam Dutton

Como informamos na semana passada, tem acontecido muita coisa com nosso velho amigo WebRTC.

Aqui está outra novidade: compartilhamento de tela do WebRTC.

Confira este screencast: youtube.com/watch?v=tD0QtBUZsF4

Confira o código: github.com/samdutton/rtcshare

Basicamente, criamos uma extensão experimental do Chrome que usa RTCPeerConnection e chrome.tabCapture para compartilhar um "vídeo" ao vivo de uma guia do navegador. Para testar, você precisa do Chrome Canary e ativar as APIs de extensão experimental na página about:flags.

Nosso protótipo depende muito da demonstração do appr.tc, e, para ser sincero, é um pouco hackeado. Mas... é uma prova de conceito, e funciona.

Veja como fizemos isso:

1. Quando o usuário clica no ícone da extensão (o "botão de gravação" ao lado da barra de endereço), o script de segundo plano da extensão background.js anexa um iframe a si mesmo, cujo src é rtcshare.appspot.com. Em background.js, ele é usado apenas para receber valores como token e room_key. Avisamos que era um hack :^}! Esta é uma versão cortada e canalizada de apprtc.appspot.com. Assim como no exemplo do apprtc, rtcshare.appspot.com também é usado para o 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. Quando o iframe é carregado, o background.js recebe valores dele (gerados pelo app rtcshare.appspot.com) e chama chrome.tabCapture.capture() para começar a capturar uma transmissão ao vivo da guia atual.

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. Quando a transmissão ao vivo estiver disponível (ou seja, um "vídeo" ao vivo da guia atual), o background.js inicia o processo de conexão entre pares, e a sinalização é feita por rtcshare.appspot.com usando XHR e a API Channel do Google. No geral, ele funciona como a demonstração do apprtc, exceto porque o fluxo de vídeo comunicado ao peer remoto é de chrome.tabCapture e não de getUserMedia().

function handleCapture(stream){
    localStream = stream; // used by RTCPeerConnection addStream();
    initialize(); // start signalling and peer connection process
}

1. Para fins de demonstração, essa extensão de protótipo abre uma nova guia com o URL fornecido por rtcshare.appspot.com, que tem uma string de consulta "número de sala" adicionada. Claro, esse URL pode ser aberto em outro computador, em outro lugar, e isso pode ser o início de algo útil.

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

Prevemos muitos casos de uso interessantes para o compartilhamento de tela e, mesmo neste estágio inicial de desenvolvimento, ficamos impressionados com a captura e o compartilhamento de guias sem plug-ins responsivos e estáveis.

Como sempre, aceitamos seus comentários sobre essa extensão e as APIs do WebRTC em geral. Se quiser saber mais sobre o WebRTC, confira o artigo do HTML5 Rocks ou nosso Guia de início rápido.

Bom trabalho! Desejamos a todos do HTML5R e do WebRTC um ótimo 2013.