Compartilhamento de tela com WebRTC

Sam Dutton

Twitter GitHub Glitch Mastodon Página inicial

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

Bom... outra primeira coisa: o compartilhamento de tela WebRTC.

Aqui está um screencast: youtube.com/watch?v=tD0QtBUZsF4

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

Essencialmente, criamos uma extensão experimental do Google Chrome que usa RTCPeerConnection e chrome.tabCapture para compartilhar um "vídeo" ao vivo de uma guia do navegador. Para testá-la, é necessário ter o Chrome Canary e ativar as APIs de extensão experimentais na página about:flags.

Nosso protótipo depende muito da incrível demonstração do appr.tc e, para ser franco, é uma tchau. Mas... é uma prova de conceito e funciona.

Veja como fizemos:

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 plano de fundo background.js da extensão anexa a si mesmo um iframe, que tem src como rtcshare.appspot.com. Em background.js, ele é usado apenas para receber valores como token e room_key. Dissemos que isso foi um hack :^}! Essa é uma versão recortada e canalizada de apprtc.appspot.com. 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 (gerado pelo aplicativo 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), background.js iniciará o processo de conexão de peering, e a sinalização será feita via rtcshare.appspot.com usando o XHR e a API Channel do Google. Resumindo, ela funciona como a demonstração apprtc, exceto pelo fato de que o stream de vídeo comunicado ao peering 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 do quarto" 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});

Nós prevemos muitos casos de uso interessantes para o compartilhamento de tela e, mesmo nesta fase inicial de desenvolvimento, estamos impressionados com a forma como a captura e o compartilhamento de guias sem plug-ins podem ser responsivos e estáveis.

Seus comentários são sempre bem-vindos: sobre esta extensão e sobre as APIs WebRTC em geral. Se você quiser saber mais sobre o WebRTC, confira o artigo sobre HTML5 Rocks ou nosso Guia de início rápido.

Bom trabalho! Desejo um bom ano de 2013 para todos da HTML5R e do WebRTC!