Why is this Jsfiddle not working: tracking.js face detection example

Question

I'm trying to get a JSFiddle example of http://trackingjs.com/examples/face_tag_friends.html working but the hover effect is not working as the website shows. Here's my JSFiddle:

https://jsfiddle.net/lolptdr/25yqfyjo/6/

I had to use a proxy on raw.githubusercontent.com and changed it to raw.githack.com for the external scripts referenced in the HTML to bypass the MIME type complaint. No other console errors so what else is wrong?

What else can I check to get the same effect as shown on trackingjs.com's website?

window.onload = function() {
  var img = document.getElementById('img');
  var tracker = new tracking.ObjectTracker('face');
  tracking.track(img, tracker);
  tracker.on('track', function(event) {
    event.data.forEach(function(rect) {
      plotRectangle(rect.x, rect.y, rect.width, rect.height);
    });
  });
  var friends = ['Thomas Middleditch', 'Martin Starr', 'Zach Woods'];
  var plotRectangle = function(x, y, w, h) {
    var rect = document.createElement('div');
    var arrow = document.createElement('div');
    var input = document.createElement('input');
    input.value = friends.pop();
    rect.onclick = function name() {
      input.select();
    };
    arrow.classList.add('arrow');
    rect.classList.add('rect');
    rect.appendChild(input);
    rect.appendChild(arrow);
    document.getElementById('photo').appendChild(rect);
    rect.style.width = w + 'px';
    rect.style.height = h + 'px';
    rect.style.left = (img.offsetLeft + x) + 'px';
    rect.style.top = (img.offsetTop + y) + 'px';
  };
};

* {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
}
.demo-title {
  position: absolute;
  width: 100%;
  background: #2e2f33;
  z-index: 2;
  padding: .7em 0;
}
.demo-title a {
  color: #fff;
  border-bottom: 1px dotted #a64ceb;
  text-decoration: none;
}
.demo-title p {
  color: #fff;
  text-align: center;
  text-transform: lowercase;
  font-size: 15px;
}
.demo-frame {
  background: url(frame.png) no-repeat;
  width: 854px;
  height: 658px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -329px 0 0 -429px;
  padding: 95px 20px 45px 34px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.demo-container {
  width: 100%;
  height: 530px;
  position: relative;
  background: #eee;
  overflow: hidden;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.dg.ac {
  z-index: 100 !important;
  top: 50px !important;
}
/* example's CSS */

#photo:hover .rect {
  opacity: .75;
  transition: opacity .75s ease-out;
}
.rect:hover * {
  opacity: 1;
}
.rect {
  border-radius: 2px;
  border: 3px solid white;
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  left: -1000px;
  opacity: 0;
  position: absolute;
  top: -1000px;
}
.arrow {
  border-bottom: 10px solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  left: 50%;
  margin-left: -5px;
  bottom: -12px;
  opacity: 0;
}
input {
  border: 0px;
  bottom: -42px;
  color: #a64ceb;
  font-size: 15px;
  height: 30px;
  left: 50%;
  margin-left: -90px;
  opacity: 0;
  outline: none;
  position: absolute;
  text-align: center;
  width: 180px;
  transition: opacity .35s ease-out;
}
#img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -173px 0 0 -300px;
}

<script src="https://raw.githack.com/eduardolundgren/tracking.js/master/build/tracking.js"></script>
<script src="https://raw.githack.com/eduardolundgren/tracking.js/master/build/data/face.js"></script>
<div class="demo-title">
  <p><a href="http://trackingjs.com" target="_parent">tracking.js</a> － hover image to see all faces detected</p>
</div>
<div class="demo-frame">
  <div class="demo-container"> <span id="photo"><img id="img" src="https://raw.githubusercontent.com/eduardolundgren/tracking.js/master/examples/assets/faces.jpg" /></span>

  </div>
</div>

score 1 · Answer 1 · answered Oct 01 '15 at 15:22

This is a quick answer, but hopefully it'll help you understand what's going on. It's failing because the code is trying to load this resource: http://trackingjs.com/bower/tracking.js/examples/assets/frame.png

You can see that it's loaded on the original page: http://trackingjs.com/examples/face_tag_friends.html and you can see that your JSFiddle attempts to load it as well (although with a different host, the same relative path). When the browser attempts to GET https://fiddle.jshell.net/25yqfyjo/7/show/frame.png, a 404 happens because the file doesn't exist and this halts execution.

Look at your Developer Tools while running the JSFiddle. My guess is, that this other script you load (https://raw.githack.com/eduardolundgren/tracking.js/master/build/data/face.js), which appears to be binary data (rendering the picture) shouldn't be included. Instead, walk through the base documentation for http://trackingjs.com/ and understand how to use face detection on your own photo. Presumably, it'll be easier and work.

score 1 · Answer 2 · answered Oct 05 '15 at 12:59

Cross Origin: i have updated your code to use DOMContentLoaded and manually firing the event so you can see the problem: https://jsfiddle.net/25yqfyjo/11/

So i'm forcing the event with

// Create the event
var event = new CustomEvent("DOMContentLoaded", { "detail": "Content Loaded trigger" });

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

And you can see in the console the error:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin

data.tracking.trackCanvasInternal_ @

tracking.js:196(anonymous function) @

tracking.js:221img.onload @

tracking.js:472

This is caused by the fact your loading an image from another URL into the canvas that is being used by your code (even though you can't see it the var tracker = new tracking.ObjectTracker('face'); will be using a canvas) i think for purposes of JS Fiddle you could change the Image to Base64 encoded and that would correct the problem.

score 1 · Answer 3 · answered Oct 09 '16 at 19:20

You will need more actions :

First open developer tool F12 (chrome) goto tab console switch frame to :

Now you can track your code . I found your js code looks like your use of window.onload is little critical in any way .(tag breaks) . You have more times in code onload event. Every time when you call window.onload = SOMETHING you are override this function . window.onload is function with just one time execution . Simply on load document . This is not JQ .

Also you have :

GET https://fiddle.jshell.net/lolptdr/25yqfyjo/6/show/frame.png 404 (Not Found)

This is namespace { } for js , if you have error like this .

{
exeOK()
IamError() ; BREAKS HERE 
IneverLoaded()
}

This can be also your solution : Check in debugger did you load js code to the end.

score 1 · Accepted Answer · answered Jan 28 '17 at 01:00

All the above answers address why this is failing very well, but here's a working example of tracker.js in jsfiddle using a flickr image: http://jsfiddle.net/rambutan2000/v5v49bax/

Flickr seems to have Access-Control-Allow-Origin set correctly in the header. I've had limited success using a proxy (crossorigin.me).

Thi is a simplified version of this example: https://trackingjs.com/examples/face_hello_world.html

First I had to get valid URLs to the Tracker includes, I used this service: http://rawgit.com. Look in the "External Resources" in jsfiddle.

I based this off an example which uses a XMLHttpRequest to retrieve the image data as a buffer, then load this into an img element. This negates SOME CORS issues on the img element as it was sourced from code not a URL. The rest is ripped straight from the Tracker example referenced above.

JS:

// 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);

HTML:

<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;
}

Why is this Jsfiddle not working: tracking.js face detection example

4 Answers4