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

Question

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

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，即使网络摄像头处于事件状态也是如此

Answer 1

我不太确定您要准确检测什么。

如果您想知道网络摄像头是否已被其他程序或其他页面或同一页面上的其他脚本使用，那么据我所知没有万无一失的解决方案:不同的设备和不同的操作系统会有关于同时请求同一设备的不同能力。所以是的，请求设备并保持流事件，您可以执行 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>

但由于 StackSnippets 不能很好地与 getUserMedia 配合使用，here is a jsfiddle证明这一点。