Question

是否可以使用JavaScript来确定用户是否拥有网络摄像头？我不想为此使用任何插件。

Answer 1

您可以使用新的HTML5 API检查他们是否授予您使用网络摄像头的权限。毕竟，如果他们拒绝允许，从代码的角度来看，他们也可能没有网络摄像头。

请参阅navigator.getUserMedia()。

编辑：

navigator.getMedia = ( navigator.getUserMedia || // use the proper vendor prefix
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

navigator.getMedia({video: true}, function() {
  // webcam is available
}, function() {
  // webcam is not available
});

Answer 2

您不一定需要获得许可才能知道用户是否拥有网络摄像头，可以使用enumerateDevices进行检查：

function detectWebcam(callback) {
  let md = navigator.mediaDevices;
  if (!md || !md.enumerateDevices) return callback(false);
  md.enumerateDevices().then(devices => {
    callback(devices.some(device => 'videoinput' === device.kind));
  })
}

detectWebcam(function(hasWebcam) {
  console.log('Webcam: ' + (hasWebcam ? 'yes' : 'no'));
})

Answer 3

您可以使用此插件检查用户是否有网络摄像头：http://www.xarg.org/project/jquery-webcam-plugin/

if(webcam.getCameraList().length == 0){  
   alert('You don\'t have a web camera');  
}

从这里采取：How can I check if user has a webcam or not?

修改：我看到你更新了你的问题，说你不想使用插件。在这种情况下，您可以尝试使用getUserMedia API：

function success(stream){
  // The success function receives an argument which points to the webcam stream
  document.getElementById('myVideo').src = stream; 
}

function error(){
  alert("No webcam for you, matey!");
}

if (navigator.getUserMedia) { 
   navigator.getUserMedia({video:true, audio:false}, success, error);
} else { 
   error();
}

来源：http://www.iandevlin.com/blog/2012/06/html5/filtering-a-webcam-using-getusermedia-and-html5-canvas

Answer 4

您无法阅读当前的浏览器设置。我们唯一能做的就是尝试访问网络摄像头/麦克风，看看我们是否能够访问该设备......

>>> lst[:20]
['#AASTGrandRounds', '#abcDrBchat', '#addictionchat', '#advocacychat', '#AetnaMyHealthy', '#AlzChat', '#AnatQ', '#anzOTalk', '#AskAvaility', '#ASPChat', '#ATtalk', '#autchat', '#AXSChat', '#ayacsm', '#bcceu', '#bccww', '#BCSM', '#benurse', '#BeTheDifference', '#bioethx']

但是****这里需要注意的一件重要事情，如果你遵循这种方法，那就要注意......

另请注意，您必须使用HTTPS才能使用网络摄像头/麦克风，并且只会在允许和阻止按钮的情况下提示您浏览器特定权限弹出窗口，您将不看到此权限弹出窗口再次作为HTTPS保存权限。

再次获取此权限的唯一方法是：

清除缓存
重置浏览器设置
打开浏览器的新实例。

仅供参考...您无法使用JavaScript操纵浏览器特定设置所以，除非你有时间杀死事件，否则不要这样做。

Answer 5

在这里，受其他答案的启发，作为我正在执行的实现的一部分，我正在使用以下函数返回对活动流的布尔检查。

该项目有些陈旧，因此使用jQuery和ES5，尽管希望这对某人有用：

function() {
  var deferred = $.Deferred();

  navigator.mediaDevices.getUserMedia(VIDEO_CONSTRAINTS)
    .then(function(stream) { deferred.resolve(stream.active); })
    .catch(function() { deferred.resolve(false) })

  return deferred.promise()
}

然后可以按以下方式使用它：

checkStreamActive()
  .then(function(activeStream) {
    if(activeStream) {
      // do something
    } else {
    // do something else
  }
})

Answer 6

Navigator.getUserMedia()从2019年起开始贬值。要访问网络摄像头，请改用MediaDevices.getUserMedia()。

请注意，如果当前文档未安全加载，navigator.mediaDevices将返回undefined。通过localhost提供的URL通常是可以的。

用于测试和访问网络摄像头的示例代码：

const constraints = {
    audio: false,
    video: { width: 1280, height: 720 },
};
if (!navigator.mediaDevices) {
    console.log("Document not secure. Unable to capture WebCam.");
} else {
    navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function(stream) {
            //show webcam stream
            let videoIn = document.createElement("video");
            videoIn.autoplay = true;
            document.body.appendChild(videoIn);
            videoIn.srcObject = stream;
        })
        .catch(function(err) {
            console.log("Unable to capture WebCam.", err);
        });
}

Answer 7

async function detectWebcam() {
    try {

        var md = navigator.mediaDevices;
        var results = false;

        if (!md || !md.enumerateDevices) results = false;

        const devices = await md.enumerateDevices();
        results = devices.some(device => 'videoinput' === device.kind);

        return results;

    } catch (error) { return false; }
}

检查用户是否使用过网络摄像头？

7 个答案: