javascript - HTML Media Capture API vs. getUserMedia() - Stack Overflow

admin管理员组

文章数量:1277901

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 es 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 patibility?).

Thanks.

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

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 es 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 patibility?).

Thanks.

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

• javascript
• html
• webcam

Share Improve this question Follow asked May 2, 2013 at 13:12 Thomas UhrigThomas Uhrig 31.6k1313 gold badges6363 silver badges8080 bronze badges 2

• 1 this is cutting edge stuff ... here are 2 good posts that will get you started html5doctor./getusermedia and davidwalsh.name/browser-camera (too much info to re-post here -- sorry link frowners). – carrabino Commented May 15, 2013 at 19:21
• 2 I'd say both... the simplest concept would be to use Modernizr or other feature detection, have the input, and if the input will not work natively then trigger the javascript version. That's the standard way of dealing with all progressive enhancement though, so nothing new here just cuz these elements/apis' are new. – Nick Sharp Commented Jun 10, 2013 at 16:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

here is example http://html5.by/blog/demo/image-capture-getusermedia/ and here is article that can help you http://html5.by/blog/html5-image-capture-getusermedia-stream-api-mirror/ sorry it is in Russian, but example is working and you can check the code + google translate :)

hope it will help

本文标签： javascriptHTML Media Capture API vs getUserMedia()Stack Overflow