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 e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.