Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

getUserMedia - how to detect if the device actually has a camera

I'm playing with the html5/javascript getUserMedia api to write a js app that will use the device's camera if available. I'm using Modernizr to detect the capability (of the browser) like this:

if (Modernizr.getusermedia) {

And within the true block:

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

This works fine. But what I've found is that the Modernizer.getUserMedia call returns true based on the browser supporting the api, and not whether the device actually has a camera or not.

IE. on my MacBook with its iSight camera and a current version of Chrome, Modernizr.getUserMedia returns true, then navigator.getUserMedia(...) prompts for permission to use the camera. Excellent

However, on another machine without a camera but with a current version of Chrome, Modernizr.getUserMedia returns true, which means that navigator.getUserMedia(...) prompts for permission to use the camera which the device doesn't have. Not so excellent!

Does anyone know if its possible to detect the existance of a camera? Ideally I don't want to prompt the user for permission to access the camera if they dont have one!

Cheers

Nathan

like image 273
Nathan Russell Avatar asked Oct 14 '12 19:10

Nathan Russell


People also ask

Is it possible to check if the user has a camera and microphone and if the permissions have been granted with Javascript?

You can type "DetectRTC.

How do I know if my webcam is on javascript?

getUserMedia({ video: true }, () => { console. log('has webcam') }, () => { console. log('no webcam') }); to call it with { video: true } and callbacks that's run if a webcam is present and if the webcam isn't present respectively.

Is getUserMedia a part of webRTC?

getUserMedia() is a part of the webRTC media capture API and is used to get access to the camera and the microphone connected to the user device (user computer, smartphone, etc.) from the browser.

Is getUserMedia deprecated?

getUserMedia() Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.


2 Answers

You can use MediaStreamTrack.getSources. This returns a list of video and audio devices connected to the PC. This does not require user permission.

You can then pass the ID to getUserMedia to get the desired media device.

like image 74
Kristjan Liiva Avatar answered Sep 21 '22 03:09

Kristjan Liiva


This helped me:

function(videoStream) {
    // 'success' callback - user has given permission to use the camera
    if (videoStream.getVideoTracks().length > 0) {
        // my code to use the camera here ... 
    }
}
like image 30
Vitaly D Avatar answered Sep 20 '22 03:09

Vitaly D