Digging into the tracking.js API

We saw a color tracker and added our own color matcher. The tracking.js library provides an excellent functionality to add a new object detector. It has a clear API and good documentation to follow (http://trackingjs.com/docs.html). But first, we will see how to use a tracker with different HTML tags and dig a bit into the tracker API.

Using the <img> and <video> tags

The library uses a <canvas> tag to operate with images. If you run a tracker on a different tag, then the library will convert the information from it to the canvas automatically.

First of all, tracking can be applied to an <img> tag:

<img id="img" src="/path/to/your/image.jpg"/>

In that case, we can specify the image path not in a JavaScript code, but in the tag itself. To run a tracker, we just need to set the tag id as a first parameter:

tracking.track('#img', tracker);

Next comes the <video> tag. In our <div> element, which wraps the canvas, we need to...