JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://addyosmani.com/polyfillthehtml5gaps/getUserMedia.js/js/getusermedia.js"></script>
video: <div id="webcam">
<video width=300 height=250 autoplay></video>
</div>
diff:<canvas id="main" width=300 height=250></canvas>
<canvas id="hidden" width=300 height=250></canvas>
<canvas id="hidden2" width=300 height=250></canvas>

CSS

#hidden, #hidden2{
display:none;
}

JavaScript

var renderToCanvas = function() {
    if (options.context === "webrtc") {
        ctxHidden.drawImage(video, 0, 0, width, height);
        if (first) {
            first = false;
            ctxHidden2.drawImage(video, 0, 0, width, height);
            return;
        }
        highlightDiff();
    }
    else {
        console.log( "calling capture" );
        options.capture();
        return;
    }
}
var highlightDiff = function() {

    var pixels = ctxHidden.getImageData(0, 0, width, height);
    var endData = ctxHidden.getImageData(0, 0, width, height);
    var oldPixels = ctxHidden2.getImageData(0, 0, width, height);
    ctxHidden2.drawImage(video, 0, 0, width, height);
    var w = width,
        h = height,
        p = w * h,
        pix = p * 4,
        pix1, pix2, data = oldPixels.data,
        data2 = pixels.data,
        r3, g3, b3;
    while (p--) {
        if ((r3 = data[pix -= 4] - data2[pix]) < 0) data2[pix] = -r3;
        else data2[pix] = r3;
        if ((g3 = data[pix1 = pix + 1] - data2[pix1]) < 0) data2[pix1] = -g3;
        else data2[pix1] = g3;
        if ((b3 = data[pix2 = pix + 2] - data2[pix2]) < 0) data2[pix2] = -b3;
        else data2[pix2] = b3;
    }
    for (var i = 0; i < data2.length; i += 4) {
        if (data2[i] > 10 && data2[i + 1] > 10 && data2[i + 2] > 10) {
            endData.data[i + 1] = endData.data[i + 2] = 0;
            endData.data[i] = 200;
        }
    }

    ctx.putImageData(endData, 0, 0);
};


var video = document.querySelector("video"),
    canvas = document.querySelector("#main"),
    canvasHidden = document.querySelector("#hidden"),
    canvasHidden2 = document.querySelector("#hidden2"),
    ctx = canvas.getContext("2d"),
    ctxHidden = canvasHidden.getContext("2d"),
    ctxHidden2 = canvasHidden2.getContext("2d"),
    first = true,
    width = 300,
    height = 250,
    interval;

video.addEventListener("play", function() {


}, false);
video.addEventListener("ended", function() {
   ...