tracking.js

Change the way you interact with your browser.

Getting Started

Import the core library:

<script src="tracking.js"></script>

Import the color module:

<script src="tracker/color.js"></script>

Gets the user's camera:

var videoCamera = new tracking.VideoCamera().render();

Instantiates tracking by color magenta and displays X, Y and Z positions of the detected area in console:

videoCamera.track({
    type: 'color',
    color: 'magenta',
    onFound: function(track) {
      console.log(track.x, track.y, track.z);
    },
    onNotFound: function() {}
});

Check the full code of this Hello World example.

Note: if you want to run tracking.js examples locally, you're going to need a local server, since file:/// doesn't work with getUserMedia() in some browsers.

1. Install Grunt and its dependencies: npm install .
2. Run a local server: grunt server
3. Go to: http://localhost:9001 and have fun :)

About

It brings to web elements tracking techniques of a real scene captured by the camera, through natural interactions from object tracking, color markers, among others, allowing the development of interfaces and games through a simple and intuitive API.

Why?

The concept of Natural Interaction proposes interfaces that understand the intentions of the user so that this convey their intentions intuitively interacting with computer systems in the same way makes day-to-day with people and objects. It is in this direction that the areas of interaction Human-Computer (IHC) and Virtual and Augmented Reality (AR), both in accelerated progression to native environments.

Who?

Created by Eduardo Lundgren, one of the creators of AlloyUI, involved in many open-source projects, ex-contributor to jQuery and jQuery UI. Graduate in Telecommunications Engineering from UPE and taking a Masters in CS from UFPE. Currently development lead at Liferay.