JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<video autoplay>
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/mixer/movies/src/ballo_green_screen.mp4" type='video/mp4'>
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/mixer/movies/src/ballo_green_screen.webm" type='video/webm'>
          <source src="http://www.sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio7/mixer/movies/src/ballo_green_screen.ogv" type='video/ogg'>
</video>
<canvas></canvas>

CSS

video{
    display: none;
}

JavaScript

var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');


video.addEventListener('play', function(){
    extractFrame();
}, false);

function extractFrame(){
    requestAnimationFrame(extractFrame);
    ctx.drawImage(video,0,0,canvas.width, canvas.height);
        var dati = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height);
    var pixels = dati.data;
    for(var x=0; x < pixels.length; x +=4){
        var gray = Math.round((pixels[x] + pixels[x+1] + pixels[x+2])/3);   
        pixels[x] = pixels[x+1] = pixels[x+2] = gray; 
    }
    dati.data = pixels;        
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    ctx.putImageData(dati, 0,0);

}