javascript - 从html5拍照

Question

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

• 广泛支持浏览器和操作系统:至少:chrome、firefox、android default、safari
• 我不需要实时采集。用户必须按下按钮才能拍照，请求系统相机应用

至少有三种解决方案:

• <input type="file" accept="image/*;capture=camera">
• Navigator.getUserMedia() (似乎已弃用)
• MediaDevices.getUserMedia() (这似乎是实验性的)

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

Answer 1

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

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

不幸的是，Apple 在采用 WebRTC API 方面进展缓慢，因此我认为文件输入标签是您所能期望的最好的标签，除非您愿意使用 Cordova 之类的东西。 Here是对如何使用文件输入标签的说明。

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

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