时间戳

首页 > 解决方案 > 如何修复 _this.video 未定义

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

问题描述

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

我收到一个错误_this.video is undefined。原始包在这里：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错误或识别任何其他问题的任何想法。

标签： javascriptangular

解决方案

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

首先，在您的 component.html 上，我们使用模板引用变量 #，并将其设置为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();

  }


}

推荐阅读