CODEWITHSUNDEEP
angularscreenshotangular5angularjs-components
viralchampanery
viralchampanery

Reputation: 437

how to take screenshot or screen video in angular 5

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

Upvotes: 5

Views: 13550

Answers (2)

WasiF
WasiF

Reputation: 28939

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

enter image description here

then do this

enter image description here

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

Upvotes: 2

ill
ill

Reputation: 362

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

Upvotes: -5

Related Questions