检查网络摄像头是否已激活

时间:2018-05-12 23:35:53

标签: javascript

我有这段代码,可以激活我的网络摄像头:

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

运行上述代码时,浏览器会要求获得使用网络摄像头的权限。让我们假设我允许它。网络摄像头现在处于活动状态。

我现在想要的是编写一些代码来检查网络摄像头是否处于活动/正在使用状态。所以我想做这样的事情:

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

我发现了一个类似的帖子,它有一个解决方案,但我想我做错了,尽管我试图遵循相同的解决方案。帖子在这里:How to check with JavaScript that webcam is being used in Chrome

以下是我的尝试:

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

即使网络摄像头处于活动状态,我的解决方案也始终返回false

1 个答案:

答案 0 :(得分:3)

我不太确定你要检测的是什么。

如果您想知道网络摄像头是否已被某些其他程序或其他某些页面或同一页面上的其他某些脚本使用过,那么据我所知,没有防弹解决方案:不同的设备和不同的操作系统会有关于同时请求同一设备的不同能力。所以,是的,请求设备并保持流存活,你可以做function isActive() { return true; }但是......

但如果我在你的问题的各行之间正确阅读,我觉得你想知道的是你是否已经获得了用户的授权,因此他们是否会看到提示。

在这种情况下,您可以使用MediaDevices.enumerateDevices方法, (不幸的是IMM) 不要求用户权限,而需要它获取有关用户设备的完整信息。

实际上, MediaDeviceInfo 对象的label属性应保持匿名以避免指纹打印。因此,如果当您请求此信息时, MediaDeviceInfo 都返回一个空字符串(""),这意味着您没有用户授权,因此,他们会得到一个提示。



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>
&#13;
&#13;
&#13;

但是,由于StackSnippets不能与 getUserMedia 合作,here is a jsfiddle证明了这一点。