From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- .../manipulating_video_using_canvas/index.md | 134 +++++++++++---------- 1 file changed, 69 insertions(+), 65 deletions(-) (limited to 'files/fr/web/api/canvas_api/manipulating_video_using_canvas') diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md index 80e8707ba3..1d307ad69e 100644 --- a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md +++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md @@ -7,20 +7,21 @@ tags: translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas original_slug: HTML/Manipulating_video_using_canvas --- -

+{{CanvasSidebar}} -

En combinant les possibilités de l'élément video avec celles de l'élément canvas, 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" (fond vert) en utilisant JavaScript.

+En combinant les possibilités de l'élément [`video`](/En/HTML/Element/Video) avec celles de l'élément [`canvas`](/en/HTML/Canvas), 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" (_fond vert_) en utilisant JavaScript. -

Voir l'exemple.

+[Voir l'exemple](/samples/video/chroma-key/index.xhtml). -

Le contenu du document

+## Le contenu du document -

Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous :

+Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous : -

<!DOCTYPE html>
-<html>
-  <head>
-    <style>
+```html
+
+
+  
+    
+    
+  
 
-  <body onload="processor.doLoad()">
-    <div>
-      <video id="video" src="video.ogv" controls="true"/>
-    </div>
-    <div>
-      <canvas id="c1" width="160" height="96"></canvas>
-      <canvas id="c2" width="160" height="96"></canvas>
-    </div>
-  </body>
-</html>

+ +

+ + +``` -

Les éléments clés à retenir sont :

+Les éléments clés à retenir sont : -

Ce document dispose de deux balises canvas, avec les IDs c1 et c2 : l'élément c1 est utilisé pour afficher l'image courante de la vidéo originale, pendant que c2 est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; c2 est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.
Le code JavaScript est importé dans le script nommé main.js ; 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é.
Quand le document se charge, la méthode processor.doLoad(), dans le script main.js, est exécutée.

+1. Ce document dispose de deux balises [`canvas`](/fr/docs/Web/HTML/Element/canvas), avec les IDs `c1 `et `c2 :` l'élément `c1` est utilisé pour afficher l'image courante de la vidéo originale, pendant que `c2` est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; `c2` est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert. +2. Le code JavaScript est importé dans le script nommé `main.js` ; 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é. +3. Quand le document se charge, la méthode `processor.doLoad()`, dans le script `main.js`, est exécutée. -

Le code JavaScript

+## Le code JavaScript -

Le code JavaScript main.js est composé de trois méthodes.

+Le code JavaScript `main.js` est composé de trois méthodes. -

Initialisation du lecteur avec effet d'incrustation (chroma-key)

+### Initialisation du lecteur avec effet d'incrustation (_chroma-key_) -

La métode doLoad() est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (chroma-key), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo.

+La métode `doLoad()` est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (_chroma-key_), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo. -

var processor;
+```js
+var processor;
 
   processor.doLoad = function doLoad() {
     this.video = document.getElementById('video');
@@ -81,17 +82,19 @@ original_slug: HTML/Manipulating_video_using_canvas
         self.height = self.video.videoHeight / 2;
         self.timerCallback();
       }, false);
-  },

+ }, +``` -

Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément video et les deux éléments canvas. Il définit également les contextes graphique de chacun des éléments canvas. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation.

+Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément `video` et les deux éléments `canvas`. Il définit également les contextes graphique de chacun des éléments `canvas`. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation. -

Ensuite, l'écouteur d'évènement addEventListener() est appelé sur l'élément video 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 timerCallback() pour surveiller l'avancement de la vidéo et appliquer l'effet visuel.

+Ensuite, l'écouteur d'évènement `addEventListener()` est appelé sur l'élément `video` 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 `timerCallback()` pour surveiller l'avancement de la vidéo et appliquer l'effet visuel. -

Le rappel du minuteur

+### Le rappel du minuteur -

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".

+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". -

processor.timerCallback = function timerCallback() {
+```js
+processor.timerCallback = function timerCallback() {
     if (this.video.paused || this.video.ended) {
       return;
     }
@@ -100,60 +103,61 @@ original_slug: HTML/Manipulating_video_using_canvas
     setTimeout(function() {
         self.timerCallback();
       }, 0);
-  },

+ }, +``` -

La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer. Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.

+La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer. Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire. -

Ensuite, il appelle la méthode computeFrame(), qui effectue l'effet "chroma-keying" sur l'image vidéo en cours.

+Ensuite, il appelle la méthode `computeFrame()`, qui effectue l'effet "chroma-keying" sur l'image vidéo en cours. -

La dernière chose que fait le rappel est d'appeler setTimeout() pour programmer un nouvel appel. En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.

+La dernière chose que fait le rappel est d'appeler `setTimeout()` pour programmer un nouvel appel. En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo. -

Manipulation des données des images vidéo

+### Manipulation des données des images vidéo -

La méthode computeFrame() , 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.

+La méthode `computeFrame()` , 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. -

processor.computeFrame = function computeFrame() {
+```js
+processor.computeFrame = function computeFrame() {
     this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
     let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
     let l = frame.data.length / 4;
 
-    for (let i = 0; i < l; i++) {
+    for (let i = 0; i < l; i++) {
       let r = frame.data[i * 4 + 0];
       let g = frame.data[i * 4 + 1];
       let b = frame.data[i * 4 + 2];
-      if (g > 100 && r > 100 && b < 43)
+      if (g > 100 && r > 100 && b < 43)
         frame.data[i * 4 + 3] = 0;
     }
     this.ctx2.putImageData(frame, 0, 0);
     return;
-  }

+ } +``` -

+² -

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 à :

+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 à : -

+![](video.png) -

À la seconde ligne, cette image est copiée dans le contexte graphique ctx1 du premier élément canvas, 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 drawImage(). Voici ce que cela donne :

+À la seconde ligne, cette image est copiée dans le contexte graphique `ctx1` du premier élément `canvas`, 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 `drawImage()`. Voici ce que cela donne : -

+![](sourcectx.png) -

La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode getImageData() sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. 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.

+La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode `getImageData() `sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. 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. -

La boucle for, 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 de fond importée de foo.png.

+La boucle `for`, 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 de fond importée de `foo.png`. -

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. 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.

+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. 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. -

L'image résultante ressemble à ceci :

+L'image résultante ressemble à ceci : -

+![](output.png) -

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.

+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. -

Voyez cet exemple réel.

+[Voyez cet exemple réel](/samples/video/chroma-key/index.xhtml). -

Voir aussi

+## Voir aussi -

Using audio and video

+- [Using audio and video](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) -- cgit v1.2.3-54-g00ecf