<div class="holder" data-title="Comparing Data"> <div id="content"> <canvas id="originalCanvas" width=320 height=240></canvas> <canvas id="trackerCanvas" width=320 height=240></canvas> <br /> <canvas id="eyeCanvas" width=80 height=60></canvas> <canvas id="bwCanvas" width=80 height=60></canvas> <canvas id="thCanvas" width=80 height=60></canvas> <br /> <canvas id="oldCanvas" width=80 height=60></canvas> <canvas id="curCanvas" width=80 height=60></canvas> </div> </div>
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; font-size: 20px; color: #000; text-align: center; -webkit-font-smoothing: subpixel-antialiased; } .holder { position: relative; width: 100%; height: 100%; background-color: #f9f9f9; } .holder:before { content: attr(data-title); position: absolute; top: 45%; left: 0; width: 100%; visibility: visible; } .holder:after { content: 'click to activate'; position: absolute; top: 55%; left: 0; width: 100%; visibility: visible; } #content { text-align: center; visibility: hidden; } body.active .holder:before, body.active .holder:after { visibility: hidden; } body.active #content { visibility: visible; }
// properties var content, webcam, tracker, raf, eyeRect, interval, oldData, curData; // canvas and contexts var originalCanvas, originalContext, trackerCanvas, trackerContext, eyeCanvas, eyeContext, bwCanvas, bwContext, thCanvas, thContext, oldCanvas, oldContext, curCanvas, curContext; var settings = { contrast: 3, brightness: 0.5, threshold: 80, }; function init() { content = document.getElementById('content'); // adds listeners to activate and deactivate on iframe focus window.addEventListener('focus', start, false); window.addEventListener('blur', stop, false); // instanciate our Webcam class webcam = new Webcam(); // tracker tracker = new clm.tracker(); tracker.init(window.pModel); // eye rect eyeRect = { x: 0, y: 0, w: 0, h: 0, }; // original canvas and context originalCanvas = document.getElementById('originalCanvas'); originalContext = originalCanvas.getContext('2d'); // tracker canvas and context trackerCanvas = document.getElementById('trackerCanvas'); trackerContext = trackerCanvas.getContext('2d'); // eye canvas and context eyeCanvas = document.getElementById('eyeCanvas'); eyeContext = eyeCanvas.getContext('2d'); // black & white canvas and context bwCanvas = document.getElementById('bwCanvas'); bwContext = bwCanvas.getContext('2d'); // threshold canvas and context thCanvas = document.getElementById('thCanvas'); thContext = thCanvas.getContext('2d'); // old canvas and context oldCanvas = document.getElementById('oldCanvas'); oldContext = oldCanvas.getContext('2d'); // cur canvas and context curCanvas = document.getElementById('curCanvas'); curContext = curCanvas.getContext('2d'); } function start(e) { e.preventDefault(); document.body.className = 'active'; webcam.start() tracker.start(webcam.domElement); raf = requestAnimationFrame(update); interval = setInterval(correlation, 100); } function stop(e) { e.preventDefault(); document.body.className = ''; webcam.stop(); tracker.stop(); cancelAnimationFrame(raf); clearInterval(interval); } function update() { raf = requestAnimationFrame(update); originalContext.clearRect(0, 0, originalContext.canvas.width, originalContext.canvas.height); trackerContext.clearRect(0, 0, trackerContext.canvas.width, trackerContext.canvas.height); bwContext.clearRect(0, 0, bwContext.canvas.width, bwContext.canvas.height); thContext.clearRect(0, 0, thContext.canvas.width, thContext.canvas.height); oldContext.clearRect(0, 0, oldContext.canvas.width, oldContext.canvas.height); curContext.clearRect(0, 0, curContext.canvas.width, curContext.canvas.height); // draw video element to canvas originalContext.drawImage(webcam.domElement, 0, 0, originalContext.canvas.width, originalContext.canvas.height); // draw tracker to canvas trackerContext.drawImage(webcam.domElement, 0, 0, trackerContext.canvas.width, trackerContext.canvas.height); tracker.draw(trackerCanvas); // extract right eye data var pos = tracker.getCurrentPosition(); if (pos) { eyeRect.x = pos[23][0]; eyeRect.y = pos[24][1]; eyeRect.w = pos[25][0] - pos[23][0]; eyeRect.h = pos[26][1] - pos[24][1]; // draw eye eyeContext.drawImage(originalCanvas, eyeRect.x, eyeRect.y, eyeRect.w, eyeRect.h, 0, 0, eyeContext.canvas.width, eyeContext.canvas.height); // black and white var data = CanvasFilters.getPixels(eyeCanvas); var grayscale = CanvasFilters.grayscale(data, settings.contrast, settings.brightness); bwContext.putImageData(grayscale, 0, 0); // threshold var data = CanvasFilters.getPixels(eyeCanvas); var grayscale = CanvasFilters.grayscale(data, settings.contrast, settings.brightness); var threshold = CanvasFilters.threshold(grayscale, settings.threshold); thContext.putImageData(threshold, 0, 0); // draw old data set if (oldData) { oldContext.putImageData(oldData, 0, 0); } // draw cur data set if (curData) { curContext.putImageData(curData, 0, 0); } } } function correlation() { if (curData) { oldData = curData; } curData = thContext.getImageData(0, 0, thContext.canvas.width, thContext.canvas.height); } init();