CODEWITHSUNDEEP
javascript
MOR_SNOW
MOR_SNOW

Reputation: 831

Check if webcam is already activated

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

Upvotes: 2

Views: 5608

Answers (2)

Kaiido
Kaiido

Reputation: 136618

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.

Upvotes: 3

Mahipal
Mahipal

Reputation: 519

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.

Upvotes: 1

Related Questions