getUserMedia - 如何检测设备是否确实有摄像头

Question

我正在使用 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 调用返回 true 取决于支持 api 的浏览器，而不是设备是否确实有摄像头。

即。在我的配备 iSight 摄像头和当前版本 Chrome 的 MacBook 上，Modernizr.getUserMedia 返回 true，然后 navigator.getUserMedia(...) 提示是否允许使用摄像头。非常好

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

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

干杯

内森

Answer 1

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

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

Answer 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 ... 
    }
}

Answer 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)
  })
}

如果您的机器有任何视频设备，则在过滤

videoDevices

数组后，您将在

devices

数组中得到一些内容。

但是，除非您的程序已经调用

getUserMedia()

并获得许可，否则您无法（至少在 Google Chrome 上）知道您有多少个网络摄像头或它们的

label

值（名称）是什么。 因为网络蠕变。

Answer 4

getUserMedia API 还很新鲜，并且会有一些错误和需要改进的地方，就像这个问题。

但目前我没有找到一种方法可以让您检查计算机是否确实有摄像头。虽然你可以使用 Flash :-( 来检测它，但我认为......

Answer 5

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

用途：

DetectRTC.audioInputDevices
DetectRTC.audioOutputDevices
DetectRTC.videoInputDevices

获取设备。

Answer 6

2024年，你可以使用

navigator.mediaDevices.getUserMedia({ video: true })

(async () {
  const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
  console.log(mediaStream.active);
})();