Angular - аргумент обратного вызова canvas.toBlob равен нулю - PullRequest
Новая
       22

Angular - аргумент обратного вызова canvas.toBlob равен нулю

0 голосов
/ 05 мая 2020

Основываясь на моем коде из этих двух руководств, я нашел:

Я пытаюсь получить кадры видео, а затем преобразовать их в капли. Но я не смог этого сделать. Это код, который я сделал на данный момент:

app.component. html

<div class="row">
    <button (click)="start()" class="btn btn-primary">Play</button>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="text-center">
        <h3>
          <video #videoElement></video>
          <canvas #canvasElement style="overflow:auto"></canvas>
        </h3>
      </div>
    </div>
  </div>

app.component.ts 

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('videoElement',  {static: true}) videoElement: any;  
  @ViewChild('canvasElement',  {static: true}) canvasElement: any;  
  video: any;
  canvas: any;

  ngOnInit() {
    this.video = this.videoElement.nativeElement;
    this.canvas = this.canvasElement.nativeElement;
  }

  start() {
    this.initCamera({ video: true, audio: false });
  }

  initCamera(config:any) {
    navigator.mediaDevices.getUserMedia(config).then(stream => {
      console.log(stream)
      this.video.srcObject = stream;
      this.video.play();
      this.canvas.width = this.video.videoWidth;
      this.canvas.height = this.video.videoHeight;
      this.canvas.getContext('2d').drawImage(this.video, 0, 0, this.video.videoWidth, this.video.videoHeight);  
      this.canvas.toBlob((blob) => {
        const img = new Image();
        console.log(blob);
        img.src = URL.createObjectURL(blob);
      });
    });
  }

}

Моя проблема в что аргумент обратного вызова blob не имеет никакого значения (ноль). Так что мне интересно, может ли кто-нибудь помочь решить эту проблему.

...