JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<script src="https://rawgit.com/eduardolundgren/tracking.js/master/build/tracking-min.js"></script>
<script src="https://rawgit.com/eduardolundgren/tracking.js/master/build/data/face-min.js"></script>
<div class="demo-frame">
    <div class="demo-container">
        <video id="video" width="320" height="240" preload autoplay loop muted></video>
        <canvas id="canvas" width="320" height="240"></canvas>
    </div>
</div>

CSS

video, canvas {
    margin-left: 230px;
    margin-top: 120px;
    position: absolute;
}

JavaScript

var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');

tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track('#video', tracker, { camera: true });
var awayTimer, away = false, hereTimer;
tracker.on('track', function(event) {
    if (event.data.length) {
        clearTimeout(awayTimer);
        delete awayTimer;
    }
    
    if (!event.data.length) {
        clearTimeout(hereTimer);  
        delete hereTimer;
    }
    
    if (!event.data.length && !away) {
        awayTimer = setTimeout(function() {
            away = true;
            clearTimeout(awayTimer);
            delete awayTimer;
            
        }, 5000);
    }
    else if (!awayTimer && event.data.length) {
        hereTimer = setTimeout(function() {
            away = false;
        }, 2000);
    }
    
    console.log("away: " + away);
    
    context.clearRect(0, 0, canvas.width, canvas.height);
    event.data.forEach(function(rect) {
        context.strokeStyle = '#a64ceb';
        context.strokeRect(rect.x, rect.y, rect.width, rect.height);
        context.font = '11px Helvetica';
        context.fillStyle = "#fff";
        context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
        context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
    });
});
//var gui = new dat.GUI();
//gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);
//gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
//gui.add(tracker, 'stepSize', 1, 5).step(0.1);