jQuery addClass example

Change class name on click in jQuery

HTML

<video class="vid" autobuffer controls autoplay>
  <source id="mp4" src="https://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>


<canvas class="canvMotion" id="canvasMotion" width="100%" height="100%" style="border:solid 1px #ccc;"></canvas>

CSS

video {
  width: 400px;
  display: block;
}

JavaScript

var imageArray = new Array();
var imageScore = 0;


setInterval(function(){ 

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


//ctx.clearRect(0, 0, canvas.width, canvas.height);

  // draw video onto screen
ctx.globalCompositeOperation = 'difference';
ctx.drawImage(video, 0, 0, 200, 200);


var imageData = ctx.getImageData(0, 0, 200, 200);

for (var i = 0; i < imageData.data.length; i += 4) {
    var r = imageData.data[i] / 3;
    var g = imageData.data[i + 1] / 3;
    var b = imageData.data[i + 2] / 3;
    var pixelScore = r + g + b;
    
    if (pixelScore >= 20) {
        imageScore++;
		
    }
}

if (imageScore >= 32) {

    console.log('we have motion');
}
  


}, 3000);