Angular

Question

根据我发现的这两个教程中的代码：

我正在尝试获取视频的帧，然后将它们转换为 blob。但我没能做到。这是我暂时制作的代码：

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 没有任何值（空）。所以我想知道是否有人可以帮助解决这个问题。

Answer 1

阅读 MediaDevices.getUserMedia() and HTMLMediaElement.play() I noticed both of them return a Promise 的文档，因此我使用语法 async-await 等待方法完成并设置视频，因此我最终可以捕获帧并将它们转换为 blob。

只改变我在问题中发布的先前代码中的方法initCamera：

async initCamera(config:any) {
     this.video.srcObject = await navigator.mediaDevices.getUserMedia(config);
     await 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);
      });
}

Angular - canvas.toBlob 回调的参数为空

Angular - canvas.toBlob callback´s argument is null

html

javascript

blob

app.component.html

app.component.ts