I've been looking into using html 5 <input type="file" accept="image/*" capture="camera"> to take a picture from my webapp and upload the image to the database using php - this is now working correctly.
However, the only way I can seem to find to display the "take picture" option is by a text field that has a button in it called "choose file"
Is there a way to be able to click on the existing image to open up the take picture options, then display the new image instead of the existing picture after the picture has been taken/file selected by the user? They should then click on the "upload" button if they are happy to save the image.
See JS fiddle here, hopefully this makes some sense! http://jsfiddle.net/6dxGY/
I know this is an old question but I came across it while trying to solve this same issue. I thought it'd be worth sharing this solution I hadn't found anywhere else.
Basically the solution is to use CSS to hide the <input> element and style a <label> around it to look like a button. Click the 'Run code snippet' button to see the results.
I had used a JavaScript solution before that worked fine too but it is nice to solve a 'presentation' issue with just CSS.
label.cameraButton {_x000D_
display: inline-block;_x000D_
margin: 1em 0;_x000D_
_x000D_
/* Styles to make it look like a button */_x000D_
padding: 0.5em;_x000D_
border: 2px solid #666;_x000D_
border-color: #EEE #CCC #CCC #EEE;_x000D_
background-color: #DDD;_x000D_
}_x000D_
_x000D_
/* Look like a clicked/depressed button */_x000D_
label.cameraButton:active {_x000D_
border-color: #CCC #EEE #EEE #CCC;_x000D_
}_x000D_
_x000D_
/* This is the part that actually hides the 'Choose file' text box for camera inputs */_x000D_
label.cameraButton input[accept*="camera"] {_x000D_
display: none;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
<title>Nice image capture button</title>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<label class="cameraButton">Take a picture_x000D_
<input type="file" accept="image/*;capture=camera">_x000D_
</label>_x000D_
</body>_x000D_
_x000D_
</html>You can trigger a file input element by sending it a Javascript click event, e.g.
<input type="file" ... id="file-input">
$("#file-input").click();
You could put this in a click event handler for the image, for instance, then hide the file input with CSS. It'll still work even if it's invisible.
Once you've got that part working, you can set a change event handler on the input element to see when the user puts a file into it. This event handler can create a temporary "blob" URL for the image by using window.URL.createObjectURL, e.g.:
var file = document.getElementById("file-input").files[0];
var blob_url = window.URL.createObjectURL(file);
That URL can be set as the src for an image on the page. (It only works on that page, though. Don't try to save it anywhere.)
Note that not all browsers currently support camera capture. (In fact, most desktop browsers don't.) Make sure your interface still makes sense if the user gets asked to pick a file.
For those who need the input file to open directly the camera, you just have to declare capture parameter to the input file, like this :
<input type="file" accept="image/*" capture>
Source: Stackoverflow.com