Modifier en temps réel une vidéo dans un canvas html5
L’article précédent vous a montré comment lire une vidéo dans un canvas html5. Dans la continuité, 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>
let video = document.getElementById("laVideo");
let canvas = document.getElementById("leCanvas");
let canvasContext = canvas.getContext("2d");
let afficherDansCanvas = function() {
canvasContext.drawImage(video, 0, 0, 427, 240);
setTimeout(afficherDansCanvas, 0);
}
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.
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.
let transformerEnNoirEtBlanc = function( imageData ) {
let pixels = imageData.data;
for (let i = 0, n = pixels.length; i < n; i += 4) {
let 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).
let jouerVideoEtTransformer = function() {
canvasContext.drawImage(video,0,0,854,480,0,0,427,240);
let imageDataATransforme = canvasContext.getImageData(0,0,427,240);
let 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
let videoEnCours = false;
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.
