O WebRTC chega ao Firefox, Android e iOS

Muita coisa aconteceu com o WebRTC nas últimas semanas. É hora de atualizar!

Em particular, estamos muito felizes em ver o WebRTC chegando a vários navegadores e plataformas.

O getUserMedia já está disponível no Chrome sem flags, no Opera e no Firefox Nightly/Aurora. No Firefox, você precisa definir as preferências. Confira a demonstração de getUserMedia em vários navegadores em simpl.info/gum e os exemplos incríveis de Chris Wilson sobre o uso de getUserMedia como entrada para o Web Audio.

webkitRTCPeerConnection agora está no Chrome estável e não tem flag. O suporte ao servidor TURN está disponível no Chrome 24 e em versões mais recentes. Há uma demonstração ultrasimples da implementação do RTCPeerConnection do Chrome em simpl.info/pc e um ótimo aplicativo de chat por vídeo em apprtc.appspot.com. Uma explicação sobre o nome: depois de várias iterações, ele é conhecido como webkitRTCPeerConnection. Outros nomes e implementações foram descontinuados. Quando o processo de padronização for estabilizado, o prefixo webkit será removido.)

O WebRTC também foi implementado para computadores no Firefox Nightly e Aurora, e para iOS e Android pelo navegador Bowser da Ericsson.

DataChannel

O DataChannel é uma API do WebRTC para comunicação ponto a ponto de dados arbitrários com alto desempenho e baixa latência. A API é semelhante à WebSocket, mas a comunicação ocorre diretamente entre os navegadores. Portanto, o DataChannel pode ser muito mais rápido que o WebSocket, mesmo que um servidor de retransmissão (TURN) seja necessário (quando a "perforação de buraco" falhar ao lidar com firewalls e NATs).

O DataChannel está planejado para a versão 25 do Chrome, atrás de uma flag, mas pode não estar disponível nessa versão. Isso será apenas para experimentação, pode não ser totalmente funcional e a comunicação não será possível com a implementação do Firefox. O DataChannel nas versões mais recentes deve ser mais estável e será implementado para permitir a interação com o DataChannel no Firefox.

O Firefox Nightly/Aurora oferece suporte a mozGetUserMedia, mozRTCPeerConnection e DataChannel. Não se esqueça de definir as preferências de about:config.

Esta é uma captura de tela do DataChannel em execução no Firefox:

Captura de tela do DataChannel do Firefox

Esta demonstração está em http://mozilla.github.com/webrtc-landing/data_test.html. Confira um snippet de código:

pc1.onconnection = function() {
    log("pc1 onConnection ");
    dc1 = pc1.createDataChannel("This is pc1",{}); // reliable (TCP-like)
    dc1 = pc1.createDataChannel("This is pc1",{outOfOrderAllowed: true, maxRetransmitNum: 0}); // unreliable (UDP-like)
    log("pc1 created channel " + dc1 + " binarytype = " + dc1.binaryType);
    channel = dc1;
    channel.binaryType = "blob";
    log("pc1 new binarytype = " + dc1.binaryType);

    // Since we create the datachannel, don't wait for onDataChannel!
    channel.onmessage = function(evt) {
    if (evt.data instanceof Blob) {
        fancy_log("*** pc2 sent Blob: " + evt.data + ", length=" + evt.data.size,"blue");
    } else {
        fancy_log('pc2 said: ' + evt.data, "blue");
    }
    }
    channel.onopen = function() {
    log("pc1 onopen fired for " + channel);
    channel.send("pc1 says Hello...");
    log("pc1 state: " + channel.state);
    }
    channel.onclose = function() {
    log("pc1 onclose fired");
    };
    log("pc1 state:" + channel.readyState);
        }

Mais informações e demonstrações sobre a implementação do Firefox estão disponíveis no blog hacks.mozilla.org. O suporte básico do WebRTC será lançado no Firefox 18 no início de 2013, e o suporte para outros recursos está planejado, incluindo getUserMedia e restrições de createOffer/Answer, além de TURN (para permitir a comunicação entre navegadores por firewalls).

Para mais informações sobre o WebRTC, consulte Primeiros passos com o WebRTC. Há até um livro sobre o WebRTC, disponível em formato impresso e em vários formatos de e-book.

Restrições de resolução

A restrição foi implementada no Chrome 24 e versões mais recentes. Eles podem ser usados para definir valores de resolução de vídeo para chamadas getUserMedia() e addStream() do RTCPeerConnection.

Confira um exemplo em simpl.info/getusermedia/constraints. Teste várias restrições definindo um ponto de interrupção e ajustando os valores.

Alguns problemas... As restrições getUserMedia definidas em uma guia do navegador afetam as restrições de todas as guias abertas posteriormente. A definição de um valor não permitido para restrições gera uma mensagem de erro bastante obscura:

navigator.getUserMedia error:  NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}

O mesmo erro ocorre se você tentar usar getUserMedia no sistema de arquivos local, e não em um servidor.

Captura de tela de streaming

A captura de guias já está disponível no Canal de desenvolvedor do Chrome. Isso permite capturar a área visível da guia como um stream, que pode ser usado localmente ou com o addStream() do RTCPeerConnection. Muito útil para transmissão de tela e compartilhamento de páginas da Web. Para mais informações, consulte a proposta de captura de conteúdo da guia WebRTC.

Deixe um comentário sobre esta atualização: queremos saber o que você está fazendo com essas APIs.

...e não se esqueça de registrar os bugs encontrados em chromiumbugs.appspot.com.