Cacher is the code snippet organizer for pro developers

        $('#show-take-photo').on('click', function() {
            var dialog = bootbox.dialog({
                title: 'Take photo',
                message: 'Loading...'
            });

            dialog.init(function() {
                var takePhoto = new TakePhoto({
                    clubID: 3
                });
                dialog.find('.bootbox-body').html(takePhoto.html());
                takePhoto.startup();
            });
        });

;(function() {
    this.TakePhoto = function(param) {
        UploadPhoto.apply(this, arguments);

        this.messages.button = {
          take: 'Upload photo',
          retake: 'Reupload'
        };
        this.streaming = false;
        this.video;
        this.canvas;
        this.photo;
        this.startbutton;
        this.width = 320;
        this.height = 0;                     
    }        

    /**
     *
     * inheritance
     *
     */
    
    TakePhoto.prototype = Object.create(UploadPhoto.prototype);
    TakePhoto.constructor = TakePhoto;

    /**
     *
     * private methods
     *
     */

    // conver base64 to File object
    function dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type:mime});
    }        
    
    function get() {
        this.video.style.display = 'none';
        this.canvas.style.display = 'block';
        this.startbutton.innerText = this.messages.button.retake;
        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.getContext('2d').drawImage(this.video, 0, 0, this.width, this.height);
        this.photo = this.canvas.toDataURL('image/png');

        // add file to array
        this.param.files = [];
        this.param.files.push(dataURLtoFile(this.photo, 'webcam_' + (new Date().getTime()) + '.png'));

        // call method from base class
        this.send();
    }

    /**
     *
     * public methods
     *
     */
    
    TakePhoto.prototype.html = function() {
        return [
            '<video id="video"></video>',
            '<canvas id="canvas" style="display: none"></canvas>',
            '<button id="take-photo" class="btn btn-blue">'+ this.messages.button.take +'</button>'
        ].join('');
    };

    TakePhoto.prototype.startup = function() {
        var self = this;

        this.video = document.getElementById('video');
        this.canvas = document.getElementById('canvas');
        this.startbutton = document.getElementById('take-photo');

        navigator.getMedia = (navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia);

        navigator.getMedia({
          video: true,
          audio: false
        },
        function(stream) {
          if (navigator.mozGetUserMedia) {
            self.video.mozSrcObject = stream;
          } else {
            var vendorURL = window.URL || window.webkitURL;
            self.video.src = vendorURL.createObjectURL(stream);
          }
          self.video.play();
        },
        function(err) {
          console.log("An error occured! " + err.name);
        }
        );

        /**
         *
         * events
         *
         */
        
        self.video.addEventListener('canplay', function() {
            if (!self.streaming) {
              self.height = self.video.videoHeight / (self.video.videoWidth / self.width);
              self.video.setAttribute('width', self.width);
              self.video.setAttribute('height', self.height);
              self.canvas.setAttribute('width', self.width);
              self.canvas.setAttribute('height', self.height);
              self.streaming = true;
            }
        }, false);

        // click on take button
        self.startbutton.addEventListener('click', function(e) {
            if(this.innerText === self.messages.button.take) {
                get.call(self);
            }
            else {
                self.video.style.display = 'block';
                self.canvas.style.display = 'none';
                self.startbutton.innerText = self.messages.button.take;
            }

            e.preventDefault();
        });
    };
})();