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

Question

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

Which callback gets called (with which arguments) when you allow it on the device without a camera? — Bergi, Oct 14 '12 at 19:56
The success callback is called, but I've not checked whether the arg (videoStream in my code above) is null or not. That's a good point, I should check that. Will do so shortly and let you know ... — Nathan Russell, Oct 14 '12 at 20:09

score 6 · Answer 1 · answered Feb 03 '14 at 12:05

6

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.

answered Feb 03 '14 at 12:05

Kristjan Liiva

7,130
2
23
26

MediaStreamTrack.getSources has been removed and is no longer supported. – Vincent Apr 13 '21 at 17:54

score 3 · Answer 2 · answered Mar 05 '14 at 08:21

3

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

answered Mar 05 '14 at 08:21

Vitaly D

31
2

score 1 · Answer 3 · answered Sep 29 '20 at 18:25

The navigator.mediaDevices apis have stabiliized in the last half-decade or so.

You can now do this from your browser javascript.

{
  navigator.mediaDevices.enumerateDevices()
  .then ( function (devices) {
      console.log(devices)
      const videoDevices = devices.filter(device => device.kind === 'videoinput')
      console.log(videoDevices)
  })
}

If your machine has any video devices, you'll get something back in the videoDevices array after filtering the devices array.

But, unless your program has already called getUserMedia() and obtained permission, you can't (at least on Google Chrome) tell how many webcams you have or what their label values (names) are. Because cybercreeps.

score 0 · Answer 4 · answered Nov 15 '12 at 18:22

The getUserMedia API is still quite fresh out of the press and will have some bugs and things to be improved, like this problem.

But at the moment I don't see a way for you to check if the computer actually has a camera. Though you could use Flash :-( to detect it I think...

score 0 · Answer 5 · answered Feb 22 '16 at 14:45

0

You can use DetectRTC from Muaz Khan webrtc experiments: https://github.com/muaz-khan/WebRTC-Experiment/tree/master/DetectRTC

Use:

DetectRTC.audioInputDevices
DetectRTC.audioOutputDevices
DetectRTC.videoInputDevices

to get de devices.

answered Feb 22 '16 at 14:45

Victor Canezin de Oliveira

123
1
9

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

5 Answers5