从html5拍照

Question

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

• 对浏览器和操作系统的广泛支持：至少：chrome，firefox，android默认，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

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

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

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

总之，如果您希望在不久的将来获得广泛的浏览器支持，您将需要支持这两种方法，直到Apple开始支持WebRTC API或其他桌面浏览器开始支持Media Capture API（或具有capture属性的变体）目前支持移动浏览器）。