2017-12-06 7 views
0

の「ObjectTracker」プロパティを読んで、私は型定義が含まれていますがは、私はまだ角度発展に新たなんだ未定義

MonitorComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'ObjectTracker' of undefined

私を取得することはできませんコード

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編集

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; 
} 

すべての支援とコードの改善が認められます。

+0

私はこのhttps://www.npmjs.com/package/@types/trackingを使用していますが、モジュールがないので間違って使用していると思いますか? –

+0

@ Und3rTow私はtypedef内のdeclare namescpaceをモジュールにエクスポートするように変更しました。これは間違っていると思いますし、正しく使用する方法がわからない –

+0

この特定のlibを使用していませんでしたが、 ://github.com/eduardolundgren/tracking.js/issues/177 – Und3rTow

答えて

1

ライブラリはNodeJSが消費できる形式を提供していないので(@ Und3rTow言及https://github.com/eduardolundgren/tracking.js/issues/177を参照)

あなたはそれのために変数をインポートするimport文を使用することはできません。

また、import 'tracking'を使用してTypeScriptにパッケージをインポートするように指示すると、グローバル名前空間にtrackingという変数が宣言されます。

JavaScriptを使用したNodeJSではrequire('tracking')と同じです。

その後、tracking変数をそのまま使用することができます。

関連する問題