Compartilhamento de tela com WebRTC

Sam Dutton

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

Bem... aqui está outra novidade: compartilhamento de tela do WebRTC.

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

E aqui está o código: github.com/samdutton/rtcshare

Em essência, 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. Se quiser testar, você vai precisar do Chrome Canary e ativar as APIs de extensão experimentais na página about:flags.

Nosso protótipo depende muito da poderosa demonstração appr.tc e, para ser sincero, é um pouco complicado. 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 em 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. A gente avisou que isso era um hack :^}! Esta é uma versão modificada 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, 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 vai iniciar o processo de conexão entre usuários, e a sinalização será feita por rtcshare.appspot.com usando XHR e a API Channel do Google. No geral, ele funciona como a demonstração apprtc, exceto que o fluxo de vídeo comunicado ao usuário 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 protótipo abre uma nova guia com o URL fornecido por rtcshare.appspot.com, que tem uma string de consulta "número da sala" adicionada. É claro que 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 nesta fase inicial de desenvolvimento, ficamos impressionados com a capacidade de resposta e a estabilidade da captura e do compartilhamento de guias sem plug-ins.

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

Feliz programação e tudo de bom para 2013 de toda a equipe do HTML5R e do WebRTC!