Convertire un video html5 in bianco e nero in realtime

L'accoppiata canvas/video può dare grandi soddisfazioni, questo perché è possibile disegnare sul canvas ogni singolo frame di un video e manipolarlo a piacere, qui vediamo come convertire un video in bianco e nero.

Poche parole per spiegare come funziona la storia e poi subito il codice che a dire la verità si spiega da se.

Sostanzialmente quello che si deve fare comprende i seguenti passi:

  • attaccare un evento play al tag video in modo da avviare la funzione di conversione
  • catturare il frame corrente del video e 'salvarlo' nel context del canvas
  • ciclare su ogni px dell'immagine sul canvas per convertire il rispettivo colore in una tonalità di grigio
  • disegnare la nuova immagine ottenuta
  • settare il timeout per rieseguire la stessa conversione al 'prossimo' frame

Si suppone di avere a che fare con il seguente documento html5:

<!DOCTYPE html>
<html lang="it_IT">
 <head>
  <meta charset="utf-8" />
  <title>Video HTML5 test</title>
 </head>
 <body>

  <h1>Video</h1>

  <video id="video" controls>
   <source src="video.webm" type="video/webm" >
  </video>

  <canvas id="canvas"></canvas>

 </body>
</html>

Ed ecco il semplice javascript che ci permette di visualizzare nel canvas il video in bianco e nero, o più propriamente in scala di grigi:

<script>

 var video, width, height, canvas, ctx;

 document.addEventListener('DOMContentLoaded', function() {

  video = document.getElementById('video');

  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');

  video.addEventListener('play', function() {
   width = video.videoWidth;
   height = video.videoHeight;
   canvas.width = width;
   canvas.height = height;

   blackAndWhite();
  }, false);

 });

 function blackAndWhite() {

  if(video.paused || video.ended) return false;

  ctx.drawImage(video, 0, 0, width, height);

  var frame = ctx.getImageData(0, 0, width, height);
  var l = frame.data.length / 4;
  for (var i = 0; i < l; i++) {
   var r = frame.data[i * 4 + 0];
   var g = frame.data[i * 4 + 1];
   var b = frame.data[i * 4 + 2];

   var gray = Math.round(0.299*r + 0.587*g + 0.114*b);

   frame.data[i * 4 + 0] = gray;
   frame.data[i * 4 + 1] = gray;
   frame.data[i * 4 + 2] = gray;
  }

  ctx.putImageData(frame, 0, 0);

  setTimeout(blackAndWhite, 33);
 }

</script>

Categorie

internet opendata piemonte web jeff php programmazione tutorial curiosita governance vim cucina sviluppo apple hardware imac crisi economia politica torino didattica flash illustrazione ricorrenze lapalisse novita release informazione html5 javascript website musica mootools mercato societa vita lavoro HMI interfaccia utente gino gino-news gino-multimedia modernità usa burocrazia jquery django testing libri nova americana etica impresa solidarietà css comunicazioni trasloco ufficio vita sociale entropia immagini fotografia concorso polymer webcomponents programming crowdfunding progetti finanziamento fallimento opensource deploy otto python