trackingjs test

by rambutan2000

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/eye-min.js"></script>
<script src="https://rawgit.com/eduardolundgren/tracking.js/master/build/data/face-min.js"></script>
<script src="https://rawgit.com/eduardolundgren/tracking.js/master/build/data/mouth-min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/eduardolundgren/tracking.js/master/examples/assets/demo.css">
<div id="demo-container">
  <img id="img" src="" />
</div>

CSS

.rect {
  position:absolute;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
}

#demo-container {
  position:absolute;
}

JavaScript

// use http://rawgit.com/ to get js urls from github
// use https://crossorigin.me/ to get around CORS for image reference
function _arrayBufferToBase64(buffer) {
    var binary = ''
    var bytes = new Uint8Array(buffer)
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
    }
    return window.btoa(binary);
}

window.plot = function(x, y, w, h) {
    var $rect = $("<div></div>");
    $rect.addClass("rect");
    $rect.offset({ top: y, left: x });
    $rect.width(w).height(h);    
    $("#demo-container").append($rect);    
};

var imgURL = 'https://c1.staticflickr.com/4/3943/15715482121_d7120a6e0b_z.jpg';  // Works!
//var imgURL = 'https://placeimg.com/640/480/people'; // Does not work
//var imgURL = 'https://crossorigin.me/https://placeimg.com/640/480/people'; // Works!


var oReq = new XMLHttpRequest();
oReq.open("GET", imgURL, true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
    var arrayBuffer = oReq.response; // Note: not oReq.responseText
    if (arrayBuffer) {
        var x = imgURL.split('.');
        var ext = x[x.length - 1];
        var b64img = _arrayBufferToBase64(arrayBuffer);
        $("#img").attr('src', 'data:image/' + ext + ';base64,' + b64img).appendTo($('body'));        
        
        var img = document.getElementById('img');
        var tracker = new tracking.ObjectTracker(['face']);
        
        tracker.setStepSize(1.7);
				tracking.track('#img', tracker);
        
        tracker.on('track', function(event) {        
            event.data.forEach(function(rect) {
            	console.log(rect);
              window.plot(rect.x, rect.y, rect.width, rect.height);
            });
        });
    }
};

oReq.send(null);