Utiliser la balise canvas pour lire une vidéo – HTML5

La balise video de HTML permet de lire directement une vidéo dans le navigateur. Une autre possibilité que propose HTML5 est de lire une vidéo dans un <canvas>. Cela peut avoir plusieurs avantages : modification de l’affichage (taille, découpe, etc…), ajout d’informations en surimpression de la vidéo, de filtres de couleurs, lecture de plusieurs vidéo dans une seule balise <canvas>, etc…

demo_video_canvas_HTML5

C’est ce que nous allons voir dans ce tutoriel. La première étape va être de définir le code HTML et CSS de base :

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      height: 100%;
      width: 100%;
    }
    #color {
      width: 80px;
    }
    #opacity {
      width: 30px;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
</head>
<body>      
    <canvas width="600" height="320" id="video">
      Votre navigateur ne supporte pas la balise canvas
    </canvas>
    <div id="bar">
      <input type="checkbox" id="filter" /> Filtre : <input type="text" value="255, 0, 0" id="color_filter" /> (opacity : <input type="text" value="0.3" id="opacity_filter" />)<br />
      <input type="checkbox" id="bruit" /> Bruit : <input type="text" value="0, 0, 0" id="color_bruit" /> (opacity : <input type="text" value="0.7" id="opacity_bruit" />)
    </div>
</body>
</html>

On a donc uniquement une balise canvas qui va servir à lire notre vidéo puis un div où on va définir 2 options de surimpression pour la vidéo : un filtre de couleur et du bruit.


Maintenant nous allons instancier un élément <video> et la lire :

var video = document.createElement('video');
video.width = 600; video.height = 320;
$(video).html('<source src="../video_HTML5/video.webm" type="video/webm" /><source src="../video_HTML5/video.mp4" type="video/mp4" />');
video.volume = 0;
video.play();

On définit donc la vidéo avec sa taille et 2 sources pour être compatible avec la plupart des navigateurs (webm et mp4). Ensuite on rend la vidéo muette en mettant le volume a 0 et on lance la lecture. A ce stade notre vidéo n’est pas affiché puisque notre élément video n’est pas intégré à la page. Ce que nous voulons c’est que la lecture s’affiche dans le canvas donc :

var ctx = $('#video')[0].getContext('2d');
setInterval(video_to_canvas, 30);

function video_to_canvas()
{         
  ctx.drawImage(video, 0, 0, video.width, video.height);
}

On récupère le context du canvas pour dessiner dedans et on défini un appel à la fonction video_to_canvas toutes les 30 millisecondes.
Cette fonction va dessiner l’image courante de la vidéo dans la canvas.

Ajoutons maintenant les 2 fonctionnalités donc nous avons parlé tout à l’heure : un filtre de couleur et du bruit . Nous avons défini ce code HTML tout à l’heure :

<div id="bar">
  <input type="checkbox" id="filter" /> Filter : <input type="text" value="255, 0, 0" id="color_filter" /> (opacity : <input type="text" value="0.3" id="opacity_filter" />)<br />
  <input type="checkbox" id="bruit" /> Bruit : <input type="text" value="0, 0, 0" id="color_bruit" /> (opacity : <input type="text" value="0.7" id="opacity_bruit" />)
</div>

Nous avons pour chacune des fonctionnalités 3 champs : 1 case à cocher (fonction activée ou non), 2 champs texte (couleur et opacité). Modifions donc maintenant la fonction video_to_canvas de tout à l’heure pour prendre en compte ces champs et leurs valeurs :

function video_to_canvas()
{         
  ctx.drawImage(video, 0, 0, video.width, video.height);
  if($('#filter:checked').length > 0)
  {
    ctx.fillStyle = 'rgba('+$('#color_filter').val()+', '+$('#opacity_filter').val()+')';
    ctx.fillRect(0,0,video.width,video.height);
  }
  if($('#bruit:checked').length > 0)
  {
    for(var i=0; i<300; i++)
    {
      ctx.fillStyle = 'rgba('+$('#color_bruit').val()+', '+$('#opacity_bruit').val()+')';
      ctx.fillRect(Math.random()*video.width,Math.random()*video.height,1,2);
    }
  }
}
  • On dessine un rectangle de la couleur et de l’opacité choisis sur toutes la taille du canvas si le filtre est activé
  • On ajoute 300 « petits points de bruit » de la couleur et de l’opacité choisis à des emplacement aléatoire dans le canvas

Voila c’est terminé pour ce tuto ! A vous maintenant d’imaginer d’autres fonctionnalités avec les possibilités offertes par HTML5…

Démonstration video et canvas HTML5Télécharger le ZIP du tutoriel


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*