Cacher is the code snippet organizer for pro developers

document.getElementById('show-take-photo').addEventListener('click', function(e) {
  var dialog = bootbox.dialog({
      title: 'Take photo',
      message: 'Loading...'
  });

  dialog.init(function() {
      var takePhoto = new TakePhoto({
          el: e.target,
          clubID: 4
      });
      dialog.find('.bootbox-body').html(takePhoto.html());
      takePhoto.startup();
  });

  e.preventDefault();
});

<form method="post" action="">
	<input type="hidden" name="player_id" value="{$smarty.get.player_id|default:''}">
	<input id="show-take-photo" type="file" class="hidden">
	<label for="show-take-photo" class="btn btn-blue m-l-10">Take photo</label>	
</form>

;(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 dataURI to Blob
    function dataURItoBlob(dataURI) {
        // convert base64/URLEncoded data component to raw binary data held in a string
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(dataURI.split(',')[1]);
        else
            byteString = unescape(dataURI.split(',')[1]);

        // separate out the mime component
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

        // write the bytes of the string to a typed array
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        return new Blob([ia], {type:mimeString});
    }           
    
    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/jpg', 0.8);


        // add file to array
        this.param.files = [];
        this.param.files.push(dataURItoBlob(this.photo));

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

    /**
     *
     * 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();
        });
    };
})();