从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这样的东西.以下是如何使用文件输入标记的说明.

该媒体捕获API是,这意味着它的道路上成为一个标准的候选人的推荐,但是,我不知道的实现目前W3C推荐(使用输入标签裸捕获属性)的任何浏览器.这种<input type="file" accept="image/*">风格目前似乎只有移动浏览器支持.

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