Работа с видео и элементом canvas в Angular

Question

Я пытаюсь получить поток и отобразить его, используя drawImage, как это предлагается в некоторых руководствах для разработчиков Google.Я получаю сообщение об ошибке:

TypeError: Не удалось выполнить 'drawImage' для 'CanvasRenderingContext2D': предоставленное значение не относится к типу '(CSSImageValue или HTMLImageElement или SVGImageElement, или HTMLVideoElement, или HTMLCanvasElement, или ScreenBit, или ImageBit) '

После нескольких часов я все еще не могу понять, почему, поэтому я подумал, что обратиться за помощью.Мой код прикреплен ...

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


@Component({
  selector: 'app-scanner',
  templateUrl: './scanner.component.html',
  styleUrls: ['./scanner.component.css']
})
export class ScannerComponent implements OnInit {
  constructor() {}

  @ViewChild('mycanvas') mycanvas: ElementRef;
  @ViewChild('myvideo') myvideo: ElementRef;
  ctx;

  ngOnInit() {
    this.drawOnCanvas();
  }

  drawOnCanvas() {
    this.ctx = this.mycanvas.nativeElement.getContext('2d');

    navigator.mediaDevices
      .getUserMedia({
        audio: false,
        video: true
      })
      .then(stream => {
        this.myvideo.nativeElement.srcObject = stream;
        this.drawCanvas();
        //this.myvideo.nativeElement.play();
      });
  }

  drawCanvas() {
    this.mycanvas.nativeElement.width = this.myvideo.nativeElement.clientWidth;
    this.mycanvas.nativeElement.height = this.myvideo.nativeElement.clientHeight;
    this.ctx.drawImage(
      this.myvideo.nativeElement.srcObject,
      0,
      0,
      this.mycanvas.nativeElement.width,
      this.mycanvas.nativeElement.height
    );
  }
}

<div>
  <canvas #mycanvas id="mycanvasid"></canvas>
  <video #myvideo></video>
</div>

Answer 1

Вы не запускаете свой поток, кажется ...

Как я его использую

HTML

  <div id="inner_video" >
      <video #video id="video" autoplay></video>
  </div>

  <canvas #canvas id="canvas" width="1024" height="768">canvas</canvas>      

ц

 @ViewChild("video")
  public video: ElementRef;

  @ViewChild("canvas")
  public canvas: ElementRef;

  ngOnInit() {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
          this.video.nativeElement.srcObject = stream;
          this.video.nativeElement.play();
      });
    }
  } 

код захвата

 capture(event) {
    event.preventDefault();
    var context = this.canvas.nativeElement.getContext("2d").drawImage(this.video.nativeElement, 0, 0, 1024, 768);
    var picture: any = this.canvas.nativeElement.toDataURL("image/png");
    ...
  }