HTML 媒体捕获 API 与 getUserMedia()答案

【问题标题】：HTML Media Capture API vs. getUserMedia()HTML 媒体捕获 API 与 getUserMedia()
【发布时间】：2013-04-26 16:16:27
【问题描述】：

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

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

1.看起来非常简单的 HTML 媒体捕获 API：

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

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

navigator.getUserMedia()

我的问题来了：

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

谢谢。

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

【问题讨论】：

这是最前沿的东西...这里有 2 个很好的帖子可以帮助您入门 html5doctor.com/getusermedia 和 davidwalsh.name/browser-camera（信息太多，无法在此处重新发布 - 抱歉链接错误）。
我会说两者......最简单的概念是使用 Modernizr 或其他特征检测，有输入，如果输入不能在本机工作，则触发 javascript 版本。这是处理所有渐进增强的标准方法，所以这里没有什么新东西，只是因为这些元素/api'是新的。

【解决方案1】：

移动浏览器

使用 HTML 媒体捕获直接从相机中捕获图像：

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

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

iOS (6-10) 仍会为您提供选择现有照片的选项，因为它不支持 capture。详情请见Correct Syntax for HTML Media Capture。

桌面浏览器：

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

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

2) 使用画布拍摄快照

David Walsh's example 在桌面上涵盖了这两个步骤。

【讨论】：

【解决方案2】：

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

希望对你有帮助

【讨论】：