How to integrate in Angular 4

[sidram01]

//ive done npm install tracking ,then import tracking, { ObjectTracker } from 'tracking'; constructor(){ this.trackFace(); }; trackFace(){ var tracker = new tracking.ObjectTracker('face'); tracker.setInitialScale(4); tracker.setStepSize(2); tracker.setEdgesDensity(0.1); tracking.track('#video', tracker, { camera: true }); tracker.on('track', function(event) { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); event.data.forEach(function(rect) { this.context.strokeStyle = '#a64ceb'; this.context.strokeRect(rect.x, rect.y, rect.width, rect.height); this.context.font = '11px Helvetica'; this.context.fillStyle = "#fff"; this.context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11); this.context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22); }); }); }

im getting this error

ERROR Error: Uncaught (in promise): TypeError: WEBPACK_IMPORTED_MODULE_2_tracking_default.a.ObjectTracker is not a constructor TypeError: WEBPACK_IMPORTED_MODULE_2trackingdefault.a.ObjectTracker is not a constructor

[RayLuxembourg]

import { Component, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import "webrtc-adapter";
import "tracking";
import "tracking/build/data/face";
import { SwiperConfigInterface } from "ngx-swiper-wrapper";
// node_modules/tracking/build/data/face.js
declare var window: any;
declare var tracking: any;

  @ViewChild("webcam") webcam: ElementRef;
  @ViewChild("canvas") canvas: ElementRef;

private faceTracker() {
    const canvas = this.canvas.nativeElement;
    this.context = canvas.getContext("2d");
    const tracker = new tracking.ObjectTracker(["face"]);
    tracker.setInitialScale(1);
    tracker.setStepSize(1);
    tracker.setEdgesDensity(0.1);
    const width = this.canvas.nativeElement.width;
    const height = this.canvas.nativeElement.height;
    tracking.track("#webcam", tracker, { camera: true });
    const faceLeft = width / 3;
    const faceRight = width * 2 / 3;
    const faceTop = height * 3 / 8;
    const faceBottom = height * 3 * 2 / 8;
    const perfectHeight = faceBottom - faceTop;
    console.log(this.face);

    tracker.on("track", event => {
      this.context.clearRect(
        0,
        0,
        this.canvas.nativeElement.width,
        this.canvas.nativeElement.height
      );
      this.drawFace(width, height);
      event.data.forEach(rect => {
        // width / 2,
        // height * 3 / 16,
        // width / 3,
        // height / 8

        const left = rect.x;
        const top = rect.y;
        const right = rect.width + rect.x;
        const bottom = rect.height + rect.y;

        this.context.strokeStyle = "#a64ceb";
        this.context.strokeRect(rect.x, rect.y, rect.width, rect.height);
        this.context.font = "11px Helvetica";
        this.context.fillStyle = "#fff";
        this.context.fillText(
          "x: " + rect.x + "px",
          rect.x + rect.width + 5,
          rect.y + 11
        );
        this.context.fillText(
          "y: " + rect.y + "px",
          rect.x + rect.width + 5,
          rect.y + 22
        );
        // this.context.rect(300 /, 20, 150, 100);
        this.context.stroke();
        const buffer = 5;
        this.information.height = rect.height;
        console.log(rect);
        this.information.perfectHeight = perfectHeight;
        if (this.checkMinDistance(rect.height, perfectHeight + buffer)) {
          if (this.checkMaxDistance(rect.height, perfectHeight - buffer)) {
            if (
              right < faceLeft &&
              left > faceRight &&
              bottom < faceTop &&
              top > faceBottom
            ) {
              console.log("PERFECT");
              this.takePicture();
            }
          } else {
            // display move forward
          }
        } else {
          // display move back
        }
      });
      // var gui = new dat.GUI();
      // gui.add(tracker, "ed
```gesDensity", 0.1, 0.5).step(0.01);
      // gui.add(tracker, "initialScale", 1.0, 10.0).step(0.1);
      // gui.add(tracker, "stepSize", 1, 5).step(0.1);
    });
  }

ngAfterViewInit() { // this.cloudFaceDetector(); this.faceTracker(); try { this.initilizeCamera(); } catch (error) { console.log("ERROR", error); } }

Hopefully this helps.

[sidram01]

@RayLuxembourg Hey Ray thanks a lot for the code ! . I am able to get 'console.log(rect)' but im not getting the Square thing over the face .. how to implement that ?

[RayLuxembourg]

@sidram01 show me your code including html , i will try to help.

[onlyonemuthuraj]

@sidram01 @RayLuxembourg Hi, i'm trying to port trackingjs to angular 4 and i don't have much clue about it. It will be great if you could share the full source code or kindly guide some good pointers