从 html5 拍一张照片
Take a picture from html5
我阅读了很多从 html5 页面获取图像的方法。
我仍然不确定什么最适合我的需求：
- 广泛支持浏览器和os：至少：chrome、firefox、android默认、safari
- 我不需要实时采集。用户必须按下按钮才能拍照，请求系统相机应用程序
至少有三种解法：
<input type="file" accept="image/*;capture=camera">Navigator.getUserMedia()（似乎已弃用）MediaDevices.getUserMedia()（这似乎是实验性的）
反正我看到很多把摄像头嵌入到页面的例子(w/ getUserMedia)所以我不知道是否只能依靠第一种方法
使用 WebRTC getUserMedia API 将涵盖除 Safari 之外的所有现代浏览器：http://caniuse.com/#feat=stream
Here is an example page that uses getUserMedia to take a still picture (with a link to a page 描述代码）。大多数 getUserMedia 演示在可见 canvas 区域显示视频流，但这不是必需的。您可以使用 getUserMedia 捕获图像，而无需在可见 canvas.
中显示视频流
不幸的是，Apple 在采用 WebRTC APIs 方面进展缓慢，所以我认为文件输入标签是您所能希望的最好的，除非您愿意使用 Cordova 之类的东西。 Here是文件输入标签的使用说明
Media Capture API 是一个候选推荐，这意味着它正在成为标准，但是，我不知道有任何浏览器实现了当前的 W3C 推荐（在输入标签）。 <input type="file" accept="image/*"> 样式目前似乎只有移动浏览器支持。
总而言之，如果您想在不久的将来获得广泛的浏览器支持，您将需要同时支持这两种方法，直到 Apple 开始支持 WebRTC APIs 或直到其他桌面浏览器开始支持 Media Capture API（或移动浏览器当前支持的具有 capture 属性的变体）。
我阅读了很多从 html5 页面获取图像的方法。 我仍然不确定什么最适合我的需求：
- 广泛支持浏览器和os：至少：chrome、firefox、android默认、safari
- 我不需要实时采集。用户必须按下按钮才能拍照，请求系统相机应用程序
至少有三种解法：
<input type="file" accept="image/*;capture=camera">Navigator.getUserMedia()（似乎已弃用）MediaDevices.getUserMedia()（这似乎是实验性的）
反正我看到很多把摄像头嵌入到页面的例子(w/ getUserMedia)所以我不知道是否只能依靠第一种方法
使用 WebRTC getUserMedia API 将涵盖除 Safari 之外的所有现代浏览器：http://caniuse.com/#feat=stream
Here is an example page that uses getUserMedia to take a still picture (with a link to a page 描述代码）。大多数 getUserMedia 演示在可见 canvas 区域显示视频流，但这不是必需的。您可以使用 getUserMedia 捕获图像，而无需在可见 canvas.
中显示视频流不幸的是，Apple 在采用 WebRTC APIs 方面进展缓慢，所以我认为文件输入标签是您所能希望的最好的，除非您愿意使用 Cordova 之类的东西。 Here是文件输入标签的使用说明
Media Capture API 是一个候选推荐，这意味着它正在成为标准，但是，我不知道有任何浏览器实现了当前的 W3C 推荐（在输入标签）。 <input type="file" accept="image/*"> 样式目前似乎只有移动浏览器支持。
总而言之，如果您想在不久的将来获得广泛的浏览器支持，您将需要同时支持这两种方法，直到 Apple 开始支持 WebRTC APIs 或直到其他桌面浏览器开始支持 Media Capture API（或移动浏览器当前支持的具有 capture 属性的变体）。