HTML5 Camera API

HTML

<input id="file" type="file" accept="image/*" />
<img id="preview" />
<button id="test">TEst</button>

CSS

#preview {
    width: 32px;
    height: 32px;
}

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');

var $file = $("#file");

$file.on("change", function() {
    
    console.log('xxxxxxxxxxxxxxxxxx');
    var file = $file[0].files[0];

    try {
        var url = window.URL || window.webkitURL;
        var previewUrl = getBase64(file);
      
        $("#preview")[0].src = previewUrl;
        url.revokeObjectURL(previewUrl);
    } catch(e) {
        var fileReader = new FileReader();
        fileReader.onload = function() {
            $("#preview")[0].src = fileReader.result;
        };
        fileReader.readAsDataURL(file);
    }
});

 function getBase64(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result);
          reader.onerror = error => reject(error);
        });
      }

$("#test").click(function(){ 
  
  function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

 var $file = $("#file");
 var file = $file[0].files[0];
 
getBase64(file).then(
  data => console.log(data)
);


});