javascript - 从html5拍照

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

对浏览器和操作系统的广泛支持:至少:chrome，Firefox，android default，Safari

我不需要实时采集。用户必须按下按钮拍照，以请求系统相机应用程序

至少有三种解决方案:

<input type="file" accept="image/*;capture=camera">

Navigator.getUserMedia()(似乎已弃用)

MediaDevices.getUserMedia()(似乎是实验性的)

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

最佳答案

使用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标签中使用裸捕获属性)。当前，似乎仅移动浏览器支持<input type="file" accept="image/*">样式。

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

关于javascript - 从html5拍照，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38096115/