javascript - Take a picture from html5 -

i read lot of ways acquire image html5 page. i'm still unsure what's best needs:

• wide support browsers , os: @ least: chrome, firefox, android default, safari
• i don't need real-time acquisition. user must press button take picture, requesting system camera application

there @ least 3 solutions :

• <input type="file" accept="image/*;capture=camera">
• navigator.getusermedia() (it seems deprecated)
• mediadevices.getusermedia() (it seems experimental)

anyway, see lot of examples embed camera page (w/ getusermedia) don't know if can rely on first method.

using webrtc getusermedia api going cover modern browsers apart safari: http://caniuse.com/#feat=stream

here example page uses getusermedia take still picture (with link page describing code). getusermedia demos show video stream in visible canvas area, that's not required. can capture image using getusermedia without displaying video stream in visible canvas.

unfortunately, apple has been slow adopt webrtc apis think file input tag best can hope there unless willing use cordova. here description of how use file input tag.

the media capture api candidate recommendation means on way becoming standard, however, don't know of browsers implement current w3c recommendation (using bare capture attribute in input tag). <input type="file" accept="image/*"> style seems supported mobile browsers.

in summary, if want have broad browser support in near future, going need support both methods until apple starts supporting webrtc apis or until other desktop browsers start supporting media capture api (or variant capture attribute supported mobile browsers).