使用getUserMedia后如何关闭网络摄像头/相机

43

我正在开发一个Chrome扩展,它使用后台页面来访问用户的网络摄像头。

用户可以选择关闭摄像头。

虽然相关函数不再接收视频流,但视频流似乎仍在运行。然而,摄像头指示灯(当前在Mac Book Pro上进行开发和测试)没有关闭。

有任何想法吗?

这是我设置视频流的代码:

if (navigator.webkitGetUserMedia!=null) {

    var options = { 
        video:true, 
        audio:false 
    };  
    navigator.webkitGetUserMedia(options, 
        function(stream) { 
        vid.src = window.webkitURL.createObjectURL(stream);
        localstream = stream;
        vid.play();
        console.log("streaming");
    }, 
        function(e) { 
        console.log("background error : " + e);
        }); 
} 

这里是关闭流的方法:

function vidOff() {
    clearInterval(theDrawLoop);
    ExtensionData.vidStatus = 'off';
    vid.pause();
    vid.src = "";
    localstream.stop();
    DB_save();
    console.log("Vid off");
}

我有遗漏的地方吗?


1
我不知道扩展或后台页面的情况,但是就我个人而言,在我的MacBook Pro上,你的代码在常规内容进程中运行良好(灯光关闭)。你有收到任何错误吗? - jib
很遗憾没有。我认为这可能是因为它是一个不可见的进程,所以它没有更新。 - Niazipan
2个回答

48

localstream.stop()已被弃用,不再起作用。请参见此问题和答案:Stop/Close webcam which is opened by navigator.getUserMedia

以及这个链接:

https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

本质上,您需要将localstream.stop()更改为localstream.getTracks()[0].stop();

以下是更新后的问题源代码:

<html>
<head>
<script>
var console = { log: function(msg) { div.innerHTML += "<p>" + msg + "</p>"; } };

var localstream;

if (navigator.mediaDevices.getUserMedia !== null) {
  var options = { 
    video:true, 
    audio:false 
  };  
  navigator.webkitGetUserMedia(options, function(stream) { 
    vid.src = window.URL.createObjectURL(stream);
    localstream = stream;
    vid.play();
    console.log("streaming");
  }, function(e) { 
    console.log("background error : " + e.name);
  }); 
}

function vidOff() {
  //clearInterval(theDrawLoop);
  //ExtensionData.vidStatus = 'off';
  vid.pause();
  vid.src = "";
  localstream.getTracks()[0].stop();
  console.log("Vid off");
}
</script>
</head>
<body>
<video id="vid" height="120" width="160" muted="muted" autoplay></video><br>
<button onclick="vidOff()">vidOff!</button><br>
<div id="div"></div>
</body>
</html>

16

上述代码有效 - 正如@jib在这里所展示的,使用了上述代码:

function vidOff() {
    vid.pause();
    vid.src = "";
    localstream.stop();
}

问题与其作为持久性后台页面有关。我正在更换为事件页作为Chrome扩展的解决方法。


4
当我使用小提琴并点击“视频关闭”时,视频确实停止了,但网络摄像头仍然打开。 - Walter Roman

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接