angular - 如何以 Angular 5 截取屏幕截图或屏幕视频

Question

我正在使用 angular 5 示例项目，想要使用 angular5 组件结构构建屏幕截图或捕获屏幕视频的功能。

Answer 1

在 Angular 5+ 中通过网络摄像头捕获用户图像

创建一个组件即

ng generate component capture

并粘贴下面的代码以通过网络摄像头捕获图像

capture.component.html

<div id="app">
  <div><video #video id="video" width="640" height="480" autoplay></video></div>
  <div><button id="snap" (click)="capture()">Snap Photo</button></div>
  <canvas #canvas id="canvas" width="640" height="480"></canvas>
  <ul>
      <li *ngFor="let capture of captures">
          <img [src]="capture" style="widows: 200px;height:auto" />
      </li>
  </ul>
</div>

capure.component.ts

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

@Component({
  selector: 'app-capture',
  templateUrl: './capture.component.html',
  styleUrls: ['./capture.component.scss']
})
export class CaptureComponent implements OnInit {

  captures: Array<any>;

  constructor() {
    this.captures = [];
  }

  ngOnInit() { }

  async ngAfterViewInit() {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      let stream = await navigator.mediaDevices.getUserMedia({ video: true })
      this.video.srcObject = stream;
    }
  }

  capture() {
    var context = this.canvas.getContext("2d").drawImage(this.video, 0, 0, 640, 480);
    this.captures.push(this.canvas.toDataURL("image/png"));
  }

  @ViewChild("video") videoRef: ElementRef;
  get video(): HTMLVideoElement {
    return this.videoRef.nativeElement
  }

  @ViewChild("canvas") canvasRef: ElementRef;
  get canvas(): HTMLCanvasElement {
    return this.canvasRef.nativeElement
  }
}

capure.component.css

body {
    background-color: #F0F0F0;
}
#app {
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
#video {
    background-color: #000000;
}
#canvas {
    display: none;
}
li {
    display: inline;
    padding: 5px;
}

Precautions

如果您遇到这样的错误，因为您没有使用安全链接运行应用程序

然后这样做

更多详情 https://x-team.com/blog/webcam-image-capture-angular/