从html5拍照

时间:2016-06-29 09:52:04

标签: javascript android html5 camera getusermedia

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

  • 对浏览器和操作系统的广泛支持:至少:chrome,firefox,android默认,safari
  • 我不需要实时采集。用户必须按一个按钮才能拍照,请求系统摄像头应用程序

至少有三种解决方案:

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

无论如何,我看到很多例子将相机嵌入到页面(w/ getUserMedia)中,所以我不知道我是否只能依赖第一种方法。

1 个答案:

答案 0 :(得分:9)

使用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(或者移动浏览器当前支持的捕获属性。)