Débuter avec l'API WebRTC
=========================


> WebRTC est un nouveau front dans la longue guerre pour un web ouvert et désencombré. <br>
> [Brendan Eich](http://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/), Inventeur du langage JavaScript

Communication en temps réelle sans plugins
------------------------------------------

Imaginez un monde où votre téléphone, téléviseur et votre ordinateur peuvent tous communiquer sur une plateforme commune. Imaginez que ce pourrait être facile d'ajouter des appels vidéos et des échanges clients à clients de données dans votre application web. C'est la vision de WebRTC.


Vous voulez essayer ? WebRTC est maintenant disponible dans Google Chrome, Opéra, Firefox et très prochainement Internet Explorer. Un bon endroit pour commencer est de démarrer la simple application de tchat vidéo à l'adresse [apprtc.appspot.com](apprtc.appspot.com).

-  Ouvrez la page [http://apprtc.appspot.com/](http://apprtc.appspot.com/) depuis Google Chrome, Firefox ou encore Opéra.
-  Cliquez sur le bouton *autoriser* pour laisser l'application utiliser votre webcam.
-  Ouvrez l'URL affichée en bas de page dans un nouvel onglet ou, mieux encore, depuis un autre ordinateur.

Il y a une procédure pas à pas de cette application [plus bas](http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple) dans cet article.

Mise en route
-------------

- Ayez un aperçu de WebRTC depuis la présentation I/O de Google (les slides sont disponibles [ici](http://io13webrtc.appspot.com/)) : <br>
<iframe width="560" height="315" src="http://www.youtube.com/embed/p2HzZkd2A40" frameborder="0" allowfullscreen=""></iframe>
- Si vous n'avez jamais utilisé la méthode *getUserMedia()*, allez voir [l'article de HTML5 Rocks](http://www.html5rocks.com/en/tutorials/getusermedia/intro/) sur le sujet et regardez le code source de la simple application à [simpl.info/gum](simpl.info/gum).
- Get to grips with the RTCPeerConnection API by reading through the simple example below and the demo at simpl.info/pc, which implements WebRTC on a single web page.
-  Familiarisez vous avec l'API *RTCPeerConnection* en lisant le [le simple exemple suivant](http://www.html5rocks.com/en/tutorials/webrtc/basics/#simpleRTCPeerConnectionExample) et regardez la démo à l'adresse [http://www.simpl.info/pc](http://www.simpl.info/pc) qui implémente WebRTC sur une simple page web.
-  Apprenez en plus pour savoir comment WebRTC utilise les serveurs pour transférer des données, passer à travers les pares-feu et les réseaux NAT en lisant le coude source et les logs de la console depuis [http://apprtc.appspot.com/](http://apprtc.appspot.com/)


**Vous pouvez encore aller directement dans notre [laboratoire de développement WebRTC](https://www.bitbucket.org/webrtc/codelab) : un guide étape par étape qui explique comment construire une application compléte de tchat vidéo, avec un simple transfert serveur. **

Une courte histoire de WebRTC
-----------------------------

L'un des derniers défis majeurs pour le web est d'ajouter la communication humaine par la voix et la vidéo : la communication en temps réelle. (*Note du traducteur, RTC signifie Real Time Communication c'est à dire communication en temps réelle*). RTC devrait être aussi naturel dans une application web que d'entrer du texte dans un champ de texte. Sans cela, nous somme limité dans nos capacités à innover et développer de nouveaux moyens pour permettre aux gens d'interagir entre eux.


Historiquement, RTC était limité et compliqué, il requérait des technologies audio et vidéo coûteuses, au niveau des licences ou du développement maison. Intégrer la technologie RTC avec le contenu existant, les données et services avaient été difficile et long à mettre en place, spécialement au niveau du web.


Le tchat vidéo de Gmail devint populaire en 2008 et en 2011 Google introduisit Hangouts, qui utilisait les services Google Talk (comme le fait Gmail). Google a acheté GIPS, une compagnie qui a développé beaucoup de composantes requises pour RTC, comme des codecs audio ou encore des techniques de réduction de bruits de fond. Google a ensuite mis les technologies développées par GIPS en open source et engagait avec les organismes de normalisation concernés comme l'IETF ou encore le W3C pour obtenir un consensus de l'industrie. En mai 2011, Ericsson construit [la première implémentation de WebRTC](https://labs.ericsson.com/developer-community/blog/beyond-html5-peer-peer-conversational-video).


WebRTC est maintenant implémenté dans les standards ouverts pour la communication en temps réelle, sans plugin vidéo, audio et communication de données. Le besoin est réel :

* Beaucoup de services utilisent déjà la communication en temps réelle mais requièrent un téléchargement, des applications natives ou encore des plugins. Cela inclus Skype, Facebook (qui utilise Skype) et Google Hangouts (qui utilise le plugin Google Talk).
* Télécharger, installer et mettre à jour les plugins peuvent être difficiles, sources d'erreurs et ennuyeux.
* Les plugins peuvent parfois être difficile à déployer, débugger, localiser les problèmes, tester et maintenant et requièrent des licences, une intégration complexe et une technologie coûteuse. C'est souvent difficile de persuader quelqu'un d'installer un plugin avant de visiter votre site !

Les principes qui ont guidés la réalisation du projet WebRTC sont que ses APIs douvent être open source, gratuite, standardisée, incluses dans les navigateurs web et plus efficace que les technologies existantes.

Où sommes nous maintenant ?
---------------------------

WebRTC implémente trois APIs :

* [MediaStream](http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-mediastream) (alias *getUserMedia*)
* [RTCPeerConnection](http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-rtcpeerconnection)
* [RTCDataChannel](http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-rtcdatachannel)

getUserMedia is available in Chrome, Opera and Firefox. Take a look at the cross-browser demo at [simpl.info/gum]() and Chris Wilson's amazing examples using getUserMedia as input for Web Audio.

**getUserMedia** est disponible sur Google Chrome, Opéra et Firefox (bientôt Internet Explorer). Faites un tour à la démonstration compatible tout navigateurs à l'adresse [simpl.info/gum](simpl.info/gum) et les [exemples fantastiques](http://webaudiodemos.appspot.com/) de Chris Wilson qui utilisent *getUserMedia* comme entrée pour l'audio web.


RTCPeerConnection est disponible sur Chrome (versions bureau et mobile), Opéra (bureau et la dernière bêta mobile) et dans Firefox. A mot d'explication à propos du nom de l'API : après plusieurs intérations, RTCPeerConnection est aujourd'hui implémenté dans Chrome et Opéra comme webkitRTCPeerConnection et par Firefox comme étant mozRTCPeerConnection. Les autres noms et implémentations ont été dépréciés. Quand les processus de standardisation seront stables, les préfixes vont être supprimés. Il y a une application ultra simple de démonstration de l'implémentation Chromium de RTCPeerConnection à l'adresse [simpl.info/pc](simpl.info/pc) et une superbe application de tchat vidéo à l'adresse [apprtc.appspot.com](apprtc.appspot.com). Cette application utilise [adapter.js](https://apprtc.appspot.com/js/adapter.js), un shim JavaScript, maintenu par Google qui abstrait les différences entre les navigateurs ainsi que les changements de spécification.

**RTCDataChannel** est supporté par Chrome 25, Opéra 18, Firefox 22 et supérieur.


La fonctionnalité WebRTC est disponible dans Internet Explorer par Google [Chrome Frame](https://groups.google.com/forum/#!topic/discuss-webrtc/tKoh1wrI8ig) et par skype (acquis par Microsoft en 2011 qui envisage de passer par WebRTC. Cette technologie a d'ailleurs été intégrée avec [WebKitGTK+](https://labs.ericsson.com/developer-community/blog/beyond-html5-conversational-voice-and-video-implemented-webkit-gtk) et les applications natives [Qt](http://www.youtube.com/watch?v=Vm5ebKWKNE8).

*Edit du traducteur : Microsoft a annoncé le support de WebRTC dans son navigateur : [http://blogs.msdn.com/b/ie/archive/2014/10/27/bringing-interoperable-real-time-communications-to-the-web.aspx](http://blogs.msdn.com/b/ie/archive/2014/10/27/bringing-interoperable-real-time-communications-to-the-web.aspx)*.

### Un petit mot d'avertissement ###

Soyez attentifs sur le fait qu'une plateforme "supporte" WebRTC. le plus souvent, cela signifie qu'elle ne supporte seulement *getUserMedia* mais pas les autres composantes de WebRTC.

Ma première application WebRTC
------------------------------

Les applications WebRTC ont besoin de faire plusieurs choses :

* Obtenir un flux audio, vidéo ou un flux de données quelconque.
* Connaitre les informations réseau telles les adresses IP, les ports utilisé et les échanger avec les autres clients WebRTC (les *peers*) pour activer la connexion même à travers les pare-feu et les réseaux NATs.
* Coordonner les signaux pour reporter les erreurs, initialiser ou fermer les sessions de communication.
* Échanger l'information des périphériques et du client, comme la résolution supportée par le client ou encore les codecs utilisés.
* Communiquer les flux audio, vidéo ou de données.


Pour obtenir et communiquer des flux de données, WebRTC implémente les APIs suivantes :

* [MediaStream ](https://dvcs.w3.org/hg/audio/raw-file/tip/streams/StreamProcessing.html): obtenir l'accès aux flux, comme la caméra ou le microphone de l'utilisateur.
* [RTCPeerConnection ](http://dev.w3.org/2011/webrtc/editor/webrtc.html#rtcpeerconnection-interface): permettre les appels audio ou vidéo, avec des facilités pour le cryptage ou la gestion de la bande passante.
* [RTCDataChannel ](http://dev.w3.org/2011/webrtc/editor/webrtc.html#rtcdatachannel): communication p2p de données génériques.

(Il y a une discussion détaillée  des aspects réseaux et transition de données de WebRTC [ci-dessous](http://www.html5rocks.com/en/tutorials/webrtc/basics/#signaling)).

MediaStream (alias getUserMedia)
--------------------------------