16 files changed, 210 insertions, 0 deletions
diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html
new file mode 100644
index 0000000000..b729a42222
--- /dev/null
+++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html
@@ -0,0 +1,52 @@
+---
+title: Un raycaster basique avec canvas
+slug: Un_raycaster_basique_avec_canvas
+tags:
+  - 3D
+  - Canvas
+  - Exemples
+  - Graphismes
+  - Web
+translation_of: Web/API/Canvas_API/A_basic_ray-caster
+---
+<p>{{CanvasSidebar}}</p>
+
+<p class="summary">Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D <span id="result_box" lang="fr"><span>à l'aide de la projection de rayons.</span></span></p>
+
+<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
+
+<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Ouvrir une nouvelle fenêtre</a></strong></p>
+
+<h2 id="Pourquoi.C2.A0.3F" name="Pourquoi.C2.A0.3F">Pourquoi ?</h2>
+
+<p>Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <code>&lt;canvas&gt;</code> dont j'avais <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">entendu parler (en)</a>, non seulement allait être supporté par Firefox, mais était<em> </em><strong>déjà</strong> supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.</p>
+
+<p>La <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas">présentation</a> et le <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas">tutoriel </a><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas"> </a>canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.</p>
+
+<h2 id="Comment.C2.A0.3F" name="Comment.C2.A0.3F">Comment ?</h2>
+
+<p>L'idée de base est d'employer  {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques">y conduire</a>, et je voulais voir si je pouvais y arriver.</p>
+
+<p>Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon.</p>
+
+<p>Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe<em> Tricks of the Game Programming Gurus</em> (<small>ISBN: 0672305070</small>), et d'un <a class="external" href="http://www.shinelife.co.uk/java-maze/">Projeteur de rayons Java</a> que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.</p>
+
+<h2 id="R.C3.A9sultats" name="R.C3.A9sultats">Résultats</h2>
+
+<p>Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement.</p>
+
+<p>De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =)</p>
+
+<h2 id="Le_RayCaster" name="Le_RayCaster">Le projeteur de rayons <em>(ray-caster)</em></h2>
+
+<p>De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un <a class="external" href="https://mdn.github.io/canvas-raycaster/">coup d'oeil</a>, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).</p>
+
+<p>Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément <code>&lt;canvas&gt;</code> et amusez-vous!<br>
+ <br>
+ <small><a href="fr/Un_raycaster_basique_avec_canvas/input.js">input.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/Level.js">Level.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/Player.js">Player.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/RayCaster.html">RayCaster.html</a> | <a href="fr/Un_raycaster_basique_avec_canvas/RayCaster.js">RayCaster.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/trace.css">trace.css</a> | <a href="fr/Un_raycaster_basique_avec_canvas/trace.js">trace.js</a> </small></p>
+
+<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir aussi</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas">Canvas tutorial</a></li>
+</ul>
diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html
new file mode 100644
index 0000000000..8a95281220
--- /dev/null
+++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html
@@ -0,0 +1,158 @@
+---
+title: Manipulation vidéo avec la balise canvas
+slug: HTML/Manipulating_video_using_canvas
+tags:
+  - Canvas
+  - Video
+translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas
+---
+<p>{{CanvasSidebar}}</p>
+
+<p class="summary">En combinant les possibilités de l'élément <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a> avec celles de l'élément <a class="internal" href="/en/HTML/Canvas" title="En/Canvas"><code>canvas</code></a>, vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (<em>fond vert</em>) en utilisant JavaScript.</p>
+
+<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">Voir l'exemple</a>.</p>
+
+<h2 id="Le_contenu_du_document">Le contenu du document</h2>
+
+<p>Le document XHTML utilisé <span id="result_box" lang="fr"><span>pour rendre ce contenu est montré ci-dessous :</span></span></p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+      <span class="selector token">body </span><span class="punctuation token">{</span>
+        <span class="property token">background</span><span class="punctuation token">:</span> black<span class="punctuation token">;</span>
+        <span class="property token">color</span><span class="punctuation token">:</span><span class="hexcode token">#CCCCCC</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+      <span class="selector token"><span class="id token">#c2</span> </span><span class="punctuation token">{</span>
+        <span class="property token">background-image</span><span class="punctuation token">:</span> <span class="token url">url(foo.png)</span><span class="punctuation token">;</span>
+        <span class="property token">background-repeat</span><span class="punctuation token">:</span> no-repeat<span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+      <span class="selector token">div </span><span class="punctuation token">{</span>
+        <span class="property token">float</span><span class="punctuation token">:</span> left<span class="punctuation token">;</span>
+        <span class="property token">border</span> <span class="punctuation token">:</span><span class="number token">1</span>px solid <span class="hexcode token">#444444</span><span class="punctuation token">;</span>
+        <span class="property token">padding</span><span class="punctuation token">:</span><span class="number token">10</span>px<span class="punctuation token">;</span>
+        <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+        <span class="property token">background</span><span class="punctuation token">:</span><span class="hexcode token">#3B3B3B</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>main.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>processor.doLoad()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>video</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video.ogv<span class="punctuation token">"</span></span> <span class="attr-name token">controls</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>true<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c1<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>160<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>96<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c2<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>160<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>96<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Les éléments clés à retenir sont :</p>
+
+<ol>
+ <li>Ce document dispose de deux balises <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="En/Canvas"><code>canvas</code></a>, avec les IDs <code>c1 </code>et <code>c2 :</code> l'élément <code>c1</code> est utilisé pour afficher l'image courante de la vidéo originale, pendant que <code>c2</code> est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; <code>c2</code> est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.</li>
+ <li>Le code JavaScript est importé dans le script nommé <code>main.js</code> ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé.</li>
+ <li>Quand le document se charge, la méthode <code>processor.doLoad()</code>, dans le script <code>main.js</code>, est exécutée.</li>
+</ol>
+
+<h2 id="Le_code_JavaScript">Le code JavaScript</h2>
+
+<p>Le code JavaScript <code>main.js</code> est composé de trois méthodes.</p>
+
+<h3 id="Initialisation_du_lecteur_avec_effet_d'incrustation_(chroma-key)">Initialisation du lecteur avec effet d'incrustation (<em>chroma-key</em>)</h3>
+
+<p>La métode <code>doLoad()</code> est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (<em>chroma-key</em>), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> processor<span class="punctuation token">;</span>
+
+  processor<span class="punctuation token">.</span>doLoad <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">doLoad</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>video <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>c1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'c1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1 <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>c1<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>c2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'c2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ctx2 <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>c2<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> self <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'play'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        self<span class="punctuation token">.</span>width <span class="operator token">=</span> self<span class="punctuation token">.</span>video<span class="punctuation token">.</span>videoWidth <span class="operator token">/</span> <span class="number token">2</span><span class="punctuation token">;</span>
+        self<span class="punctuation token">.</span>height <span class="operator token">=</span> self<span class="punctuation token">.</span>video<span class="punctuation token">.</span>videoHeight <span class="operator token">/</span> <span class="number token">2</span><span class="punctuation token">;</span>
+        self<span class="punctuation token">.</span><span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre>
+
+<p>Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément <code>video</code> et les deux éléments <code>canvas</code>. Il définit également les contextes graphique de chacun des éléments <code>canvas</code>. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation.</p>
+
+<p>Ensuite, l'écouteur d'évènement <code>addEventListener()</code> est appelé sur l'élément <code>video</code> pour détecter le moment où l'utilisateur va cliquer sur le bouton de lecture. Dès lors, le code récupère la hauteur et la largeur de la vidéo, que l'on divise par deux (nécessaire pour plus tard effectuer l'effet d'incrustation), puis on appelle la méthode <code>timerCallback()</code> pour surveiller l'avancement de la vidéo et appliquer l'effet visuel.</p>
+
+<h3 id="Le_rappel_du_minuteur"><span class="short_text" id="result_box" lang="fr"><span>Le rappel du minuteur</span></span></h3>
+
+<p><span id="result_box" lang="fr"><span>Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">processor<span class="punctuation token">.</span>timerCallback <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span>paused <span class="operator token">||</span> <span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span>ended<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">computeFrame</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> self <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+    <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        self<span class="punctuation token">.</span><span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer.</span> <span>Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Ensuite, il appelle la méthode <code>computeFrame()</code>, qui effectue l'effet </span></span> "chroma-keying" <span lang="fr"><span> sur l'image vidéo en cours.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La dernière chose que fait le rappel est d'appeler <code>setTimeout()</code> pour programmer  un nouvel appel.</span> <span>En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.</span></span></p>
+
+<h3 id="Manipulation_des_données_des_images_vidéo">Manipulation des données des images vidéo</h3>
+
+<p>La méthode <code>computeFrame()</code> , présentée ci-dessous, est en charge de récupérer les données de chaque image et d'y appliquer l'effet d'incrustation.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">processor<span class="punctuation token">.</span>computeFrame <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">computeFrame</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>width<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> frame <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1<span class="punctuation token">.</span><span class="function token">getImageData</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>width<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> l <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">.</span>length <span class="operator token">/</span> <span class="number token">4</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> l<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">let</span> r <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+      <span class="keyword token">let</span> g <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+      <span class="keyword token">let</span> b <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>g <span class="operator token">&gt;</span> <span class="number token">100</span> <span class="operator token">&amp;&amp;</span> r <span class="operator token">&gt;</span> <span class="number token">100</span> <span class="operator token">&amp;&amp;</span> b <span class="operator token">&lt;</span> <span class="number token">43</span><span class="punctuation token">)</span>
+        frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">3</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ctx2<span class="punctuation token">.</span><span class="function token">putImageData</span><span class="punctuation token">(</span>frame<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span></code></pre>
+
+<p>²</p>
+
+<p>Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à :</p>
+
+<p><img alt="video.png" class="default internal" src="/@api/deki/files/3282/=video.png" style="height: 192px; width: 320px;"></p>
+
+<p>À la seconde ligne, cette image est copiée dans le contexte graphique <code>ctx1</code> du premier élément <code>canvas</code>, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode <code>drawImage()</code>. Voici ce que cela donne :</p>
+
+<p><img alt="sourcectx.png" class="default internal" src="/@api/deki/files/3284/=sourcectx.png" style="height: 96px; width: 160px;"></p>
+
+<p><span id="result_box" lang="fr"><span>La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode <code>getImageData() </code>sur le premier contexte.</span> <span>Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler.</span> <span>La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La boucle <code>for</code>, qui commence à la ligne 6, parcourt les pixels du cadre  en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image</span><span> de fond importée de <code>foo.png</code>.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent.</span> <span>En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>L'image résultante ressemble à ceci :</span></span></p>
+
+<p><img alt="output.png" class="default internal" src="/@api/deki/files/3283/=output.png" style="height: 96px; width: 161px;"></p>
+
+<p><span id="result_box" lang="fr"><span>Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.</span></span></p>
+
+<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">Voyez cet exemple réel</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="En/Using audio and video in Firefox">Using audio and video</a></li>
+</ul>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html
index fadf515090..fadf515090 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
index 15eef37006..15eef37006 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html
index f44929e8be..f44929e8be 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html
index 6182dee589..6182dee589 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html
index 8fbb3ec79c..8fbb3ec79c 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/index.html
index cc646762dd..cc646762dd 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html
index 233d1baeb2..233d1baeb2 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html
index 761b5baf3d..761b5baf3d 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html
index 59a4d1ce35..59a4d1ce35 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/index.html
index a430b361bd..a430b361bd 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html
index d8e6e8383c..d8e6e8383c 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
index a2182f43c1..a2182f43c1 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html b/files/fr/web/api/canvas_api/tutorial/transformations/index.html
index bf21fab4c8..bf21fab4c8 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html b/files/fr/web/api/canvas_api/tutorial/using_images/index.html
index 50a286e0fa..50a286e0fa 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.html