O WebRTC chega ao Firefox, Android e iOS

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

Em particular, estamos muito entusiasmados com a chegada do WebRTC em vários navegadores e plataformas.

O getUserMedia agora está disponível no Chrome sem flags, bem como no Opera e no Firefox Nightly/Aurora. No entanto, para o Firefox, será necessário definir preferências. Confira a demonstração do getUserMedia em vários navegadores em simpl.info/gum e confira os exemplos incríveis de Chris Wilson de como usar o getUserMedia como entrada para o Web Audio.

O webkitRTCPeerConnection agora está na versão estável do Chrome e sem flag. O suporte ao servidor TURN está disponível no Chrome 24 e em versões mais recentes. Há uma demonstração bem simples da implementação do RTCPeerConnection do Chrome em simpl.info/pc (em inglês) e um ótimo aplicativo de chat por vídeo em apprtc.appspot.com. Depois de várias iterações, ele é conhecido como webkitRTCPeerConnection. Outros nomes e implementações foram descontinuados. Quando o processo padrão estiver estabilizado, o prefixo webkit será removido.

O WebRTC agora também foi implementado para computadores no Firefox Nightly e no Aurora e para iOS e Android pelo navegador Ericsson (em inglês).

DataChannel

O DataChannel é uma API WebRTC para comunicação ponto a ponto de dados arbitrários de alto desempenho, baixa latência. A API é simples e parecida com o WebSocket, mas a comunicação ocorre diretamente entre os navegadores. Dessa forma, o DataChannel pode ser muito mais rápido do que o WebSocket, mesmo que seja necessário um servidor de redirecionamento (TURN) (quando houver uma falha para lidar com firewalls e NATs).

O DataChannel está planejado para a versão 25 do Chrome, atrás de uma sinalização, embora possa não estar associado a essa 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. Em versões posteriores, o DataChannel será mais estável e será implementado para permitir a interação com o DataChannel no Firefox.

O Firefox Nightly/Aurora oferece suporte para mozGetUserMedia, mozRTCPeerConnection e DataChannel (mas não se esqueça de definir suas preferências about:config).

Aqui está uma captura de tela do DataChannel em execução no Firefox:

captura de tela do Firefox DataChannel

Esta demonstração está disponível em http://mozilla.github.com/webrtc-landing/data_test.html (em inglês). 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 da implementação do Firefox estão disponíveis no blog hacks.mozilla.org (em inglês). O suporte básico ao WebRTC deve ser lançado no Firefox 18 no início de 2013 e está planejado para outros recursos, incluindo getUserMedia e restrições createOffer/Answer, bem como TURN (para permitir a comunicação entre navegadores por trás de firewalls).

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

Restrições de resolução

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

Um exemplo está disponível em simpl.info/getusermedia/constraints. Explore restrições diferentes definindo um ponto de interrupção e ajustando os valores.

Algumas pegadinhas... As restrições getUserMedia definidas em uma guia do navegador afetam as restrições para todas as guias abertas posteriormente. Definir um valor não permitido para restrições gera uma mensagem de erro bastante complexa:

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

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

Captura de tela de streaming

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

Mantenha-nos informados comentando esta atualização: gostaríamos de saber o que você está fazendo com essas APIs.

E não se esqueça de registrar os bugs que encontrar em chromiumbugs.appspot.com.