How to access a mobile's camera from a web app

Question

In my web app (not native app) for mobiles, I want to take a photo and upload it, but I don't want to use Adobe Flash. Is there any way to do this?

Answer 1

AppMobi HTML5 SDK once promised access to native device functionality - including the camera - from an HTML5-based app, but is no longer Google-owned. Instead, try the HTML5-based answers in this post.

Answer 2

I don't think you can - there is a W3C draft API to get audio or video, but there is no implementation yet on any of the major mobile OSs.

Second best The only option is to go with Dennis' suggestion to use PhoneGap. This will mean you need to create a native app and add it to the mobile app store/marketplace.

Answer 3

Safari & Chrome on iOS 6+ and Android 2.2+ support HTML Media Capture which allows you to take pictures with your device's camera or select an existing one:

<input type="file" accept="image/*">

Here's how it works on iOS 10:

Android 3.0+ and Safari on iOS10.3+ also support the capture attribute which is used to jump straight to the camera.

<input type="file" accept="image/*" capture>

capture="camera" (String) and accept="image/*;capture=camera" (Parameter) were part of old specs and were replaced by capture (Boolean) the W3C Candidate Recommendation.

Support documentation: this 2013 O'Reilly book and my testing

Answer 4

In iPhone iOS6 and from Android ICS onwards, HTML5 has the following tag which allows you to take pictures from your device:

 <input type="file" accept="image/*" capture="camera">

Capture can take values like camera, camcorder and audio.

I think this tag will definitely not work in iOS5, not sure about it.

Answer 5

Nowadays at least with android it's relatively easy. Just use normal file input tag and when user clicks it the phone will ask if user wants to use camera (or file managers etc..) to upload a file. Just take a photo with the camera and it will automatically be added and uploaded.

No idea about iphone. Maybe someone can enlighten on that. EDIT: Iphone works similarly.

Sample of the input tag:

<input type="file" accept="image/*" capture="camera">

Answer 6

Just to update this, the standard now is:

<input type="file" name="image" accept="image/*" capture="environment">

to access the environment-facing (rear) camera, and

<input type="file" name="image" accept="image/*" capture="user">

for user-facing (front) camera. To access video, substitute "video" for "image" in name.

Tested on iPhone 5c, running iOS 10.3.3, firmware 760, works fine.

https://www.w3.org/TR/html-media-capture/