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

Question

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

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

<强>1。看起来非常简单的 HTML Media Capture API:

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

<强>2。 JavaScript 媒体流，看起来也很简单:

navigator.getUserMedia()

我的问题来了:

HTML 媒体捕获 API 在桌面浏览器中不工作，JavaScript 媒体流在 iOS 上不工作。那我该吃哪一个呢？两个都？ future 会开发哪一款？哪一种是首选方式？你更倾向哪个？一种解决方案是否有任何我没有看到的缺点(兼容性除外？)。

谢谢。

顺便说一句:我不是经验丰富的 HTML/JavaScript 开发人员，所以请多关照 ;)

Answer 1

移动浏览器

使用 HTML Media Capture 从相机直接捕捉图像:

<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或更新的基于 promise 的 navigator.mediaDevices.getUserMedia

1. 使用 Canvas 拍摄快照

David Walsh's example涵盖桌面上的两个步骤。