Take a picture with html5

Question

I have read many ways to get an image from an html5 page. I'm still not sure what is best for my needs:

• broad support for browsers and os: at least: chrome, firefox, android default, safari
• I do not need a real-time acquisition. The user must press a button to take a picture by requesting a system camera application.

There are at least three solutions:

• <input type="file" accept="image/*;capture=camera">
• Navigator.getUserMedia() (it is deprecated)
• MediaDevices.getUserMedia() (seems experimental)

Anyway, I see many examples to insert a camera into a page (w/ getUserMedia) , so I don’t know if I can only rely on the first method.

Answer 1

Using WebRTC API getUserMedia will cover all modern browsers besides Safari: http://caniuse.com/#feat=stream

Here is an example of a page in which getUserMedia uses still image capture (with a link to a page describing the code). Most getUserMedia demos show a video stream in the visible area of ​​the canvas, but this is not required. You can capture an image using getUserMedia without displaying the video stream in a visible canvas.

Unfortunately, Apple is slowly using the WebRTC APIs, so I think the file input tag is the best you can hope for if you don't want to use something like Cordoba. Here is a description of the use of the file input tag.

The Media Capture API is a candidate’s recommendation, which means that it’s already on the way to the standard, however, I don’t know any browsers that implement the current W3C recommendation (using the bare capture attribute in the input tag). The style <input type="file" accept="image/*"> is currently only supported by mobile browsers.

In general, if you want to have broad browser support in the near future, you will need to support both methods until Apple starts supporting the WebRTC API or until other desktop browsers start supporting the Media Capture API (or the option with a capture attribute that currently supported by mobile browsers).