JSFiddle - React, Tailwind, and code Playground

by nhoughto5

HTML

<div id="message"></div>
<div id="result">
100%
</div></div>
<a href="https://drive.google.com/uc?export=download&id=0B1evNLhyLeY9VEdIMkZ5OWdqTHc">Link to Download Example video</a>
<br>
<input type="file" accept="video/*"/>
<div id='frameNumber'></div>

<video id="video" controls></video>
<canvas id="canvas"></canvas>

CSS

#result{
  width: 200px;
  height: auto;
  background-color: green;
  text-align: center;
  font-size: 2em;
}

JavaScript

var frameNumberDiv = document.getElementById('frameNumber');
var frameNum = 0, failCount = 0;
var resultDiv = document.getElementById('result');
var failed = 0;
(function load() {
		//debugger;
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var video = document.getElementById('video');
    canvas.width = 568;
    canvas.height = 640;
    video.addEventListener('play', function() {
        var that = this; //cache
        //debugger;
        (function loop() {
            if (!that.paused && !that.ended) {
                
                ctx.imageSmoothingEnabled= false;
                ctx.drawImage(that, 0, 0);
                var pixels = ctx.getImageData(0, 320 - 1, 16, 1).data;
                getFrameNumber(pixels);
                setTimeout(loop, 1000 / 60); // drawing at 30fps
            }
        })();
    }, 0);
})();

function getFrameNumber(pixels) {
		resultDiv.style.backgroundColor = 'green';
    var j = 0;
    var thisFrameNumber = 0;
   	var str = "Pixels: ";
    for (var i = 0; i < 16; i++) {
        str += pixels[j] + " ";
        thisFrameNumber += getBinary(pixels[j + 1], i);
        j += 4;
    }
    
    if(thisFrameNumber > 30000){
    	fail();
    }
    
    if(thisFrameNumber !== frameNum && thisFrameNumber !== (frameNum + 1) && frameNum !== 0){
    	failCount++;
      var perc = 100 * ((frameNum - failCount) / frameNum).toFixed(3);
      if(perc < 80){
      	fail();
      }
      resultDiv.innerHTML = perc + "%";
    }else{
    	frameNum = thisFrameNumber;
    }
    frameNumberDiv.innerHTML = "FrameNumber: " + thisFrameNumber;
    frameNum = thisFrameNumber;
}

function fail(){
	resultDiv.style.backgroundColor = 'red';
  resultDiv.innerHTML = 'Fail';
  //failed = 1;
}
function getBinary(pixel, binaryPlace) {
    const binary = [1, 2, 4, 8, 16, 32, 64, 128, 256,
        512, 1024, 2048, 4096, 8192, 16384, 32768
    ];
    if (pixel > 128) return 0;
    if (pixel < 128 &&...