Javascript 使用 getUserMedia 后关闭网络摄像头/摄像头

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28140147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 01:16:20  来源:igfitidea点击:

Turn off webcam/camera after using getUserMedia

javascriptgoogle-chrome-extensiongetusermedia

提问by Niazipan

I'm developing a Chrome Extension that uses the background page to access the user's webcam.

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

Users are given the option to turn the camera off.

用户可以选择关闭相机。

The stream appears to be being turned off. The relevant functions are no longer receiving the stream. However the webcam light (currently being developed and tested on a mac book pro) does not turn off.

流似乎正在关闭。相关函数不再接收流。然而,网络摄像头灯(目前正在 mac book pro 上开发和测试)不会关闭。

Any ideas?

有任何想法吗?

Here's my code for setting up the stream:

这是我设置流的代码:

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

And here's my method for turning off the stream:

这是我关闭流的方法:

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

Any obvious I'm missing?

任何明显我失踪?

采纳答案by Niazipan

The code above works - as shown by @jib hereusing the above code:

上述工程的代码-如通过@jib这里使用上面的代码:

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

The problem is to do with it being a persistent background page. I'm swapping over to event pagesfor the Chrome extension as a work around.

问题在于它是一个持久的背景页面。我正在切换到Chrome 扩展程序的事件页面作为解决方法。

回答by CovertIII

localstream.stop() has been depreciated and no longer works. See this question and answer: Stop/Close webcam which is opened by navigator.getUserMedia

localstream.stop() 已折旧,不再有效。请参阅此问题和答案: 停止/关闭由 navigator.getUserMedia 打开的网络摄像头

And this link:

还有这个链接:

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

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

Essentially you change localstream.stop()to localstream.getTracks()[0].stop();

基本上你localstream.stop()改为localstream.getTracks()[0].stop();

Here's the source in the question updated:

这是更新的问题中的来源:

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