WebRTC frappe Firefox, Android et iOS

De nombreux changements ont été apportés à WebRTC au cours des dernières semaines. Mise à jour nécessaire

Nous sommes particulièrement heureux de voir WebRTC arriver sur plusieurs navigateurs et plates-formes.

getUserMedia est désormais disponible dans Chrome sans indicateurs, ainsi que dans Opera et Firefox Nightly/Aurora (mais pour Firefox, vous devrez définir des préférences). Consultez la démonstration multinavigateur de getUserMedia sur simpl.info/gum et les exemples incroyables de Chris Wilson sur l'utilisation de getUserMedia comme entrée pour Web Audio.

webkitRTCPeerConnection est désormais disponible dans Chrome stable et ne nécessite aucun indicateur. La compatibilité avec le serveur TURN est disponible dans Chrome 24 et versions ultérieures. Vous trouverez une démonstration ultra-simple de l'implémentation de RTCPeerConnection dans Chrome sur simpl.info/pc et une excellente application de chat vidéo sur apprtc.appspot.com. (Explication du nom: après plusieurs itérations, il est actuellement connu sous le nom de webkitRTCPeerConnection. Les autres noms et implémentations sont obsolètes. Lorsque le processus de normalisation sera stabilisé, le préfixe webkit sera supprimé.)

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

DataChannel

DataChannel est une API WebRTC permettant de communiquer des données arbitraires en pair à pair, à hautes performances et à faible latence. L'API est simple, semblable à WebSocket, mais la communication s'effectue directement entre les navigateurs. DataChannel peut donc être beaucoup plus rapide que WebSocket, même si un serveur de relais (TURN) est requis (lorsque le "perforage de trou" pour faire face aux pare-feu et aux NAT échoue).

DataChannel est prévu pour la version 25 de Chrome, derrière un indicateur, mais il est possible qu'il ne soit pas disponible pour cette version. Cette fonctionnalité sera uniquement expérimentale, et il est possible qu'elle ne soit pas entièrement fonctionnelle. La communication ne sera pas possible avec l'implémentation de Firefox. DataChannel dans les versions ultérieures devrait être plus stable et sera implémenté pour permettre l'interaction avec DataChannel dans Firefox.

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

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

Capture d'écran de DataChannel dans Firefox

Vous pouvez accéder à cette démonstration à 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 en savoir plus et découvrir des démonstrations de l'implémentation de Firefox, consultez le blog hacks.mozilla.org. La prise en charge de base de WebRTC devrait être disponible dans Firefox 18 début 2013. Des fonctionnalités supplémentaires seront également prises en charge, y compris getUserMedia et les contraintes createOffer/Answer, ainsi que TURN (pour permettre la communication entre les navigateurs derrière des pare-feu).

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

Contraintes de résolution

Les contraintes ont été implémentées dans Chrome 24 et versions ultérieures. Vous pouvez les utiliser pour définir des valeurs pour la résolution vidéo pour les appels getUserMedia() et addStream() RTCPeerConnection.

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

Quelques points à retenir : Les contraintes getUserMedia définies dans un onglet du 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 cryptique:

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

De même, l'erreur se produit si vous essayez d'utiliser getUserMedia à partir du système de fichiers local, et non sur un serveur.

Capture d'écran en streaming

La capture d'onglet est désormais disponible dans la version en développement de Chrome. Cela permet de capturer la zone visible de l'onglet en tant que flux, qui peut ensuite être utilisé localement ou avec addStream() de RTCPeerConnection. Très utile pour le castage d'écran et le partage de pages Web. Pour en savoir plus, consultez la proposition de capture du contenu des onglets WebRTC.

N'hésitez pas à nous faire part de vos commentaires sur cette mise à jour. Nous aimerions connaître vos utilisations de ces API.

N'oubliez pas de signaler les bugs que vous rencontrez sur chromiumbugs.appspot.com.