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:

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.