javascript 在不刷新页面的情况下停止 getUserMedia 的网络摄像头流

stop the webcam streaming of getUserMedia without page refreshing

提问by user2158954

I am trying to close the webcam with javascript function (it has to be closed after receive some Ajax response), but it seems impossible to close without refreshing the page. All the methods for close it like video.src = null, video.pause...etc don't work at all in any browser. The unique way is to close the stream passed as parameter on the success functions, so there is any way to use this object outside the function success to close the webcam?

我正在尝试使用 javascript 函数关闭网络摄像头（它必须在收到一些 Ajax 响应后关闭），但似乎无法在不刷新页面的情况下关闭。关闭它的所有方法，如 video.src = null、video.pause...等在任何浏览器中都不起作用。唯一的方法是关闭作为参数传递给成功函数的流，那么有没有办法在函数成功之外使用这个对象来关闭网络摄像头？

I know that this question has been asked before (Stop/Close webcam using getUserMedia and RTCPeerConnection Chrome 25), but my needs are different, so I would need some help to solve this problem

我知道之前已经问过这个问题（使用 getUserMedia 和 RTCPeerConnection Chrome 25 停止/关闭网络摄像头），但我的需求不同，所以我需要一些帮助来解决这个问题

thanks!

谢谢！

EDIT: My working code trying to close the webcam:

编辑：我的工作代码试图关闭网络摄像头：

navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||  navigator.webkitGetUserMedia || navigator.msGetUserMedia;
if(navigator.getUserMedia){
  var video_constraints = {
    mandatory: {
       maxHeight: 480,
       maxWidth: 640 
    },
    optional: []
  };
  var self = this;
  self.navigator.getUserMedia({
      audio: false,
      video: video_constraints
  }, self.onSuccess, onError);
}
else{
  alert('An error has occurred starting the webcam stream, please revise the instructions to fix the problem');
}

function onSuccess(stream) {
  var video = document.getElementById('webcam');

  if(navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
      video.src = window.URL.createObjectURL(stream);
  }
  else if(navigator.msGetUserMedia){
      //future implementation over internet explorer
  }
  else{
      video.src = stream;
  }
  self.localStream = stream;
  video.play();
}
function onError() {
  alert('There has been a problem retrieving the streams - did you allow access?');
}

function closeWebcamConnection(){
  this.localStream.stop();
}

uff..it's really complicated to post here the code XD

哎呀..在这里贴代码真的很复杂XD

回答by Jay P.

Saving a reference to the LocalMediaStreamlike asgoth suggests is correct, but for me in Chrome 47. localStream.stop();gave me an error:

保存对LocalMediaStreamasgoth 建议的引用是正确的，但对我来说在 Chrome 47 中。localStream.stop();给了我一个错误：

Uncaught TypeError: localStream.stop is not a function

I got it to work by calling:

我通过调用让它工作：

localStream.getVideoTracks()[0].stop();

回答by asgoth

You need to stop the LocalMediaStreamobject by executing its stop()method. I had similar problems. What you need to do is:

您需要LocalMediaStream通过执行其stop()方法来停止该对象。我有类似的问题。你需要做的是：

Keep a reference to the LocalMediaStreamin the onSuccess callback function of the getUserMedia()execution:

LocalMediaStream在getUserMedia()执行的 onSuccess 回调函数中保留对 的引用：

var localStream;

onUserMediaSuccess = function(stream) {
   // attach to a video element
   ...
   // keep a reference
   localStream = stream;
};

Stop the LocalMediaStream where needed:

在需要的地方停止 LocalMediaStream：

localStream.stop(); 

More info in my own question(and answer).

我自己的问题（和答案）中有更多信息。

回答by Peter Mols

Addition to asgoth's answer

除了asgoth 的答案

localStream.stop() is deprecated in Chrome 45, removed in Chrome 47

localStream.stop() 在 Chrome 45 中被弃用，在 Chrome 47 中被移除

If u call .stop() from multiple places, you can use the following helper for the stop function to keep the logic at one place.

如果您从多个地方调用 .stop() ，您可以使用以下 helper 来停止函数以将逻辑保持在一个地方。

var localStream;

onUserMediaSuccess = function(stream) {

  // re-add the stop function
  if(!stream.stop && stream.getTracks) {
    stream.stop = function(){         
      this.getTracks().forEach(function (track) {
         track.stop();
      });
    };
  }

  // attach to a video element
  ...
  // keep a reference
  localStream = stream;
};

回答by Steve

I was having a problem closing the video stream track (front facing camera) and opening an alternate track (rear facing camera) in Chrome 49. I found that MediaStream.stop()has been deprecated since version 45, and has been replaced with MediaStreamTrack.stop(). You can read more from a postingon Google's developer site by Sam Dutton.

我在 Chrome 49 中关闭视频流轨道（前置摄像头）和打开备用轨道（后置摄像头）时遇到问题。我发现它MediaStream.stop()自版本 45 以来已被弃用，并已替换为MediaStreamTrack.stop(). 您可以从Sam Dutton 在 Google 开发者网站上发布的帖子中了解更多信息。

回答by ACEGL

This seems to be a buggy area in Chrome, and the behavior is constantly changing. This seems to work, only if you are connected via http (not https):

这似乎是 Chrome 中的一个有问题的区域，并且行为在不断变化。这似乎有效，仅当您通过 http（而非 https）连接时：

var myStream;
function successCallback( stream ) {
    ...
    myStream = stream; // used to close the stream later
}

function closeStream(){
   myStream.stop(); 
   myStream = null;
}

For some strange reason this doesn't work on SSL (https) (Checked on Chrome for Linux, Ver 27 Dev)

出于某种奇怪的原因，这在 SSL (https) 上不起作用（在 Chrome for Linux 上检查，Ver 27 Dev）

回答by Qwerty

To get rid of the red symbol at browser's tab and for disabling both, the videoand audiostreams upon receiving one of these errors

要消除浏览器选项卡上的红色符号并在收到这些错误之一时同时禁用视频和音频流

Uncaught TypeError: localStream.stop is not a function
Uncaught TypeError: _webRTCStream.stop is not a function // TokBox, OpenTok

iterate over found tracks and stop them all.

迭代找到的轨道并停止它们。

if (_webRTCStream.stop) {
  _webRTCStream.stop() // idk what this does, left here for legacy reasons..?
} else {
  _webRTCStream.getTracks().forEach(function(track) { track.stop() })
}

note: _webRTCStreamequals localStream, depends on a library you are using.

注意：_webRTCStreamequals localStream，取决于您使用的库。

回答by Ashisha Nautiyal

if (sourcevid.mozSrcObject) {
  sourcevid.mozSrcObject.stop();
  sourcevid.src = null;
} else {
  sourcevid.src = "";
  localStream.stop();
}