Question

我还是Angular开发的新手，我正在尝试在我的打字稿角应用程序中使用https://trackingjs.com/，我已经包含了类型定义但是获得了

MonitorComponent_Host.ngfactory.js？ [sm]：1 ERROR TypeError：不能读取未定义的属性“ObjectTracker”

我的代码

import { Component, OnInit } from '@angular/core';
import { tracking } from 'tracking';

@Component({
 selector: 'monitor',
 templateUrl: './monitor.component.html',
 styleUrls: ['./monitor.component.css']
})
export class MonitorComponent implements OnInit {


constructor() { }

ngOnInit() {
    var video = document.getElementById('video');
    var canvas = <HTMLCanvasElement>document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var tracker = new tracking.ObjectTracker(['face']);

    tracking.track('#video', tracker);

    tracker.on('track', function (event) {
        context.clearRect(0, 0, canvas.width, 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);
        });
    });
}



}   });
    }

HTML

   <div class="demo-frame">
                    <div class="demo-container">
                        <video id="video" width="320" height="240" preload autoplay loop muted></video>
                        <canvas id="canvas" width="320" height="240"></canvas>
                    </div>
                </div>

typedefinition edit

 declare namespace tracking {
  export class ColorTracker extends Tracker {
    constructor(colours: string[]);

    static registerColor(name: string, predicate: (r: number, g: number, b:         
    number) => boolean): void;
  }

  export class ObjectTracker extends Tracker {
    constructor(objects: string[]);
  }

  class Tracker {
    constructor(target: string);
    on(eventName: string, callback: (event: TrackEvent) => void): void;
  }

  interface TrackEvent {
    data: TrackRect[];
  }

   interface TrackRect {
    x: number;
    y: number;
    height: number;
    width: number;
    color: string;
  }

  interface TrackerTask {
    stop(): void;
    run(): void;
  }

  export function track(selector: string, tracker: tracking.Tracker): 
TrackerTask;
}

任何协助和代码改进都将受到赞赏。

Answer 1

由于库没有提供NodeJS可以使用的格式（参见@ Und3rTow提到的https://github.com/eduardolundgren/tracking.js/issues/177）

您不能使用为其导入变量的import语句。

或者，您可以使用import 'tracking'告诉TypeScript导入包，它将在全局命名空间声明tracking变量。

与使用JavaScript在NodeJS中执行require('tracking')相同。

之后，您可以按原样使用tracking变量。

无法读取未定义的属性“ObjectTracker”

1 个答案: