Check if webcam is already activated

Question

I have this piece of code, that activates my webcam:

var video = document.getElementById('video');

// Get access to the camera!
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
        video.srcObject = stream;
        video.play();
    });
}

When running the code above, the browser asks for permission to use the webcam. Let's assume that I allow it. The webcam is active now.

What I want now, is to write some code that checks if the webcam is active/being used. So I want to do something like this:

if(navigator.mediaDevices.getUserMedia == true) {
    alert("The camera is active");
}

I found a similar post which has a solution, but I guess I am doing something wrong, even though I tried to follow the same solution. The post is here: How to check with JavaScript that webcam is being used in Chrome

Here is what I tried:

    function isCamAlreadyActive() {

    if (navigator.getUserMedia) {
        navigator.getUserMedia({
            video: true
        }), function (stream) {
            // returns true if any tracks have active state of true
            var result = stream.getVideoTracks().some(function (track) {
                return track.enabled && track.readyState === 'live';
            });
        }

        if (result) {
            alert("Already active");
            return true;
        }
    }

    alert("Not active");
    return false;
 }

My solution always returns false, even when the webcam is active

Seems sort of over indulged to me. You are activating the device(s), why not track the state at the time of activation? — Randy Casburn, May 13 '18 at 00:15
What do you want to know exactly? If it is to know if the camera is already actively used, then there is IMK no bullet-proof way. If it is to know if the user has already approved the access to its devices and will hence not receive the prompt, then there is a bullet-proof and easy way, without asking for permissions. — Kaiido, May 13 '18 at 12:14

score 3 · Answer 1 · answered May 13 '18 at 12:39

I am not too sure as to what you are trying to detect exactly.

If you want to know if the webcam is already used by some other program or some other pages, or some other scripts on the same page, then there is in my knowledge no bullet proof solution: different devices and different OSes will have different abilities with regard to request the same device simultaneously. So yes, requesting the device and keeping the stream alive, you could do function isActive() { return true; } but...

But if I read correctly between the lines of your question, I feel that what you want to know is if you have been granted the authorization from the user, and thus if they will see the prompt or not.

In this case, you can make use of the MediaDevices.enumerateDevices method, which will _{^{(IMM unfortunately)}} not request for user permission, while it needs it to get the full informations about the user's devices.

Indeed, the label property of the MediaDeviceInfo object should remain anonymised to avoid finger-printing. So if when you do request for this information, the MediaDeviceInfo all return an empty string (""), it means that you don't have user authorization, and thus, that they will get a prompt.

function checkIsApproved(){
  return navigator.mediaDevices.enumerateDevices()
    .then(infos =>
      // if any of the MediaDeviceInfo has a label, we're good to go
      [...infos].some(info=>info.label!=="")
    );
}
check.onclick = e => {
  checkIsApproved().then(console.log);
};
req.onclick = e => {
  navigator.mediaDevices.getUserMedia({video:true}).catch(e=>console.error('you might be better using the jsfiddle'));
}

<button id="check">check</button>
<button id="req">request approval</button>

But since StackSnippets don't work well with getUserMedia, here is a jsfiddle demonstrating this.

Mahipal · Answer 2 · 2018-05-13T10:34:29.533

In the code which you have shared, there is some problem with the syntax of calling navigator.getMediaUserMedia(). navigator.getMediaUserMedia() expects 3 parameters. You can check here for more details.

You can modify your function to:

function isCamAlreadyActive() {
    if (navigator.getUserMedia) {
        navigator.getUserMedia({
            video: true
        }, function (stream) {
            // returns true if any tracks have active state of true
            var result = stream.getVideoTracks().some(function (track) {
                return track.enabled && track.readyState === 'live';
            });
            if (result) {
                alert("Already active");
            }else{
                alert("No")
            }
        },
        function(e) {
            alert("Error: " + e.name);
        });

    }
  }

PS : Since navigator.getMediaUserMedia() is deprecated, you can use navigator.mediaDevices.getUserMedia instead. You can checkout here for more details.

You can use navigator.mediaDevices.getUserMedia as :

function isCamAlreadyActive(){
navigator.mediaDevices.getUserMedia({video: true}).then(function(stream){
    result = stream.getVideoTracks().some(function (track) {
                return track.enabled && track.readyState === 'live';
            });
    if(result){
        alert("On");
    }else{
        alert("Off");
    }
}).catch(function(err) { console.log(err.name + ": " + err.message); });
}

Hope it helps.

Thx @Mahipal But your code is trying to activate the cam everytime by asking for permission to activate it. I already have a button (and code) that activates the cam. I only need to know if the cam is active. — MOR_SNOW, May 13 '18 at 07:07
As far as I know, there is no way you can check it without activating the camera. You can check out this question : https://stackoverflow.com/questions/20641213/how-can-i-check-if-user-has-a-webcam-or-not — Mahipal, May 13 '18 at 10:41

Check if webcam is already activated

2 Answers2