javascript - 如何修复 _this.video 未定义

Question

我正在尝试将最初用 JavaScript 编写的用于捕获视频的实用程序转换为 Angular。

我收到错误_this.video 未定义。原包在这里:https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos .

这是我将其转换为 Angular 的尝试:

capture-image.component.html:

<div class="camera">
  <video id="video" [(ngModel)]="video" (canplay)="setVideo()" name="video" ngDefaultControl>Video stream not available.</video>
  <button id="startbutton" [(ngModel)]="startbutton" (click)="takePicture()" name="startbutton" ngDefaultControl>Take photo</button>
</div>

<canvas id="canvas" [(ngModel)]="canvas" name="canvas" ngDefaultControl></canvas>
<div class="output">
  <img id="photo" [(ngModel)]="photo" name="photo" ngDefaultControl alt="The screen capture will appear in this box.">
</div>

capture-image.component.ts:

@Component({
  selector: 'app-capture-image',
  templateUrl: './capture-image.component.html',
  styleUrls: ['./capture-image.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CaptureImageComponent),
      multi: true
    }
  ]
})

export class CaptureImageComponent implements OnInit {
  video: HTMLVideoElement;
  canvas;
  photo;
  startbutton;
  streaming = false;
  width = 320;
  height = 0;

  constructor() { }

  ngOnInit() {
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then((stream) => {
        this.video.srcObject = stream;  // <-- GETTING ERROR HERE
        this.video.play();
      })
      .catch(function(err) {
        console.log(err);
      });
      // this.clearPhoto();

  }


  setVideo() {
    if (!this.streaming) {
      this.height = this.video.videoHeight/ (this.video.videoWidth/this.width);
      this.video.width = this.width;
      this.video.height = this.height;
      this.canvas.width = this.width;
      this.canvas.height = this.height;
      this.streaming = true; 
    }
  }

  clearPhoto() {
    let context = this.canvas.getContext('2d');
    context.fillStyle = "#AAA";
    context.fillRect(0,0,this.canvas.width, this.canvas.height);

    var data = this.canvas.toDataURL('image/png');
    this.photo.src = data;
  }

  takePicture() {
    let context = this.canvas.getContext('2d');
    if (this.width && this.height) {
      this.canvas.width = this.width;
      this.canvas.height = this.height;
      context.drawimage(this.video, 0, 0, this.width, this.height);

      let data = this.canvas.toDataURL('image/png');
      this.photo.src = data;
    } else {
      this.clearPhoto();
    }
  }

 
}

这是我第一次尝试这个项目，我确信除了 _this.video undefined 错误之外，我的代码中还埋藏着更多其他问题。如何修复_this.video undefined错误？

Answer 1

您将需要使用ElementRef允许直接引用 DOM 上的 HTML 元素。

首先，在您的 component.html 上，我们使用 template reference variable #，并将其设置为videoRef

<video #videoRef [(ngModel)]="video" (canplay)="setVideo()" name="video" ngDefaultControl>Video stream not available.</video>

接下来，在您的 component.ts 上，

import { Component, ViewChild, ElementRef } from '@angular/core';

...

export class AppComponent {
  @ViewChild('videoRef') videoRef: ElementRef ;
    constructor() { }

  ngOnInit() {
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then((stream) => {
         this.videoRef.nativeElement.srcObject = stream;  // <-- GETTING ERROR HERE
         this.videoRef.nativeElement.play();
      }).catch(function(err) {
        console.log(err);
      });
   // this.clearPhoto();

  }


}