如何在Angular 5中进行截图或屏幕录像。

Question

我正在使用Angular 5示例项目，希望使用Angular5组件结构构建截图或屏幕录像功能。

- viralchampanery

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;
}

注意事项：

如果您因未使用安全链接运行应用程序而遇到此类错误。

然后做这个。

更多细节请参考：

https://x-team.com/blog/webcam-image-capture-angular/

- WasiF

Answer 2

对于截屏，这个库应该能胜任。

npm install angular-screenshot

基本用法示例： 将截图作为元素或属性使用，然后使用默认模板并覆盖子元素默认值。

    <button class="btn btn-fab" ng-class="{true: 'btn-danger', false: 'btn-default'}
[appCtrl.isBasicOpen]" ng-click="appCtrl.isBasicOpen = !appCtrl.isBasicOpen">
    <i ng-if="!appCtrl.isBasicOpen" class="material-icons">crop</i>
    <i ng-if="appCtrl.isBasicOpen" class="material-icons">close</i>
</button>
<!--screenshot-->
<screenshot is-open="appCtrl.isBasicOpen">
    <div class="panel-body">
        ...
    </div>
</screenshot>

使用target参数在元素上设置屏幕截图部分。

<div id="target1" class="panel panel-info">
    ...
    <div class="panel-body">
        <screenshot target="{{::'#target1'}}" is-open="appCtrl.target1Open" toolbox-options="appCtrl.target1Options"></screenshot>
            ...
    </div>
</div>

'use strict';
(function () {
angular.module('app', ['angular-screenshot'])
.controller('AppController', ['$scope', appController]);
    function appController($scope) {
        var self = this;
        self.target1Options = {
            filename: 'target1.png',
            downloadText: 'Download me',
            cancelText: 'Close it!'
        };
    }
})()

- ill

---

这似乎是针对AngularJs而不是Angular 5。 - amburt05