Check if user has webcam or not using JavaScript only?

You don't necessarily need to get the permission to know if the user has a webcam, you can check it with 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'));
})

You can check if the user has a webcam using this plugin: http://www.xarg.org/project/jquery-webcam-plugin/

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

Taken from here: How can I check if user has a webcam or not?

Edit: I see you updated your question to say that you don't want to use a plugin. In this case, you could try using the 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();
}

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


You can use a new HTML5 API to check if they give you permission to use the webcam. After all, if they deny permission, they might as well not have a webcam, from the code's perspective.

See navigator.getUserMedia().

EDIT:

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

Tags:

Javascript