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.

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.

Answer 2

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