如何添加modernizr构建，以便我可以正确检查Modernizr.capture？ （目前总是未定义）

Question

我需要检查用户的设备是否可以从我网站上的摄像头输入。要做到这一点，我试图使用modernizr。我已经按照他们网站上提供的步骤/示例代码进行了操作，但是当我测试capture属性时，无论我是否使用支持capture的设备，我总是得到未定义。

我遵循的步骤：

1. I browsed for the input[capture] attribute and added it to the build

2. I copied the demo code to check this feature and added it to my project

3. I downloaded the build, added the js file to my project, and included the appropriate reference in my page

然而，在完成所有这些操作后，检查Chrome检查器中的Modernizr.capture时，it always shows up as undefined。

我的基本检查功能如下：

    $scope.hasCamera = function() {
        if (Modernizr.capture) {
            // supported
            return true;
        } else {
            // not-supported
            return false;
        }
    }

这是我第一次使用Modernizr。我错过了一步或做错了什么吗？我还使用npm install安装了modernizr，并尝试从命令行添加对json配置文件的引用。

或者，我如何检查我的设备是否有相机？

非常感谢你的时间。如果我不清楚或者您是否需要我提供任何其他信息，请告诉我。

Answer 1

一些事情

1. 虽然照片很有用，但在公共网站（您自己的项目或jsbin.com之类的东西）中托管的实际代码是10倍有用。因此，我不确定为什么它会以未定义的形式回归。
2. 实际捕获检测is quite simple。这一切都归结为这个
document.createElement（'input'）`
中的

var capture ='capture'

1. 您的代码比它需要的复杂得多。让我们分解吧。您尝试将$scope.hasCamera设置为等于Modernizr.capture的结果，并且您正在使用函数检查Modernizr.capture的值，如果为true，则返回true。如果为false，则返回false。有一些重复的逻辑，所以我们可以从内到外分解它。

首先，测试true / false值，然后返回相同的值。这意味着您只需返回Modernizr.capture

的值即可简化代码

$scope.hasCamera = function() {
  return Modernizr.capture
}

虽然Modernizr将始终为您提供一个布尔值（当它正在运行时 - 没有看到您的实际代码我不能说它为什么会以未定义的形式返回），如果您不确定可以添加的值{{在它之前将它强制转换为布尔值。在您的情况下，它会!!进入undefined

false

此时，您可以看到我们正在设置一个函数来返回静态值。这意味着我们可以直接将静态值分配给变量，而不是设置一个函数来执行该操作

$scope.hasCamera = function() {
  return !!Modernizr.capture
}

现在，您可以做的更好的事情就是如果您只使用Modernizr来实现这一功能。由于它是如此简单的特征检测，因此使用所有的Modernizr都是过度的。

document.createElement（'input'）中的 $ scope.hasCamera ='capture'`