Question

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

我遇到错误PHP script。原始程序包在这里：https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos。

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

public function download() { $path = $this->input->post('path'); if(!file_exists($path)){ die('file not found'); } else { header("Content-Disposition: attachment; filename=" . basename($path) . ""); header("Content-Length: " . filesize($path)); header("Content-Type: application/octet-stream;"); readfile($path); } }：

_this.video is undefined

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(); } } }错误或发现其他问题的想法。

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();

  }


}

如何修复_this.video未定义

1 个答案: