Tutorial to create service for webcam

1. Service

Create a Service

(function (){
    'use Strict'
    angular
        .module('app')
        .factory('WebcamService', WebcamService);

    WebcamService.$inject = [];

    function WebcamService () {
        var webcam = {};
        webcam.isTurnOn = false;
        webcam.patData = null;
        var _video = null;
        var _stream = null;
        webcam.patOpts = {x: 0, y: 0, w: 25, h: 25};
        webcam.channel = {};
        webcam.webcamError = false;

        var getVideoData = function getVideoData(x, y, w, h) {
            var hiddenCanvas = document.createElement('canvas');
            hiddenCanvas.width = _video.width;
            hiddenCanvas.height = _video.height;
            var ctx = hiddenCanvas.getContext('2d');
            ctx.drawImage(_video, 0, 0, _video.width, _video.height);
            return ctx.getImageData(x, y, w, h);
        };

        var sendSnapshotToServer = function sendSnapshotToServer(imgBase64) {
            webcam.snapshotData = imgBase64;
        };

        webcam.makeSnapshot = function() {
            if (_video) {
                var patCanvas = document.querySelector('#snapshot');
                if (!patCanvas) return;

                patCanvas.width = _video.width;
                patCanvas.height = _video.height;
                var ctxPat = patCanvas.getContext('2d');

                var idata = getVideoData(webcam.patOpts.x, webcam.patOpts.y, webcam.patOpts.w, webcam.patOpts.h);
                ctxPat.putImageData(idata, 0, 0);

                sendSnapshotToServer(patCanvas.toDataURL());

                webcam.patData = idata;

                webcam.success(webcam.snapshotData.substr(webcam.snapshotData.indexOf('base64,') + 'base64,'.length), 'image/png');
                webcam.turnOff();
            }
        };

        webcam.onSuccess = function () {
            _video = webcam.channel.video;
            webcam.patOpts.w = _video.width;
            webcam.patOpts.h = _video.height;
            webcam.isTurnOn = true;
        };

        webcam.onStream = function (stream) {
            activeStream = stream;
            return activeStream;
        };

        webcam.downloadSnapshot = function downloadSnapshot(dataURL) {
            window.location.href = dataURL;
        };

        webcam.onError = function (err) {
            webcam.webcamError = err;
        };

        webcam.turnOff = function () {
            webcam.isTurnOn = false;
            if (activeStream && activeStream.getVideoTracks) {
                const checker = typeof activeStream.getVideoTracks === 'function';
                if (checker) {
                    return activeStream.getVideoTracks()[0].stop();
                }
                return false;
            }
            return false;
        };

        var service = {
            webcam: webcam
        };
        return service;
    }

})();

2. Controller

Create a Controller

(function() {
    'use strict';

    angular
        .module('app')
        .controller('WebcamController', WebcamController);

    WebcamController.$inject = ['WebcamService'];

    function WebcamController (WebcamService) {
        var vm = this;
        
        vm.showweb = false;
        vm.webcam = WebcamService.webcam;
        //override function for be call when capture is finalized
        vm.webcam.success = function(image, type) {
            vm.photo = image;
            vm.fotoContentType = type;
            vm.showweb = false;
        };

        function turnOffWebCam() {
            if(vm.webcam && vm.webcam.isTurnOn===true)
                vm.webcam.turnOff();
        }
    }
})();

3. Activate Webcam

Use the following code snippets in your HTML

Show captured image

<img data-ng-src="{{'data:' + vm.fotoContentType + ';base64,' + vm.photo}}" style="max-height: 100px;" ng-if="vm.photo"/>

Show webcam component

    <div id="webcam" ng-if="vm.showweb">
                    <webcam channel="vm.webcam.channel"
                            on-streaming="vm.webcam.onSuccess()"
                            on-error="vm.webcam.onError(err)"
                            on-stream="vm.webcam.onStream(stream)"></webcam>
                    <button class="btn btn-default" type="button" ng-click="vm.webcam.makeSnapshot()">Capture</button>
                    <canvas ng-hide="true" id="snapshot" width="200" height="200"></canvas>
                </div>