<div class="holder" data-title="Face Tracking"> <div id="content"> <canvas id="originalCanvas" width=320 height=240></canvas> <canvas id="trackerCanvas" width=320 height=240></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; } p { margin: 0; font-size: 12px; } canvas { border: 1px solid black; } .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; // canvas and contexts var originalCanvas, originalContext, trackerCanvas, trackerContext; 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); // original canvas and context originalCanvas = document.getElementById('originalCanvas'); originalContext = originalCanvas.getContext('2d'); // tracker canvas and context trackerCanvas = document.getElementById('trackerCanvas'); trackerContext = trackerCanvas.getContext('2d'); } function start(e) { e.preventDefault(); document.body.className = 'active'; webcam.start() tracker.start(webcam.domElement); raf = requestAnimationFrame(update); } function stop(e) { e.preventDefault(); document.body.className = ''; webcam.stop(); tracker.stop(); cancelAnimationFrame(raf); } 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); // 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); } init();