WebRTC llega a Firefox, Android y iOS

En las últimas semanas, ocurrieron muchos cambios en WebRTC. Es hora de actualizar la app

En particular, nos entusiasma ver que WebRTC llega a varios navegadores y plataformas.

getUserMedia ahora está disponible en Chrome sin marcas, así como en Opera y Firefox Nightly/Aurora (aunque en Firefox deberás configurar las preferencias). Consulta la demostración multinavegador de getUserMedia en simpl.info/gum y mira los ejemplos increíbles de Chris Wilson sobre el uso de getUserMedia como entrada para Web Audio.

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

WebRTC también se implementó para computadoras en Firefox Nightly y Aurora, y para iOS y Android a través del navegador Bowser de Ericsson.

DataChannel

DataChannel es una API de WebRTC para la comunicación punto a punto de datos arbitrarios de alto rendimiento y baja latencia. La API es simple, 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 el "tránsito de puertos" para controlar los firewalls y las NAT).

Se planea que DataChannel esté disponible en la versión 25 de Chrome, detrás de una marca, aunque es posible que no se incluya en esta versión. Esto será solo para experimentación, es posible que no sea completamente funcional y no será posible la comunicación 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 de about:config).

Esta es una captura de pantalla de DataChannel ejecutándose en Firefox:

Captura de pantalla de DataChannel de Firefox

Esta demostración se encuentra en http://mozilla.github.com/webrtc-landing/data_test.html. Este es 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);
        }

Puedes encontrar más información y demostraciones de la implementación de Firefox en el blog hacks.mozilla.org. La compatibilidad básica con WebRTC se lanzará en Firefox 18 a principios de 2013, y se planea la compatibilidad con funciones adicionales, como getUserMedia y las restricciones de 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 de WebRTC, disponible en formato impreso y en varios formatos de libro electrónico.

Restricciones de resolución

Las restricciones se implementaron 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. Para probar diferentes restricciones, establece un punto de interrupción y ajusta los valores.

Ten en cuenta lo siguiente: Las restricciones de getUserMedia establecidas en una pestaña del navegador afectan las restricciones de todas las pestañas que se abren posteriormente. Si estableces un valor no permitido para las restricciones, se muestra un mensaje de error bastante críptico:

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

Del mismo modo, se produce un error si intentas usar getUserMedia desde el sistema de archivos local, no en un servidor.

Captura de pantalla en tiempo real

La Captura de pestañas ahora está disponible en el canal para desarrolladores de Chrome. 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 transmitir contenido y compartir páginas web. Para obtener más información, consulta la propuesta de captura de contenido de pestañas de WebRTC.

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

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