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

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 2

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/

Answer 3

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 4

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 5

well, there's a new HTML5 features for accessing the native device camera - "getUserMedia API"

NOTE: HTML5 can handle photo capture from a web page on Android devices (at least on the latest versions, run by the Honeycomb OS; but it can’t handle it on iPhones but iOS 6 ).

Answer 6

You can use WEBRTC but unfortunately it is not supported by all web browsers. BELOW IS THE LINK TO SHOW WHICH BROWSERS supports it http://caniuse.com/stream

And this link gives you an idea of how you can access it(sample code). http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Answer 7

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 8

You'll want to use getUserMedia to access the camera.

This tutorial outlines the basics of accessing a device camera from the browser: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

Note: This works on most Android devices, and in iOS in Safari only.

Answer 9

It should be noted that security features have been implemented which require either the app to be ran locally under localhost, or through SSL for GetUserMedia() to work.

I discovered this when trying several of the demos available and was dissapointed when they didn't work! See: New Security Restrictions

Answer 10

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 11

I don't know of any way to access a mobile phone's camera from the web browser without some additional mechanism (i.e. Flash or some type of container that allows access to the hardware API)

For the latter have a look at PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html

With this you should be able to access the camera at least on iOS and Android-based devices.