<tracking-elements>

A set of Web Components made with Polymer that uses the tracking.js library to do real-time color tracking, face detection and much more.

Demo

Install

Install the component using Bower:

$ bower install tracking-elements --save

Or download as ZIP.

Usage

Import Web Components' polyfill:

<script src="bower_components/platform/platform.js"></script>

Import Custom Element:

<link rel="import" href="bower_components/tracking-elements/dist/image-color-tracking.html">

Start using it!

<image-color-tracking></image-color-tracking>

Color Trackers

There are three different custom elements to use in three different HTML elements:

<img is="image-color-tracking">
<video is="video-color-tracking">
<canvas is="canvas-color-tracking">

Options

Attribute	Options	Default	Description
`target`	`magenta`, `yellow`, `cyan`	`magenta`	Defines the colors to be tracked.
`camera`	`true`, `false`	`false`	Asks for the user's webcam. Only available when extending `<video>` elements.

Methods

You can find all getters and setters available in the API Docs. For example:

var video = document.querySelector('video');
video.stop();

Events

Event	Description
`track`	Triggers when the `target` is found. Returns an array of regions (`x`, `y`, `width`, `height`, `color`).

Object Trackers

There are three different custom elements to use in three different HTML elements:

<img is="image-object-tracking">
<video is="video-object-tracking">
<canvas is="canvas-object-tracking">

Options

Attribute	Options	Default	Description
`target`	`face`, `mouth`, `eye`	`face`	Defines the objects to be tracked.
`camera`	`true`, `false`	`false`	Asks for the user's webcam. Only available when extending `<video>` elements.

Methods

You can find all getters and setters available in the API Docs. For example:

var video = document.querySelector('video');
video.stop();

Events

Event	Description
`track`	Triggers when the `target` is found. Returns an array of regions (`x`, `y`, `width`, `height`, `total`).

Development

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

Install Bower & Grunt:
```
$ [sudo] npm install -g bower grunt-cli
```
Install local dependencies:
```
$ bower install && npm install
```
To test your project, start the development server and open http://localhost:8000.
```
$ grunt server
```
To build the distribution files before releasing a new version.
```
$ grunt build
```
To provide a live demo, send everything to gh-pages branch.
```
$ grunt deploy
```

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

History

For detailed changelog, check Releases.

Team

tracking.js is maintained by these people and a bunch of awesome contributors.


Eduardo Lundgren	Thiago Rocha	Zeno Rocha	Pablo Carvalho	Maira Bello

uikit0 / tracking-elements Goto Github PK