HTML Media Capture API与getUserMedia() [英] HTML Media Capture API vs. getUserMedia()

问题描述

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

currently, I'm trying to do some really simple thing (well, actually I thought it is simple...): I want to take a photo from the web-cam in a web-application.

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

I stumbled over two possibilities:

1.HTML Media Capture API看起来非常简单:

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

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

navigator.getUserMedia()

这是我的问题:

HTML Media Capture API在桌面浏览器中不起作用，而JavaScript媒体流在iOS上不起作用.那我应该选哪一个呢?两个都?将来会开发哪一个?哪一种是首选方式?你更倾向哪个?在一种解决方案中是否有我看不到的缺点(除了兼容性以外)?

The HTML Media Capture API is not working in desktop browsers and the JavaScript media streams are not working on iOS. So which one should I take? Both? Which one will be developed in the future? Which one is the preferred way? Which one do you prefer? Are there any drawbacks in one solutions that I don't see so fare (except of the compatibility?).

谢谢.

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

BTW: I'm not an experienced HTML/JavaScript developer, so please be kind ;)

推荐答案

移动浏览器

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

Use HTML Media Capture to capture an image directly from the camera:

<输入类型=文件" accept =图像/*"捕获>

Android(3.0+)将直接跳转到相机.这是一些CSS样式后的外观:

Android (3.0+) will jump straight to the camera. Here's how it will look after some CSS styling:

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

iOS (6-10) will still give you the option to select an existing photo since it doesn't support capture. See Correct Syntax for HTML Media Capture for details.

台式机浏览器:

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

1) Access the webcam: use MediaStream API's getUserMedia:

navigator.getUserMedia 或基于更新版本的 navigator.mediaDevices.getUserMedia

2)使用画布拍摄快照

2) Use the canvas to take a snapshot

大卫·沃尔什(David Walsh)的示例涵盖了台式机上的两个步骤.

David Walsh's example covers both steps on desktop.

这篇关于HTML Media Capture API与getUserMedia()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！