javascript - HTML 媒体捕获 API 与 getUserMedia()

Question

目前，我正在尝试做一些非常简单的事情（好吧，实际上我认为这很简单......）：我想从 web-application 中的网络摄像头拍照。

我偶然发现了两种可能性：

1. HTML Media Capture API，看起来很简单：

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

2. JavaScript 媒体流，看起来也很简单：

navigator.getUserMedia()

我的问题来了：

HTML Media Capture API 在桌面浏览器中不工作，JavaScript 媒体流在 iOS 上不工作。那我应该拿哪一个？两个都？未来会发展哪一个？哪一种是首选方式？你更倾向哪个？一种解决方案是否存在我目前看不到的任何缺点（兼容性除外？）。

谢谢。

顺便说一句：我不是经验丰富的 HTML/JavaScript 开发人员，所以请善待；）

score 3 · Accepted Answer

移动浏览器

使用 HTML Media Capture直接从相机捕获图像：

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

Android (3.0+) 将直接跳转到相机。下面是它在一些 CSS 样式之后的样子：

iOS (6-10) 仍会为您提供选择现有照片的选项，因为它不支持capture. 有关详细信息，请参阅HTML 媒体捕获的正确语法。

桌面浏览器：

1) 访问网络摄像头：使用 MediaStream API getUserMedia：

navigator.getUserMedia或基于更新的承诺navigator.mediaDevices.getUserMedia

2）使用画布拍摄快照

David Walsh 的示例涵盖了桌面上的这两个步骤。

score 2 · Accepted Answer

这是示例 http://html5.by/blog/demo/image-capture-getusermedia/ 这里是可以帮助您的文章 http://html5.by/blog/html5-image-capture-getusermedia-stream-api -mirror/ 抱歉它是俄语的，但是示例正在运行，您可以查看代码 + 谷歌翻译 :)

希望它会有所帮助

2 回答 2