Check If User Has Webcam Or Not Using Javascript Only?

Is it possible to figure out whether a user has a webcam or not using only JavaScript? I don't want to use any plugin for this.

Solution 1:

You don't necessarily need to get the permission to know if the user has a webcam, you can check it with enumerateDevices:

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

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

Solution 2:

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

Solution 3:

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:

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

functionerror(){
  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

Solution 4:

There is NO way you can read current browser settings. the only thing we can do is try to access the webcam/microphone and see if we are able to access that device like...

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

BUT **** One important thing to note here, if you follow this approach then be aware that ....

Also please note that, you have to use HTTPS to use webcam/microphone and it will prompt you the browser specific permission popup with allow and block buttons ONLY ONCE, you will NOT see this permission popup again as HTTPS save the permission.

The only way to get this permission popup again is to:

1. Clear your cache and
2. Reset the browser settings
3. Open a new instance of the browser.

FYI ... You cannot manipulate browser specific setting using JavaScript So don't event go that way, unless you have time to kill

Solution 5:

Navigator.getUserMedia() is being depreciated as of 2019. To access webcam, use MediaDevices.getUserMedia() instead.

Note that navigator.mediaDevices will return undefined if the current document isn't loaded securely. URLs served from localhost are usually OK.

Sample code to test for and access webcam:

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 streamlet videoIn = document.createElement("video");
            videoIn.autoplay = true;
            document.body.appendChild(videoIn);
            videoIn.srcObject = stream;
        })
        .catch(function(err) {
            console.log("Unable to capture WebCam.", err);
        });
}