Modifier en temps réel une vidéo dans un canvas html5

 

Les deux précédents articles vous ont montré comment jouer une vidéo dans une page html5 et comment faire de la surimpression en temps réel sur une vidéo dans un canvas html5. Dans la continuité de ces deux articles, je vous propose cette fois de modifier en temps réel une vidéo dans un canvas html5.


Pour commencer, reprenez comme base le code source javascript html5 suivant qui lit une vidéo et l’affiche dans un canvas html5 :

<html>
 <body>
  <video id="laVideo" src="./buck_bunny.webm" controls autoplay>Video non supportee</video>
  <canvas id="leCanvas" width="427" height="240" style="border-style:solid;">Canvas non supportee</canvas>
 </body>
 <script>
 var video = document.getElementById("laVideo");
 var canvas = document.getElementById("leCanvas");
 var canvasContext = canvas.getContext("2d");

 // la fonction afficherDansCanvas
 var afficherDansCanvas = function() {
   canvasContext.drawImage(video, 0, 0, 427, 240);
   setTimeout(afficherDansCanvas, 0);
 }

 // appel de la fonction afficherDansCanvas sur l'événement play de la vidéo
 video.addEventListener("play", afficherDansCanvas);
 </script>
</html>

A partir de ce code source, vous allez modifier la vidéo en temps réel.

Dans cet exemple, la modification va consister à afficher la vidéo en noir et blanc à partir de la vidéo originelle qui est en couleur.

Pour rappel, cette fonction recopie le contenu de la vidéo lue par le biais de la balise video et l’affiche dans le canvas html5.

Pour de plus amples explications, référez vous à l’article Surimpression sur une vidéo dans un canvas html5.

La transformation ne pouvant se faire dans la balise video, cette balise ne fait que lire la vidéo.

C’est donc le canvas html5 qui affiche aussi la vidéo qui va subir les transformations. En effet, dans un canvas html5, il est possible de tout dessiner et entre autres modifier des pixels.

Le principe va être très proche de celui de la surimpression :
– une fonction appelée au lancement de la vidéo par le biais de l’événement play;
– cette fonction affiche la vidéo dans le canvas html5, en modifie les pixels puis les ré-affiche et enfin se rappelle elle-même.

La fonction

En réalité, vous allez créer deux fonctions :
– l’une est appelée au lancement du jeu vidéo remplaçant la fonction afficherDansCanvas, appelez la jouerVideoEtTransformer;
– l’autre appelée par la fonction jouerVideoEtTransformer chargée à proprement parler de la transformation : dans le cas présent le passage au noir et blanc.

La fonction qui transforme une image couleur d’un canvas html5 en image noir et blanc :

var transformerEnNoirEtBlanc = function( imageData )  {
  var pixels  = imageData.data;
  for (var i = 0, n = pixels.length; i < n; i += 4) {
    var grayscale = pixels[ i ] * .3 + pixels[ i+1 ] * .59 + pixels[ i+2 ] * .11;
    pixels[ i ] = grayscale;
    pixels[ i+1 ] = grayscale;
    pixels[ i+2 ] = grayscale;
  }
  return imageData;
}

La fonction jouerVideoEtTransformer appelée au lancement de la vidéo (qui se rappelle elle-même et qui remplace la fonction afficherDansCanvas) :

var jouerVideoEtTransformer  = function() {
  canvasContext.drawImage(video,0,0,854,480,0,0,427,240);
  var imageDataATransforme = canvasContext.getImageData(0,0,427,240);
  var imageDataTransforme = transformerEnNoirEtBlanc( imageDataATransforme );
  canvasContext.putImageData(imageDataATransforme, 0, 0);
  if ( videoEnCours )
    setTimeout(jouerVideoEtTransformer, 0);
 }

Cette dernière est appelée lorsque la vidéo est démarrée (clic sur la touche play) :

// appel de la fonction afficherDansCanvas sur l'événement play de la vidéo
video.addEventListener("play", function() {
  videoEnCours = true;
  jouerVideoEtTransformer();
});

La fonction de transformation change les couleurs pour les passer en noir et blanc. Rien de vous interdit d’en créer une autres, il existe des algos disponibles à foison sur le net.

Vous pourriez aussi modifier la fonction appelée sur l’événement play en lui ajoutant en paramètre la fonction transformation permettant ainsi de changer facilement et à la volée la transformation.

Pour tester, c’est ici.

[important]Des remarques, des améliorations, des idées, des coquilles : faites le savoir. Faites savoir si cet article vous a été utile par un commentaire ou les réseaux sociaux.[/important]

 

Posté dans html5Taggé canvas, canvas html5, HTML5, javascript html5, video canvas html5, video modifiée dan canvas html5  |  Laisser un commentaire

Répondre