Image not displayed after camera click on some of the android devices - input

Question

I am using camera in my website, in mobile phone browser I am having some problems, in some of the phone browser after clicking the camera, Image not displayed, Its show a blank image icon.
Can u plz find out what is the problem in my code?
(function () {
var takePicture = document.querySelector("#take-picture"),
showPicture = document.querySelector("#show-picture");
if (takePicture && showPicture) {
// Set events
takePicture.onchange = function (event) {
// Get a reference to the taken picture or chosen file
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
try {
// Get window.URL object
var URL = window.URL || window.webkitURL;
// Create ObjectURL
var imgURL = URL.createObjectURL(file);
// Set img src to ObjectURL
showPicture.src = imgURL;
// Revoke ObjectURL
URL.revokeObjectURL(imgURL);
}
catch (e) {
try {
// Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
showPicture.src = event.target.result;
};
// fileReader.readAsDataURL(file);
fileReader.readAsBinaryString(file);
var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
switch(exif.Orientation){
case 8:
showPicture.rotate(90*Math.PI/180);
break;
case 3:
showPicture.rotate(180*Math.PI/180);
break;
case 6:
showPicture.rotate(-90*Math.PI/180);
break;
}
}
catch (e) {
// Display error message
var error = document.querySelector("#error");
if (error) {
error.innerHTML = "Neither createObjectURL or FileReader are supported";
}
}
}
}
};
}
})();
<input type="file" id="take-picture" accept="image/*">
<div id="mobilecameraOutput"> <img src="about:blank" alt="" id="show-picture" /></div>