问题
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 ;)
回答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.
回答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
来源：https://stackoverflow.com/questions/16338937/html-media-capture-api-vs-getusermedia