initial commit

5 files changed, 440 insertions, 0 deletions

diff --git a/files/fr/webrtc/communication-de-pair-a-pair-avec-webrtc/index.html b/files/fr/webrtc/communication-de-pair-a-pair-avec-webrtc/index.html
new file mode 100644
index 0000000000..72bd60d899
--- /dev/null
+++ b/files/fr/webrtc/communication-de-pair-a-pair-avec-webrtc/index.html
@@ -0,0 +1,97 @@
+---
+title: Communication de pair-à-pair avec WebRTC
+slug: WebRTC/communication-de-pair-a-pair-avec-WebRTC
+translation_of: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC
+---
+<p>{{SeeCompatTable}}</p>
+<p class="syntaxbox">Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi <code>navigator.mozGetUserMedia()</code> à accéder au microphone et à la webcam (<code>getUserMedia()</code> est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording).</p>
+<p class="syntaxbox">La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html" title="http://dev.w3.org/2011/webrtc/editor/webrtc.html">WebRTC</a> et <a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" title="http://dev.w3.org/2009/dap/camera/">getUserMedia</a>, ainsi que différents brouillons de IETF, principalement du <a href="http://tools.ietf.org/wg/rtcweb/">groupe de travail rtcweb</a>, mais aussi <a href="http://tools.ietf.org/wg/mmusic/">mmusic</a>, <a href="http://tools.ietf.org/wg/rmcat/">rmcat</a> et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à <a href="http://www.webrtc.org/reference">webrtc.org</a>.</p>
+<p style="margin-left: 40px;"><span style="color: #ff0000;"><strong>NOTE</strong></span>:  Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 <code>&lt;video&gt;</code> par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons.</p>
+<p>Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/">HTML5 Rocks</a>. On pourra trouver sur le site <a href="http://mozilla.github.com/webrtc-landing" style="line-height: inherit;" title="http://mozilla.github.com/webrtc-landing">webrtc-landing</a> u<span style="line-height: inherit;">ne série de page de test basique</span><span style="line-height: inherit;">.</span></p>
+<p><span style="line-height: inherit;">Il est possible de faire un appel simple de personne à personne  (y compris à ceux utilisant Chrome) à </span><a href="https://apprtc.appspot.com/" style="line-height: inherit;" title="https://apprtc.appspot.com/">apprtc.appspot.com</a>.</p>
+<p>Un article de <a href="https://hacks.mozilla.org/category/webrtc/">Hacks</a> décrit avec précision ce qu'il se passe dans une connexion <code>RTCPeerConnecion </code>(<a href="https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/">lien</a>) :</p>
+<p><img alt="Basics of RTCPeerConnection call setup" src="https://hacks.mozilla.org/wp-content/uploads/2013/05/webRTC-BasicsOfHowItWorks2.png" style="line-height: inherit; width: 898px; height: 805px;"></p>
+<h2 id="Spécifications">Spécifications</h2>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>WebRTC API</td>
+      <td>En cours de définition</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>getUserMedia API</td>
+      <td>En cours definition</td>
+      <td><a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">http://dev.w3.org/2011/webrtc/editor/getusermedia.html</a></td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<div>
+  {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fonctionnalité</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari (WebKit)</th>
+      </tr>
+      <tr>
+        <td>Support de base</td>
+        <td>Oui{{property_prefix("webkit")}}</td>
+        <td>Firefox 22</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+      </tr>
+      <tr>
+        <td>DataChannels</td>
+        <td>A partir de Chrome 29</td>
+        <td>Firefox 22</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fontionnalité</th>
+        <th>Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Phone</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Support préliminaire</td>
+        <td>Via Chrome (behind flag)</td>
+        <td>Activé sur versions Nightly et Aurora</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+      </tr>
+      <tr>
+        <td>DataChannels</td>
+        <td>{{CompatUnknown}}</td>
+        <td>Activé sur versions Nightly et Aurora</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<p> </p>
diff --git a/files/fr/webrtc/index.html b/files/fr/webrtc/index.html
new file mode 100644
index 0000000000..6977f32654
--- /dev/null
+++ b/files/fr/webrtc/index.html
@@ -0,0 +1,76 @@
+---
+title: WebRTC
+slug: WebRTC
+tags:
+  - WebRTC
+translation_of: Web/API/WebRTC_API
+---
+<p>Le RTC de WebRTC est synonyme de communications en temps réel, la technologie qui permet streaming audio / vidéo et le partage de données entre les clients de navigateur (pairs). Comme ensemble de normes, WebRTC permet à n'importe quel navigateur d'avoir la possibilité de partager les données d'application et d'effectuer des téléconférences entre pairs, sans la nécessité d'installer des plug-ins ou logiciels tiers.</p>
+
+<div> </div>
+
+<div>Les composants WebRTC sont accessibles avec JavaScript API. Sont actuellement en développement les flux de réseau API, ce qui représente un fichier audio ou un flux de données vidéo, et l'API de connexion, qui permet à deux ou plusieurs utilisateurs de communiquer par l'intermédiaire des navigateurs. Également en cours de développement : une API qui permet la communication par DataChannel d'autres types de données pour les jeux en temps réel, chat texte, transfert de fichiers, et ainsi de suite.</div>
+
+<div> </div>
+
+<div>Envie de découvrir WebRTC ? <a href="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video" title="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video">Suivre cette introduction vidéo </a>! (en Anglais)</div>
+
+<div> </div>
+
+<div> </div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation de WebRTC</h2>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/fr/docs/WebRTC/Introduction" title="https://developer.mozilla.org/fr/docs/WebRTC/Introduction">Introduction à WebRTC</a></dt>
+     <dd>Un guide d'introduction pour comprendre ce qu'est WebRTC et comment il fonctionne.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/Using_the_Network_Stream_API">Utilisation de l'API de flux réseau</a></dt>
+     <dd>Un guide d'utilisation de l'API de flux réseau pour diffuser de l'audio et de la vidéo.</dd>
+     <dt><a href="/fr/docs/WebRTC/communication-de-pair-a-pair-avec-WebRTC" title="https://developer.mozilla.org/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Communications de pair-à-pair avec WebRTC</a></dt>
+     <dd>Comment effectuer des communications pair-à-pair en utilisant l'Api WebRTC.</dd>
+     <dt><a href="https://developer.mozilla.org/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam" title="https://developer.mozilla.org/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam">Prendre des photos avec la webcam</a></dt>
+     <dd> </dd>
+     <dt><a href="/fr/docs/WebRTC/MediaStream_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a></dt>
+     <dd>L'API qui permet la production et la manipulation d'objets de flux multimédia.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia" title="https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia ()</a></dt>
+     <dd>La fonction de navigation qui permet d'accéder aux périphériques du système des médias.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/WebRTC" title="https://developer.mozilla.org/en-US/docs/tag/WebRTC">Afficher tout ...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">Obtenir de l'aide de la communauté</h2>
+
+    <p>Lors du développement de sites et d'applications Web qui tirent parti des technologies WebRTC, il peut être utile d'engager la conversation avec les autres.</p>
+
+    <ul>
+     <li>Consultez le forum au sujet des Médias: {{DiscussionList ("dev-média", "mozilla.dev.media")}}</li>
+    </ul>
+
+    <ul>
+     <li>Posez votre question sur le canal IRC de Mozilla médias: # media</li>
+    </ul>
+
+    <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">N'oubliez pas la netiquette...</a></span></p>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Sujets liés</h2>
+
+    <ul>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video" title="/en-US/docs/Using_HTML5_audio_and_video">Utiliser l'audio et la vidéo HTML5</a></li>
+    </ul>
+
+    <h2 class="Tools" id="Ressource">Ressource</h2>
+
+    <ul>
+     <li>{{spec("http://www.w3.org/TR/webrtc/", "WebRTC specification", "wd")}}</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/fr/webrtc/introduction/index.html b/files/fr/webrtc/introduction/index.html
new file mode 100644
index 0000000000..0b14f417fb
--- /dev/null
+++ b/files/fr/webrtc/introduction/index.html
@@ -0,0 +1,21 @@
+---
+title: Introduction à WebRTC
+slug: WebRTC/Introduction
+translation_of: Web/API/WebRTC_API/Session_lifetime
+---
+<div class="note">
+  <p>WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.</p>
+</div>
+<h2 id="Etablir_la_connexion">Etablir la connexion</h2>
+<p>La connexion initiale entre les pairs doit être accomplie par un service d'application qui se charge de la découverte des utilisateurs, communication, translation d'adresse réseau (NAT) avec les flux de données.</p>
+<h3 id="Signalisation">Signalisation</h3>
+<p>La signalisation est le mécanisme par lequel les pairs envoient des messages de contrôle à chacun dans le but d'établir le protocole de communication, le canal et la méthode. Ceux-ci ne sont pas spécifiés dans le standard WebRTC. En fait, le dévelopeur peut choisir n'importe quel protocole de message (comme SIP ou XMPP), et n'importe quel canal de communication duplex (comme WebSocket ou XMLHttpRequest) en tandem avec une API de connexion persistante à un serveur (comme l'<a href="https://developers.google.com/appengine/docs/python/channel/overview" title="https://developers.google.com/appengine/docs/python/channel/overview">API Google Channel</a>) pour AppEngine.</p>
+<h2 id="Transmission">Transmission</h2>
+<h3 id="getUserMedia">getUserMedia</h3>
+<p>Objet LocalMediaStream</p>
+<h2 id="Reception">Reception</h2>
+<p>Le support WebRTC dans Firefox est caché derrière une préférence. Allez à <a title="about:config">about:config</a> et positionnez 'media.navigator.enabled' à 'true'.</p>
+<div class="note">
+  <p>Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: <a href="http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html">dom/media/tests/local_video_test.html</a>. Essayez aussi la <a href="http://webrtc-demo.herokuapp.com/mozdemo">demo de service d'appel</a>, sa page source, et son <a href="https://github.com/anantn/webrtc-demo/">serveur source</a>.</p>
+</div>
+<p> </p>
diff --git a/files/fr/webrtc/mediastream_api/index.html b/files/fr/webrtc/mediastream_api/index.html
new file mode 100644
index 0000000000..6722bc8885
--- /dev/null
+++ b/files/fr/webrtc/mediastream_api/index.html
@@ -0,0 +1,85 @@
+---
+title: API MediaStream
+slug: WebRTC/MediaStream_API
+tags:
+  - API
+  - Audio
+  - Media
+  - Overview
+translation_of: Web/API/Media_Streams_API
+---
+<div>{{DefaultAPISidebar("Media Capture and Streams")}}</div>
+
+<p>L'<strong>API Processing MediaStream</strong>, souvent appelée <em>Media Stream API</em> ou <em>Stream API</em>, est la partie de <a href="/fr/docs/WebRTC">WebRTC</a> décrivant un flux de données audio ou vidéo, les méthodes pour les manipuler, les contraintes associées au type de données, les erreurs et succès des callbacks avec les données asynchrones, et les évènements déclenchés durant le processus.</p>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<p>L'API est basée sur la manipulation de l'objet {{domxref("MediaStream")}} représentant un flux de données audio ou vidéo. Typiquement, un {{domxref("MediaStream")}} est une simple chaine URL qui peut être utilisée pour référencer une donnée stockée dans un {{domxref("File")}} DOM, ou un objet {{domxref("Blob")}} crée avec {{domxref("window.URL.createObjectURL()")}}, tel que décrit dans <a href="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video">cette vidéo</a>.</p>
+
+<p>Un {{domxref("MediaStream")}} consiste en zéro ou plus objets {{domxref("MediaStreamTrack")}}, représentant différentes <strong>pistes</strong> audio ou vidéos. Chaque {{domxref("MediaStreamTrack")}} peut avoir un ou plusieurs <strong>canal</strong>. Le canal représente la plus petite unité d'un flux média, tel un signal audio d'un haut-parleur, séparé en <em>gauche</em> et <em>droite</em> sur une piste audio en stéréo.</p>
+
+<p><code><font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif">Les objets </font></code> {{domxref("MediaStream")}} ont une seule <strong>entrée </strong>et une seule <strong>sortie</strong>. Un objet {{domxref("MediaStream")}} généré par <a href="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a> est dit <em>local</em>, et sa source d'entrée provient de l'une des caméra ou microphone de l'utilisateur. Un objet {{domxref("MediaStream")}} non local peut représenter un média tel que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}, un flux provenant du réseau et obtenu via l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a>, ou un flux créé en utilisant l'API <a href="/en-US/docs/Web_Audio_API">Web Audio</a> {{domxref("MediaStreamAudioSourceNode")}}. La sortie d'un objet {{domxref("MediaStream")}} est liée à un <strong>consommateur</strong>. Elle peut-être un élément média tel que {{HTMLElement("audio")}} ou {{HTMLElement("video")}}, l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a> ou l'<a href="/en-US/docs/Web_Audio_API">API Web Audio</a> {{domxref("MediaStreamAudioDestinationNode")}}.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Dans ces articles de référence, on trouvera les informations fondamentales sur les différentes interfaces qui composent l'API <em>Media Capture and Streams API</em>.</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("CanvasCaptureMediaStreamTrack")}}</li>
+ <li>{{domxref("InputDeviceInfo")}}</li>
+ <li>{{domxref("MediaDeviceKind")}}</li>
+ <li>{{domxref("MediaDeviceInfo")}}</li>
+ <li>{{domxref("MediaDevices")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li>{{domxref("MediaStreamConstraints")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MediaStreamTrackEvent")}}</li>
+ <li>{{domxref("MediaTrackCapabilities")}}</li>
+ <li>{{domxref("MediaTrackConstraints")}}</li>
+ <li>{{domxref("MediaTrackSettings")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+ <li>{{domxref("NavigatorUserMedia")}}</li>
+ <li>{{domxref("NavigatorUserMediaError")}}</li>
+ <li>{{domxref("OverconstrainedError")}}</li>
+ <li>{{domxref("URL")}}</li>
+</ul>
+</div>
+
+<p>Les premières versions de la spécification pour Media Capture and Streams API incluaient des interfaces séparées <code>AudioStreamTrack</code> et <code>VideoStreamTrack</code>, chacunes basées sur {{domxref("MediaStreamTrack")}} et qui représentaient des types de flux différents. Celles-ci n'existent plus et il faut utiliser <code>MediaStreamTrack</code> directement à la place.</p>
+
+<h2 id="Évènements">Évènements</h2>
+
+<div class="index">
+<ul>
+ <li>{{event("addtrack")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("muted")}}</li>
+ <li>{{event("overconstrained")}}</li>
+ <li>{{event("removetrack")}}</li>
+ <li>{{event("started")}}</li>
+ <li>{{event("unmuted")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides_et_tutorials">Guides et tutorials</h2>
+
+<p>Les articles qui suivent fournissent des manuels et guides pour utiliser cette API et réaliser des certaines tâches avec elle.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.MediaStream")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a> - la page d'introduction à l'API</li>
+ <li>{{domxref("mediaDevices.getUserMedia()")}}</li>
+ <li><a href="/fr/docs/Web/API/WebRTC_API/Taking_still_photos">Prendre des clichés avec WebRTC</a> : un tutoriel/une démonstration sur l'utilisation de <code>getUserMedia()</code>.</li>
+</ul>
diff --git a/files/fr/webrtc/prendre_des_photos_avec_la_webcam/index.html b/files/fr/webrtc/prendre_des_photos_avec_la_webcam/index.html
new file mode 100644
index 0000000000..854d0dd3f7
--- /dev/null
+++ b/files/fr/webrtc/prendre_des_photos_avec_la_webcam/index.html
@@ -0,0 +1,161 @@
+---
+title: Prendre des photos avec la webcam
+slug: WebRTC/Prendre_des_photos_avec_la_webcam
+tags:
+  - API
+  - Avancé
+  - WebRTC
+  - getusermedia
+translation_of: Web/API/WebRTC_API/Taking_still_photos
+---
+<h2 id="Introduction_et_demo">Introduction et demo</h2>
+<p>Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir <a href="http://jsfiddle.net/codepo8/agaRe/4/" title="http://jsfiddle.net/codepo8/agaRe/4/">le code final en action dans JSFiddle</a>. Il y a aussi une version plus avancée pour charger des photos sur <strong>imgur</strong> en JavaScript, disponible en <a href="https://github.com/codepo8/interaction-cam/" title="https://github.com/codepo8/interaction-cam/">code source sur GitHub</a> ou <a href="http://codepo8.github.com/interaction-cam/" title="http://codepo8.github.com/interaction-cam/">en demo</a>.</p>
+<h2 id="Les_balises_HTML">Les balises HTML</h2>
+<p>La première chose dont vous avez besoin pour accéder à la webcam en utilisant WebRTC est un élément {{HTMLElement("video")}} et un élément {{HTMLElement("canvas")}} dans la page. L'élément video reçoit un flux de WebRTC et l'élément canvas est nécessaire pour capture l'image de la vidéo. Nous ajoutons aussi une image qui sera par la suite remplacée par la capture de la webcam.</p>
+<pre class="brush:html;">&lt;video id="video"&gt;&lt;/video&gt;
+&lt;button id="startbutton"&gt;Prendre une photo&lt;/button&gt;
+&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;img src="http://placekitten.com/g/320/261" id="photo" alt="photo"&gt;
+</pre>
+<h2 id="Le_script_complet">Le script complet</h2>
+<p>Voice le JavaScript complet en un seul morceau. Nous allons expliquer chaque section en détail ci-après.</p>
+<pre class="brush:js;">(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      cover        = document.querySelector('#cover'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;
+
+  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+
+  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );
+
+  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);
+
+  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);
+
+})();</pre>
+<h2 id="Les_explications_pas_à_pas.">Les explications pas à pas.</h2>
+<p>Voici ce qui se passe.</p>
+<h3 id="Fonction_anonyme">Fonction anonyme</h3>
+<pre class="brush:js;">(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      cover        = document.querySelector('#cover'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;</pre>
+<p>Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard.</p>
+<div class="warning">
+ <p>À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.</p>
+</div>
+<h3 id="Obtenir_la_vidéo">Obtenir la vidéo</h3>
+<p>Maintenant, nous devons récupérer la vidéo de la webcam. Pour l'instant c'est préfixé par les différents navigateurs, nous devons donc tester quelle forme est supportée:</p>
+<pre class="brush:js;">  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);</pre>
+<p>Nous demandons au navigateur de nous donner la vidéo sans le son et de récupérer le flux dans une fonction callback:</p>
+<pre class="brush:js;">  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );</pre>
+<p>Firefox Nightly nécessite de définir la propriété <code>mozSrcObject</code> de l'élément vidéo pour pouvoir le jouer; pour les autres navigateurs, définissez l'attribut <code>src</code>. Alors que Firefox peut utiliser les flux directement, Webkit et Opera ont besoin de créer un objet URL. Cela sera standardisé dans un futur proche.</p>
+<h3 id="Redimensionner_la_vidéo">Redimensionner la vidéo</h3>
+<p>Ensuite nous devons redimensionner la vidéo aux bonnes dimensions.</p>
+<pre class="brush:js;">  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);</pre>
+<p>Nous nous abonnons à l'évènement <code>canplay</code> de la vidéo et lisons ses dimensions en utilisant <code>videoHeight</code> et <code>videoWidth</code>. Elles ne sont pas disponibles de manière fiable avant que l'évènement ne soit déclenché. Nous positionnons <code>streaming</code> à true pour faire cette vérification une seule fois vu que l'évènement <code>canplay</code> se déclenchera à répétition.</p>
+<p>C'est tout ce qu'il faut pour jouer la vidéo.</p>
+<h3 id="Prendre_une_photo">Prendre une photo</h3>
+<p>Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons un gestionaire d'événements au bouton de démarrage pour appeler la fonction <code>takepicture</code> function.</p>
+<pre class="brush:js;">  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);</pre>
+<p>Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface,  et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL.</p>
+<pre class="brush:js;">  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+})();</pre>
+<p>C'est tout ce qu'il faut pour afficher un flux de la webcam et en prendre une photo, que ce soit sur Chrome, Opera ou Firefox.</p>
+<h2 id="Support">Support</h2>
+<p>Actuellement, l'accès à la caméra via WebRTC est supporté dans Chrome, Opera et Firefox Nightly 18. Activer WebRTC dans Firefox Nightly demande que vous positionnez une valeur dans la configuration:</p>
+<ul>
+ <li>Entrez "about:config" dans la barre d'adresse et confirmez les changements</li>
+ <li>Trouver l'entrée "media.navigator.enabled" et positionnez la à true</li>
+</ul>