Surimpression sur une vidéo dans un canvas html5

Dans cet article, je vous montre comment afficher ce que vous voulez en surimpression d’une vidéo. Pour mieux comprendre, je vous invite à consulter les articles :
jouer une vidéo dans une page html5;
lire une vidéo dans un canvas html5.

La palette à doudouce

Ceux qui aiment le sport et regardent les analyses d’après match connaissent probablement l’utilisation d’une palette qui consiste à crayonner en surimpression sur image. C’est ce que je vous propose de faire maintenant.

Rien de complexe, mais un seul pré requis : la vidéo doit être en pause sans quoi tout ce que vous afficherez dans le canvas html5 sera immédiatement effacé par l’image suivante de la vidéo.

 

Le bouton pour déclencher le dessin en surimpression dans le canvas html5

Vous allez déclencher les dessins en surimpression par le biais d’un bouton html : peu importe ce qui sera dessiné à l’écran.

Commencez par ajouter le bouton dans le code html comme ceci :

.....
<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>
 <br>
 <input type="button" id="bouton" value="dessiner">
</body>
....

Puis créez une fonction dessinerSurCanvas dessinant par exemple un gros cercle rouge.

 

La fonction javascript qui dessine

let dessinerSurCanvas = function() {
  let centerX = canvas.width / 2;
  let centerY = canvas.height / 2;
  let radius = 70;
 
  canvasContext.beginPath();
  canvasContext.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  canvasContext.lineWidth = 5;
  canvasContext.strokeStyle = '#FF0000';
  canvasContext.stroke();
}

Association de la fonction javascript au bouton

Cette fonction est à appeler sur le click du bouton : il est donc nécessaire de récupérer en javascript l’objet button en l’affectant à une nouvelle variable bouton comme ceci :

let bouton = document.getElementById("bouton");

Association du click sur le bouton à la fonction dessinerSurCanvas.

// appel de la fonction sur l'événement clic du bouton
bouton.addEventListener("click", dessinerSurCanvas); 

En l’état, vous n’aurez pas le temps de voir le cercle s’afficher puisque l’appel de la fonction setTimeout a toujours lieu.

Il faut donc appeler cette fonction uniquement lorsque la vidéo est en cours de visionnage. Dans le cas contraire, la vidéo étant en pause, elle affiche qu’une seule et même image.

Modifiez la fonction afficherDansCanvas afin qu’elle ne se rappelle que si la vidéo est cours de visionnage. Ce qui nous est indiqué par une nouvelle variable à créer nommée videoEnCours.

En début de script, créez et initialisez cette nouvelle variable (juste après la variable bouton).

let videoEnCours = true;

Puis conditionnez l’appel au setTimout avec cette variable.

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

Il faut maintenant pour stopper le rappel à afficherDansCanvas fixer la variable videoEnCours à la valeur false. Ceci se fait lorsque la vidéo est mise en pause et donc sur l’événement pause.

Créez une nouvelle fonction stopperAffichageDansCanvas qui fixe la valeur de videoEnCours à false.

let stopperAffichageDansCanvas = function() {
  videoEnCours = false;
}

Puis associer cette fonction à l’événement pause de la vidéo.

// appel de la fonction stopperAffichageDansCanvas sur l'événement pause de la vidéo
video.addEventListener("pause", stopperAffichageDansCanvas);

Pour terminer, il faut remettre la variable videoEnCours à la valeur true lorsque la vidéo redémarre et donc sur l’événement play.

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

Pour tester c’est ici : démarrez la vidéo, mettez la en pause et cliquer sur le bouton Dessiner.

Le résultat.

Explore l'univers de la création de jeux vidéo

Saisis ton prénom et ton e-mail pour recevoir ton livre GRATUIT et commence ton voyage ludique dès maintenant.

Bravo, jette un œil à ta boite mail pour télécharger ton guide.