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.
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...