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?

"Webpage" means, it should be easily able to accessed from any kind of clients/devices. So, should i set restrictions? — 夏期劇場, Dec 20 '11 at 19:58
Hmm.. "Camera" of the Mobile Smart Phones / etc.. from the webpage. — 夏期劇場, Dec 20 '11 at 20:05
Hi, this is a subject I'm currently studying for my own projects. PWAs enable you to use native device features in modern browsers: https://developers.google.com/web/updates/2016/12/imagecapture — palmaone, Aug 13 '19 at 02:02

score 294 · Answer 1 · edited Dec 06 '12 at 16:47

294

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.

edited Dec 06 '12 at 16:47

LittleBobbyTables - Au Revoir

32,008
25
109
114

answered Nov 21 '12 at 08:56

Ashish

3,572
3
18
25

38

Here's great tutorial: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ – Micah Mar 13 '13 at 19:07
2

GetUserMedia is not required here. – Ray Nicholus Jun 21 '13 at 18:17
I get a "getUserMedia() not supported by this device" - but I am on safari and have ios7 - why? – Dan just now edit – Dan Dec 16 '13 at 00:05
11

I think maybe the code should be `` instead. [According to MDN, there's no `capture` attribute for an `input` element.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input) – Kenny Evitt Sep 22 '14 at 19:30
Worked perfectly on iOS and Android for me. Found a test page at http://mobilehtml5.org/ts/?id=23 for anyone not wanting to write up their own test. – brichins Feb 18 '16 at 17:23
After capturing an image it shows what appears to be a filename consisting of a long string of digits and ending in "jpg". Where is this (presumably) temporary file stored at? – Michael Mar 29 '16 at 07:33
@LittleBobbyTables can you do this for multiple files like : **** – parseguy Apr 03 '16 at 23:39
11

Both `capture="camera"` (String) and the older `accept="image/*;capture=camera"` have been replaced in 2012 with `capture="capture"` (Boolean) . The attribute is used to force capture instead of selecting from the library. See [the spec](https://w3c.github.io/html-media-capture/) and [Correct Syntax for HTML Media Capture](https://addpipe.com/blog/correct-syntax-html-media-capture/) – octavn Nov 09 '16 at 15:56
Works on IOS as well. If you remove capture="camera", you get the option to use camera / upload from gallery – Kira Feb 22 '19 at 04:36
in Adnroid, this solution gives me options for camera along with library as well. I just want to open straight camera in android. how do I do this? – newdeveloper May 10 '19 at 00:51

score 63 · Answer 2 · edited Apr 13 '18 at 09:27

63

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/

edited Apr 13 '18 at 09:27

Ishan Anand

403
2
10

answered Oct 01 '17 at 07:25

user3204365

649
5
3

Is there a way to take a photo with my notebook's camera on a desktop browser? This solutions appearently only works on mobile devices. However the spec's page suggest that it could work on desktop too: https://www.w3.org/TR/html-media-capture/images/file-upload-state.png – viam0Zah Sep 21 '20 at 14:14

Tuxie · Answer 3 · 2014-09-23T19:18:59.003

41

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">

edited Sep 23 '14 at 19:18

answered Jul 11 '13 at 13:18

Tuxie

565
5
9

can you do this for multiple files like : **multiple="multiple"** – parseguy Apr 03 '16 at 23:33
example: **** – parseguy Apr 03 '16 at 23:37
`multiple` works both on Android and iOS, see [Correct Syntax for HTML Media Capture](https://addpipe.com/blog/correct-syntax-html-media-capture/) – octavn Nov 09 '16 at 15:51
Not sure for other apple device, at least this solution also works on iPad now. – cytsunny Aug 09 '17 at 10:31

octavn · Accepted Answer · 2022-11-01T06:12:31.933

34

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

edited Nov 01 '22 at 06:12

answered Nov 10 '16 at 14:45

octavn

3,154
32
49

Mine on Android just jumps straight to Selecting photos, but not giving me the option for Camera even when i have set capture="camera"....totally stuck – Benyaman Apr 21 '17 at 04:07
@Benyaman Try with `capture` instead of `capture="camera"` . Curious what device & Android version. – octavn Apr 21 '17 at 07:49
I did, on Android 5.0 apparently Phonegap doesnt have HTML capture built in. So it can't capture things, no camrecord, no audio, no Camera. I had to build a work around. – Benyaman Apr 22 '17 at 16:46
Thanks for uploading the photos for illustration, it's helpful. – viam0Zah Sep 21 '20 at 14:15
you can also do capture="environment" nowadays – Gabriel Petersson Sep 24 '20 at 17:57

Louis · Answer 5 · 2012-12-07T01:13:52.020

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 ).

edited Dec 07 '12 at 01:13

answered Dec 06 '12 at 16:28

Louis

1,014
2
11
20

oh sorry is call setUserMedia API – Louis Dec 07 '12 at 01:12

score 5 · Answer 6 · answered Apr 20 '18 at 18:29

5

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.

answered Apr 20 '18 at 18:29

Aaron Benjamin

1,291
3
18
27

On IOS it depends on your IOS-Version, if you can use getUserMedia for Chrome/Firefox. – A-Tech Jun 13 '22 at 13:17

score 4 · Answer 7 · edited May 23 '17 at 10:31

4

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.

edited May 23 '17 at 10:31

Community

1
1

answered Nov 15 '12 at 10:29

Dave Everitt

17,193
6
67
97

1

I don't believe Google has any ownership over AppMobi or their products. – fakeguybrushthreepwood Nov 30 '12 at 01:58
Ah - my mistake, because it's on the Chrome web store - Google reference removed. Here are the real partners: http://www.appmobi.com/?page_id=468 – Dave Everitt Dec 02 '12 at 12:03

score 4 · Answer 8 · answered Feb 08 '14 at 10:11

4

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/

answered Feb 08 '14 at 10:11

Michael Sultana

75
2
8

2

WebRTC and `getUserMedia` is overkill, `` will do the trick. – octavn Nov 09 '16 at 15:53

score 2 · Answer 9 · answered Apr 11 '18 at 12:54

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

Dennis Traub · Answer 10 · 2011-12-20T20:31:17.250

0

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.

edited Dec 20 '11 at 20:31

answered Dec 20 '11 at 20:03

Dennis Traub

50,557
7
93
108

4

That still requires that an app be installed on the mobile device, which is what I think the OP wants to avoid. – Michael Petrotta Dec 20 '11 at 20:04
@MichaelPetrotta do you know a better way? – Dennis Traub Dec 20 '11 at 20:09
2

I don't believe what the OP is asking for is possible. – Michael Petrotta Dec 20 '11 at 20:09
@MichaelPetrotta that's what I think as well. And the best way I can think of would be PhoneGap, since it works on iOS (which Flash doesn't). Still it's native, true, but allows at least a bit of cross-platform access to cameras from a web page. – Dennis Traub Dec 20 '11 at 20:12

Kevin · Answer 11 · 2011-12-20T20:16:11.817

0

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.

edited Dec 20 '11 at 20:16

answered Dec 20 '11 at 20:10

Kevin

11,521
22
81
103

sorry to repost - i was looking to see if you got around the NPE exception with jersey client on android. stuck :( – necromancer Dec 20 '11 at 20:42

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

11 Answers11

Linked

Related