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.

Solution 1

For Screenshot, this library should do the trick.

npm install angular-screenshot

Basic usage example: Use screenshot as element or attribute, then use default template and cover children elements default

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

Use target parameter to set screenshot section on element

<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!'
        };
    }
})()

Solution 2

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/

Comments

[amburt05]

This appears to be for AngularJs and not Angular 5