Блог

Я использую последнюю версию angular.Я работаю над проектом tfjs, используя обучаемую модель машины Google. Я пытаюсь добавить элемент dom, содержащий холст веб-камеры. шаблон:

 <div>Teachable Machine Image Model</div>
<button type="button" (click)="init()">Start</button>
<div id="webcam-container" #video>
  
    
</div>
<div id="label-container">

</div>
 

Компонент:

 export class AppComponent implements AfterViewInit, OnInit{

 
  @ViewChild('video') video: ElementRef;

  model:any;
  webcam: any;
  labelContainer: any;
  maxPredictions: any; 

  constructor(private renderer: Renderer2) {
  }

async init() {
    const modelURL = "../assets/tm-my-image-model/model.json";
    const metadataURL = "../assets/tm-my-image-model/metadata.json";

    // load the model and metadata

    this.model = await tmImage.load(modelURL, metadataURL);
    this.maxPredictions = this.model.getTotalClasses();

    // Convenience function to setup a webcam
    const flip = true; // whether to flip the webcam
    this.webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
    await this.webcam.setup(); // request access to the webcam
    await this.webcam.play();
    window.requestAnimationFrame(this.loop);

    // append elements to the DOM

    this.renderer.appendChild(this.video.nativeElement, this.webcam.canvas)
    
}
}
 

Но я не могу добавить веб — камеру. Как это решить?