angularscreenshotangular5angularjs-components

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.


Solution

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