Implementing tracking.js in my node.js project

[cyrusbehr]

How can I implement the tracking.js into my node.js project, by using the npm package. I install the package using npm install tracking then proceed to require it var tracking = require('tracking'), yet upon compiling I get the error that ColorTracker is not a valid constructor of tracking

EDIT: Here is my code for my tracker component which I want to render to the screen.

var tracking = require('tracking')

export default class Tracker extends Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    const colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

    colors.on('track', function(event) {
      if (event.data.length === 0) {
     // No colors were detected in this frame.
      } else {
        event.data.forEach(function(rect) {
          console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
        });
      }
    });

    tracking.track('#myVideo', colors);
    return (
         <video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
    );
  }
}

Tracker.propTypes = {
};

[rorygarand]

I'm trying to do something similar. One way I've found that will provide access to tracking is this approach:

require('tracking');
...
const colors = new window.tracking.ColorTracker([]);

That said, I still haven't been able to get it to work.

[g-borgulya]

Just started to play around with it, and my solution for face recognition looks like this:

import React from 'react'
import styles from './styles.css'

require('tracking')
require('tracking/build/data/face')

export default class Camera extends React.Component {
  state = {}

  tracker = null

  componentDidMount () {
    this.tracker = new window.tracking.ObjectTracker('face')
    this.tracker.setInitialScale(4)
    this.tracker.setStepSize(2)
    this.tracker.setEdgesDensity(0.1)

    window.tracking.track(this.refs.cameraOutput, this.tracker, { camera: true })
    this.tracker.on('track', event => {
      let context = this.refs.canvas.getContext('2d')
      context.clearRect(0, 0, this.refs.canvas.width, this.refs.canvas.height)
      event.data.forEach(function(rect) {
        context.strokeStyle = '#a64ceb'
        context.strokeRect(rect.x, rect.y, rect.width, rect.height)
        context.font = '11px Helvetica'
        context.fillStyle = "#fff"
        context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11)
        context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22)
      })
    })

  }

  componentWillUnmount () {
    this.tracker.removeAllListeners()
  }

  render () {
    return (
      <div className={ styles.container }>
        <div className={ styles.cameraOutput }>
          <video ref="cameraOutput" width="320" height="240" preload autoPlay loop muted></video>
          <canvas ref="canvas" width="320" height="240"></canvas>
        </div>
      </div>
    )
  }
}

The canvas element is positioned on the top of video.

[jsimonson2013]

@cyrusbehr see #195 . There is a bug in the sample. Specifically, tracking.track('#myVideo', colors); should be tracking.track('#myVideo', colors, {camera: true});

[dSecret]

Tried to implement tag friends example. Got stuck after IndexSizeError: Index or size is negative or greater than the allowed amount. @g-borgulya Some help please.

import React, { Component } from 'react';
import '../../css/lectures.css';
// import '../../static/build/tracking-min.js'
import Logo from '../../static/faces.png'
import 'tracking'
import 'tracking/build/data/face'

class Lectures extends Component {
  render () {
    return (
      <div >
          <div className="demo-frame">
            <div className="demo-container">
              <span id="photo"><img id="imgi" src={Logo} /></span>
            </div>
          </div>
      </div>
    )
  }
  componentDidMount () {
    var tracker = new window.tracking.ObjectTracker('face')

    var img=document.getElementById('imgi');

    window.tracking.track(img, tracker)

    tracker.on('track', event => {
        event.data.forEach(function(rect) {
          plotRectangle(rect.x, rect.y, rect.width, rect.height);
        });
    })
    var friends = [ 'Thomas Middleditch', 'Martin Starr', 'Zach Woods' ];
    var plotRectangle = function(x, y, w, h) {
        var rect = document.createElement('div');
        var arrow = document.createElement('div');
        var input = document.createElement('input');
        input.value = friends.pop();
        rect.onclick = function name() {
          input.select();
        };
        arrow.classList.add('arrow');
        rect.classList.add('rect');
        rect.appendChild(input);
        rect.appendChild(arrow);
        document.getElementById('photo').appendChild(rect);
        rect.style.width = w + 'px';
        rect.style.height = h + 'px';
        rect.style.left = (img.offsetLeft + x) + 'px';
        rect.style.top = (img.offsetTop + y) + 'px';
    };
}

}

export default Lectures;

[hugomejia]

Jesus!! two years later I found @g-borgulya comment, and I had to reply, just because I was breaking my head to get this code work, and not in ReactJS, but in VueJS (just declare the tracker:null, in your data object and that's all) and geez! it actually works ! sweet. Thanks a lot @g-borgulya !

[yanmie1]

Jesus!! two years later I found @g-borgulya comment, and I had to reply, just because I was breaking my head to get this code work, and not in ReactJS, but in VueJS (just declare the tracker:null, in your data object and that's all) and geez! it actually works ! sweet. Thanks a lot @g-borgulya !

Hi hugomejia, would you please paste the code what you did in importing trackingjs on vue.js? I am blocked by the issue for days.

[hugomejia]

Jesus!! two years later I found @g-borgulya comment, and I had to reply, just because I was breaking my head to get this code work, and not in ReactJS, but in VueJS (just declare the tracker:null, in your data object and that's all) and geez! it actually works ! sweet. Thanks a lot @g-borgulya !

Hi hugomejia, would you please paste the code what you did in importing trackingjs on vue.js? I am blocked by the issue for days.

Hello @yanmie1,

Here below you can see my code. However, please note that I installed tracking.js with npm (the classic npm install tracking ) but couldn't make it work using import neither in main.js neither in the component itself (several building errors), So, I had to use the require() function, which means that before being able to use Trackingjs with this code below, you'll have to go to the node_modules/tracking/build/tracking.js file and add at the end : export default window.tracking

Once you have done that, then simply create your .vue file as follows:

<template>
    <div>
        <div class="demo-container">
            <video ref="passenger" class="passenger" @loadedmetadata="loadedMeta" width="300" height="300" preload autoplay loop muted playsinline></video>
        </div>
    </div>
</template>
<script>
require('tracking')
require('tracking/build/data/face-min')
export default {
    name:'faceDetect',
    data() {
        return {
            video: null,
            w:0,
            h:0,
            tracker:null,
            trackerTask:null
        }
    }, mounted(){

    this.tracker = new window.tracking.ObjectTracker('face')
    this.tracker.setInitialScale(4)
    this.tracker.setStepSize(2)
    this.tracker.setEdgesDensity(0.1)
    this.trackerTask = window.tracking.track(this.$refs.passenger, this.tracker, { camera: true })
    this.detecting_run();
    },
    methods: {
   detecting_run(){
            var ref = this
            console.log('I got into the detecting run function')
            this.tracker.on('track', function(event) {
                event.data.forEach(function() {
                console.log('detected')
                });
            })
        },
    }
}

If you have any trouble using this code, let me know and I will give access to a repo (don't have a github with it yet) with the whole code or something like that.

Good luck !

[yanmie1]

Thank you @hugomejia , it works for me, great!