getUserMedia - 如何检测设备是否真的有摄像头答案

【问题标题】：getUserMedia - how to detect if the device actually has a cameragetUserMedia - 如何检测设备是否真的有摄像头
【发布时间】：2012-10-14 19:48:36
【问题描述】：

我正在使用 html5/javascript getUserMedia api 编写一个 js 应用程序，该应用程序将使用设备的摄像头（如果可用）。我正在使用 Modernizr 来检测（浏览器的）功能，如下所示：

if (Modernizr.getusermedia) {

在真正的区块内：

navigator.getUserMedia(
    {   // we would like to use video but not audio
        // This object is browser API specific! - some implementations require boolean properties, others require strings!
        video: true, 
        audio: false
    },
    function(videoStream) {
        // 'success' callback - user has given permission to use the camera
        // my code to use the camera here ... 
    },
    function() {
        // 'no permission' call back
        console.log("user did not give access to the camera");
    }               
);

这很好用。但我发现 Modernizer.getUserMedia 调用根据支持 api 的浏览器返回 true，而不是设备是否真的有摄像头。

IE。在我的带有 iSight 摄像头和当前版本 Chrome 的 MacBook 上，Modernizr.getUserMedia 返回 true，然后 navigator.getUserMedia(...) 提示允许使用摄像头。很棒

但是，在另一台没有摄像头但使用当前版本的 Chrome 的机器上，Modernizr.getUserMedia 返回 true，这意味着 navigator.getUserMedia(...) 提示允许使用设备没有的摄像头.不太好！

有谁知道是否可以检测到相机的存在？理想情况下，如果用户没有摄像头，我不想提示他们访问摄像头的权限！

干杯

内森

【问题讨论】：

当您允许在没有摄像头的设备上调用哪个回调（使用哪些参数）？
调用了成功回调，但我没有检查 arg（我上面的代码中的 videoStream）是否为空。这是一个好点，我应该检查一下。很快就会这样做，并让您知道...

标签： javascript camera getusermedia modernizr mediadevices

【解决方案1】：

您可以使用 MediaStreamTrack.getSources。这将返回连接到 PC 的视频和音频设备列表。这不需要用户许可。

然后您可以将 ID 传递给 getUserMedia 以获取所需的媒体设备。

【讨论】：

MediaStreamTrack.getSources 已被移除，不再受支持。

【解决方案2】：

这对我有帮助：

function(videoStream) {
    // 'success' callback - user has given permission to use the camera
    if (videoStream.getVideoTracks().length > 0) {
        // my code to use the camera here ... 
    }
}

【讨论】：

【解决方案3】：

navigator.mediaDevices api 在过去五年左右的时间里已经稳定下来。

您现在可以通过浏览器 javascript 执行此操作。

{
  navigator.mediaDevices.enumerateDevices()
  .then ( function (devices) {
      console.log(devices)
      const videoDevices = devices.filter(device => device.kind === 'videoinput')
      console.log(videoDevices)
  })
}

如果您的机器有任何视频设备，在过滤devices 数组后，您将在videoDevices 数组中返回一些内容。

但是，除非您的程序已经调用了 getUserMedia() 并获得了许可，否则您无法（至少在 Google Chrome 上）知道您拥有多少个网络摄像头或它们的 label 值（名称）是什么。因为网络蠕变。

【讨论】：

【解决方案4】：

getUserMedia API 仍然很新鲜，并且会有一些错误和需要改进的地方，比如这个问题。

但目前我没有办法让您检查计算机是否真的有摄像头。虽然您可以使用 Flash :-( 来检测它，但我认为...

【讨论】：

【解决方案5】：

您可以使用 Muaz Khan webrtc 实验中的 DetectRTC： https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DetectRTC

用途：

DetectRTC.audioInputDevices
DetectRTC.audioOutputDevices
DetectRTC.videoInputDevices

获取设备。

【讨论】：