HTML Media Capture API vs. getUserMedia()

Question

currently, I'm trying to do some really simple thing (well, actually I thought it is simple...): I want to take a photo from the web-cam in a web-application.

I stumbled over two possibilities:

1. The HTML Media Capture API which looks really easy:

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

2. JavaScript media streams, which also look pretty easy:

navigator.getUserMedia()

And here comes my question:

The HTML Media Capture API is not working in desktop browsers and the JavaScript media streams are not working on iOS. So which one should I take? Both? Which one will be developed in the future? Which one is the preferred way? Which one do you prefer? Are there any drawbacks in one solutions that I don't see so fare (except of the compatibility?).

Thanks.

BTW: I'm not an experienced HTML/JavaScript developer, so please be kind ;)

Answer 1

Mobile browsers

Use HTML Media Capture to capture an image directly from the camera:

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

Android (3.0+) will jump straight to the camera. Here's how it will look after some CSS styling:

iOS (6-10) will still give you the option to select an existing photo since it doesn't support capture. See Correct Syntax for HTML Media Capture for details.

Desktop browsers:

1) Access the webcam: use MediaStream API's getUserMedia:

navigator.getUserMedia or the newer promise based navigator.mediaDevices.getUserMedia

2) Use the canvas to take a snapshot

David Walsh's example covers both steps on desktop.