WebRTC frappe Firefox, Android et iOS

Ces dernières semaines, WebRTC s'est passé de nombreuses choses. Passons à la mise à jour.

Nous nous réjouissons notamment de l'arrivée de WebRTC sur plusieurs navigateurs et plates-formes.

getUserMedia est désormais disponible dans Chrome sans indicateur, ainsi que dans Opera et Firefox Nightly/Aurora (pour Firefox, vous devez définir vos préférences). Consultez la démo multi-navigateur de getUserMedia à l'adresse simpl.info/gum, et découvrez les incroyables exemples de Chris Wilson d'utilisation de getUserMedia comme entrée pour le Web Audio.

webkitRTCPeerConnection est désormais une version stable de Chrome et n'a aucun indicateur. Les serveurs TURN sont compatibles avec Chrome 24 et versions ultérieures. Une démonstration ultra-simple de l'implémentation de RTCPeerConnection de Chrome est disponible sur simpl.info/pc. Une excellente application de chat vidéo est disponible à l'adresse apprtc.appspot.com. Voici une explication concernant son nom: après plusieurs itérations, il s'appelle actuellement webkitRTCPeerConnection. Les autres noms et implémentations ont été abandonnés. Une fois le processus de normalisation stabilisé, le préfixe webkit sera supprimé.)

WebRTC a également été implémenté pour les ordinateurs de bureau dans Firefox Nightly et Aurora, et pour iOS et Android via le navigateur Bowser d'Ericsson.

DataChannel

DataChannel est une API WebRTC permettant la communication peer-to-peer de données arbitraires hautes performances et à faible latence. L'API est semblable à WebSocket, mais la communication se fait directement entre les navigateurs, ce qui signifie que DataChannel peut être beaucoup plus rapide que WebSocket, même si un serveur de relais (TURN) est requis (en cas d'échec du "trou de poinçon" pour faire face aux pare-feu et aux NAT).

DataChannel est prévu pour la version 25 de Chrome, derrière un drapeau, mais il est possible qu'il ne dispose pas de cette version. Cette fonctionnalité sera utilisée à des fins de test uniquement, risque de ne pas être entièrement fonctionnelle et la communication ne sera pas possible avec la mise en œuvre de Firefox. Les versions ultérieures de DataChannel devraient être plus stables et seront implémentées de manière à permettre une interaction avec DataChannel dans Firefox.

Firefox Nightly/Aurora est compatible avec mozGetUserMedia, mozRTCPeerConnection et DataChannel (n'oubliez pas de définir vos préférences about:config).

Voici une capture d'écran de DataChannel s'exécutant dans Firefox:

Capture d'écran de Firefox DataChannel

Cette démonstration est disponible à l'adresse http://mozilla.github.com/webrtc-landing/data_test.html. Voici un extrait de code:

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);
        }

Pour plus d'informations et de démonstrations concernant la mise en œuvre de Firefox, consultez le blog hacks.mozilla.org. Début 2013, la compatibilité de base avec WebRTC devrait être disponible dans Firefox 18. D'autres fonctionnalités, telles que getUserMedia et les contraintes createOffer/Answer, ainsi que TURN (pour permettre la communication entre les navigateurs derrière des pare-feu), sont prévues.

Pour en savoir plus sur WebRTC, consultez Premiers pas avec WebRTC. Il existe même un livre WebRTC, disponible en version papier et dans plusieurs formats pour les e-books.

Contraintes de résolution

Les contraintes ont été implémentées dans Chrome 24 et versions ultérieures. Ces paramètres permettent de définir des valeurs de résolution vidéo pour les appels getUserMedia() et RTCPeerConnection addStream().

Vous trouverez un exemple à l'adresse suivante : simpl.info/getusermedia/constraints. Testez différentes contraintes en définissant un point d'arrêt et en ajustant les valeurs.

Quelques pièges... Les contraintes getUserMedia définies dans un onglet de navigateur affectent les contraintes de tous les onglets ouverts par la suite. Définir une valeur non autorisée pour les contraintes génère un message d'erreur plutôt énigmatique:

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

Il en va de même si vous essayez d'utiliser getUserMedia à partir du système de fichiers local, et non sur un serveur.

Streaming de la capture d'écran

La capture d'onglet est désormais disponible dans la version en développement de Chrome. Cela permet d'enregistrer la zone visible de l'onglet sous forme de flux, qui peut ensuite être utilisé localement ou avec le addStream() de RTCPeerConnection. Cette fonctionnalité est très utile pour créer des séquences et partager des pages Web. Pour en savoir plus, consultez la proposition de capture de contenu de l'onglet WebRTC.

N'hésitez pas à nous faire part de vos commentaires sur ce changement: nous aimerions savoir ce que vous faites avec ces API.

N'oubliez pas de signaler les bugs que vous rencontrez à l'adresse chromiumbugs.appspot.com.