how to take screenshot or screen video in angular 5

Question

I am using angular 5 sample project, want to build feature for screenshot or capture screen video using angular5 component structure.

Answer 1

Capture User Image via Webcam in Angular 5+

create a component i.e.

ng generate component capture

and paste below code to capture the image via webcam

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

in case you face an error like this because you are not running the application with secure link

then do this

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