WebRTC llega a Firefox, Android y iOS

Con WebRTC, se produjo mucho durante las últimas semanas. ¡Es hora de una actualización!

En particular, nos emociona ver la llegada de WebRTC a varios navegadores y plataformas.

getUserMedia ahora está disponible en Chrome sin funciones experimentales, así como en Opera y Firefox Nightly/Aurora (aunque para Firefox, deberás establecer preferencias). Observa la demostración para varios navegadores de getUserMedia en simpl.info/gum y consulta los increíbles ejemplos de Chris Wilson sobre el uso de getUserMedia como entrada de audio web.

webkitRTCPeerConnection ahora se encuentra en Chrome estable y no tiene marcas. La compatibilidad con el servidor TURN está disponible en Chrome 24 y versiones posteriores. Hay una demostración muy simple de la implementación de RTCPeerConnection de Chrome en simpl.info/pc y una excelente aplicación de videochat en apprtc.appspot.com. (Explicación del nombre: después de varias iteraciones, actualmente se conoce como webkitRTCPeerConnection. Otros nombres e implementaciones dejaron de estar disponibles. Cuando se estabilice el proceso de estándares, se quitará el prefijo webkit).

WebRTC también se implementó para computadoras de escritorio en Firefox Nightly y Aurora, y para iOS y Android por medio del navegador Ericsson.

DataChannel

DataChannel es una API de WebRTC para comunicación entre pares de datos arbitrarios de alto rendimiento y baja latencia. La API es similar a WebSocket, pero la comunicación se produce directamente entre los navegadores, por lo que DataChannel puede ser mucho más rápido que WebSocket, incluso si se requiere un servidor de retransmisión (TURN) (cuando falla la "perforación" para lidiar con firewalls y NAT).

DataChannel está planificado para la versión 25 de Chrome, detrás de un indicador, aunque es posible que no la incluya. Esto será solo para fines experimentales, es posible que no funcione por completo y no será posible comunicarse con la implementación de Firefox. DataChannel en versiones posteriores debería ser más estable y se implementará para permitir la interacción con DataChannel en Firefox.

Firefox Nightly/Aurora admite mozGetUserMedia, mozRTCPeerConnection y DataChannel (pero no olvides configurar tus preferencias about:config).

A continuación, se muestra una captura de pantalla de DataChannel que se ejecuta en Firefox:

Captura de pantalla de Firefox DataChannel

Esta demostración está en http://mozilla.github.com/webrtc-landing/data_test.html. A continuación, se muestra un fragmento 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);
        }

En el blog hacks.params.org encontrarás más información y demostraciones sobre la implementación de Firefox. La compatibilidad básica con WebRTC se lanzará en Firefox 18 a principios de 2013. Se planea admitir funciones adicionales, como getUserMedia y las restricciones createOffer/Answer, así como TURN (para permitir la comunicación entre navegadores detrás de firewalls).

Para obtener más información sobre WebRTC, consulta Cómo comenzar a usar WebRTC. Incluso hay un libro WebRTC disponible en versión impresa y varios formatos de libro electrónico.

Restricciones de resolución

Se implementó la restricción en Chrome 24 y versiones posteriores. Se pueden usar para establecer valores de resolución de video para las llamadas getUserMedia() y RTCPeerConnection addStream().

Hay un ejemplo en simpl.info/getusermedia/constraints. Establece un punto de interrupción y ajusta los valores para jugar con diferentes restricciones.

Un par de trampas... Las restricciones de getUserMedia establecidas en una pestaña del navegador afectan las restricciones de todas las pestañas que se abran posteriormente. Configurar un valor no permitido para las restricciones genera un mensaje de error bastante críptico:

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

Lo mismo sucede con el error si intentas usar getUserMedia desde el sistema de archivos local, no desde un servidor.

Captura de pantalla de transmisión

Captura de pestaña ahora está disponible en el canal de Chrome Dev Esto permite capturar el área visible de la pestaña como una transmisión, que luego se puede usar de forma local o con addStream() de RTCPeerConnection. Es muy útil para la detección de imágenes y el uso compartido de páginas web. Para obtener más información, consulta la propuesta de captura de contenido de la pestaña de WebRTC.

Para mantenernos al tanto, comenta esta actualización. Nos encantaría saber qué estás haciendo con estas APIs.

y no olvides informar los errores que encuentres en chromiumbugs.appspot.com.