Web Component wrapper for tracking.js API using Polymer
JavaScript
Latest commit ff39df5 Aug 1, 2014 @eduardolundgren Merge pull request #4 from cirocosta/patch-1
Fixes misleading image href

README.md

<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

  1. Import Web Components' polyfill:

    <script src="bower_components/platform/platform.js"></script>
  2. Import Custom Element:

    <link rel="import" href="bower_components/tracking-elements/dist/image-color-tracking.html">
  3. 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

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. 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
Eduardo Lundgren Thiago Rocha Zeno Rocha Pablo Carvalho Maira Bello

License

BSD License © Eduardo Lundgren