eduardolundgren / tracking.js

A modern approach for Computer Vision on the web
http://trackingjs.com
Other
9.43k stars 1.44k forks source link

working with angular 7 #379

Closed bamoha closed 2 years ago

bamoha commented 4 years ago

Hello, I am trying to only detect if an image that a user uploads has a face or not. But on using, I get errors

Cannot read property 'nodeType' of undefined
    at Object.push../node_modules/tracking/build/tracking.js.tracking.isNode (tracking.js:86)
    at Object.push../node_modules/tracking/build/tracking.js.tracking.one (tracking.js:107)
    at Object.push../node_modules/tracking/build/tracking.js.tracking.track (tracking.js:138)
bamoha commented 4 years ago

I later realised I was using the wrong variable name and on change i get

ERROR DOMException: Failed to execute 'querySelector' on 'Document': '[object Object]' is not a valid selector.
    at Object.push../node_modules/tracking/build/tracking.js.tracking.one 
bamoha commented 4 years ago

Here is my component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';

import 'tracking/build/tracking';

//node_modules/tracking/build/data/face.js
import 'tracking/build/data/face';

//Declare this variables so they are visible in your code
declare var window: any;
declare var tracking: any;

@Component({
  selector: 'app-register-dating',
  templateUrl: './register-dating.component.html',
  styleUrls: ['./register-dating.component.css']
})
export class RegisterDatingComponent implements OnInit {

  constructor() { }

  tracker = new tracking.ObjectTracker('face');
  loading: boolean = false;

  images = [];
  addBtn = false;
  endAdd = false;
  imageChangedEvent: any = '';
  croppedImage: any = '';

  @ViewChild('userFace') userFace: ElementRef;

  ngOnInit() {

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

  add() {
    this.croppedImage = '';
    this.imageChangedEvent = null;
  }

  saveImage() {
    this.images.push(this.croppedImage);
    if (this.images.length > 3) {
      this.endAdd = true;
    } else {
      this.addBtn = true;
    }
  }

  fileChangeEvent(event: any): void {
    this.imageChangedEvent = event;

  }
  imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;

    tracking.track(this.userFace, this.tracker);
  }
  imageLoaded() {
    // show cropper
  }
  cropperReady() {
    // cropper ready
  }
  loadImageFailed() {
    // show message
  }

}
mparpaillon commented 4 years ago

Did you manage to do it @bamoha?

bamoha commented 4 years ago

Yes, It worked. Thank you

tj-creative commented 2 years ago

这是来自QQ邮箱的假期自动回复邮件。   您好,我最近正在休假中,无法亲自回复您的邮件。我将在假期结束后,尽快给您回复。