从html5拍照答案

【问题标题】：Take a picture from html5从html5拍照
【发布时间】：2016-06-29 09:52:03
【问题描述】：

我阅读了很多从 html5 页面获取图像的方法。我仍然不确定什么是最适合我的需求：

至少有三种解决方案：

反正我看到很多例子把摄像头嵌入到页面(w/ getUserMedia)所以不知道能不能只靠第一种方法。

【问题讨论】：

getUserMedia 没有被弃用，它只是将名称更改为navigator.mediaDevices.getUserMedia。如果您想在手机上拍摄高分辨率照片，请选择 #1，因为 getUserMedia 仅限于视频分辨率 atm。
好的，谢谢。我被这个链接弄糊涂了：developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia我没看懂只是改了名字但是是同一个类！
它返回一个promise，而不是接受成功和失败的回调，其他的都是一样的。

【解决方案1】：

使用 WebRTC getUserMedia API 将涵盖除 Safari 之外的所有现代浏览器：http://caniuse.com/#feat=stream

Here 是一个示例页面，它使用 getUserMedia 拍摄静态图片（带有指向描述代码的page 的链接）。大多数 getUserMedia 演示在可见的画布区域中显示视频流，但这不是必需的。您可以使用 getUserMedia 捕获图像，而无需在可见画布中显示视频流。

不幸的是，Apple 采用 WebRTC API 的速度很慢，所以我认为文件输入标签是你所希望的最好的，除非你愿意使用像 Cordova 这样的东西。 Here是文件输入标签的使用说明。

Media Capture API 是候选推荐，这意味着它正在成为标准，但是，我不知道有任何浏览器实现了当前的 W3C 推荐（在输入标签中使用裸捕获属性） . <input type="file" accept="image/*"> 样式目前似乎只有移动浏览器支持。

总之，如果您想在不久的将来获得广泛的浏览器支持，您将需要同时支持这两种方法，直到 Apple 开始支持 WebRTC API 或直到其他桌面浏览器开始支持 Media Capture API（或带有移动浏览器当前支持的捕获属性）。

【讨论】：

据我了解 getUserMedia API 允许将相机输出嵌入到网页中。因为我不需要嵌入任何东西，只需获取和处理（在后台）静止图像，我认为第一种方法更好。
@Mark 我更新了我的答案。如果您希望在不久的将来获得广泛的浏览器支持，不幸的是，您可能需要同时支持这两种方法。除非您只是在移动设备上使用，在这种情况下，输入标签方法可能就足够了（尽管根据 W3C 的建议，它可能会在某些时候略有变化）。我还在我的更新中指出 getUserMedia 不需要显示实时视频。大多数演示都展示了它，因为它对演示目的更有趣。
好吧，虽然我只在移动端使用，但值得知道 getUserMedia 不需要显示实时视频。
iOS11 和 macOS high sierra 中的 Safari 将支持 getUserMedia。