如何测试浏览器是否支持<input capture />答案

【问题标题】：How to test if the browser support <input capture />如何测试浏览器是否支持<input capture />
【发布时间】：2018-07-11 05:12:04
【问题描述】：

如何测试当前浏览器是否支持手机浏览器使用设备摄像头拍照的功能？

在所有桌面浏览器中基本上都会忽略捕获：https://caniuse.com/#feat=html-media-capture

我如何检测我是否可以使用捕获（并且它不会显示打开文件对话框，但实际上会打开图片应用程序）？

【问题讨论】：

理论上，如果您将该属性添加到 HTML，您应该能够检查 JavaScript 中 input 元素的 capture 属性。如果不是undefined，则支持。
您可以使用 Modernizr.js - 请参阅此处的文档：modernizr.com/docs
请注意，这是specified in the standard 的行为，即：“捕获 IDL 属性必须反映同名的相应内容属性。”该规定是为大多数属性定义的，因此您可以通过检查相应属性的值来知道它是否受支持。
图像捕获的specification 表明它可能仍会打开一个文件对话框，但该对话框可能包含一个“相机”按钮，用于从选择文件切换。

【解决方案1】：

您可以在 JS 中创建一个输入元素并测试 capture 属性。如果不受支持，它将是未定义的。

var el = document.createElement('input')
var supported = el.capture != undefined

console.log('capture supported: '+supported)

这是它在 iOS 模拟器中的样子

【讨论】：

它可以正常工作，但是如果我在 Angular 9 中使用 Typescript 3.8 则不会...如果我将属性 capture 设置为一个元素，它将被设置，不管它是否支持... :'(

【解决方案2】：

您可以使用以下功能：

function supported(attribute) {
   var i = document.createElement('input');
   i.setAttribute(attribute, true);
   return !!i[attribute];
}

你可以调用它，比如supported('capture')，或者如果你想测试accept属性supported('accept')

来源：http://anssiko.github.io/html-media-capture/

【讨论】：