I'm attempting to use html5 (and php / jscript if needed) to access the mobile device's camera and take a snapshot. The end idea is to use this to scan barcodes / qr codes and decode them into the required information, but this isn't an issue just yet. i've come across some topics and found these two snippets;
<input type="file" accept="image/*" capture="camera" />
and,
<form action="server.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="image" value = '' accept="image/*" capture>
<input type="submit" value="Upload">
</form>
The first one allows me to take a picture using my camera, and the second one adds a submit button and allows me to send the data off to be decoded, however it basically navigates away from my web app page, goes to the camera, you take a photo and it goes back to the webpage. This is a fair few clicks and i'm looking to do something more streamlined. Is there any way to get the camera feed and load it onto my web app page, perhaps in a canvas of some sort?
I've read a little here, about compatibility and what not and i don't think this is an issue;
http://caniuse.com/#search=getUserMedia
Theres an app on the iPhone store called "red laser" which seems to do what i want, whereby the camera feed stays within the app, without the need to navigate to the phones native camera facility, but i think this could be just done in it's native code, which is obviously able to use it's native api, so perhaps this is how it's possible.
Is this something html5 can do?
check the HTML Media Capture W3C draft there you have examples with the scripting required.
In my firefox 19.02 over Android 2.3.6 your code just launch the camera and shows the file path in the input box... i don't imagine a simplest way! Using zxing from an apk does the same.
If you're focusing in an specific browser you should read about the specifics of the host environment.