在不刷新页面的情况下停止getUserMedia的网络摄像头流 [英] stop the webcam streaming of getUserMedia without page refreshing

问题描述

我正在尝试使用javascript函数关闭网络摄像头(收到一些Ajax响应后必须将其关闭)，但是似乎不刷新页面就无法关闭.所有关闭它的方法(例如video.src = null，video.pause ... etc)在任何浏览器中都无法使用.唯一的方法是关闭成功函数中作为参数传递的流，那么有什么方法可以在成功函数之外使用此对象来关闭摄像头?

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?

我知道之前曾有人问过这个问题(停止/使用getUserMedia和RTCPeerConnection Chrome 25关闭网络摄像头)，但是我的需求有所不同，因此我需要一些帮助来解决此问题

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

谢谢！

我的工作代码正试图关闭网络摄像头:

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 ..在这里发布代码XD真的很复杂

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

推荐答案

您需要通过执行 stop()方法来停止 LocalMediaStream 对象.我有类似的问题.您需要做的是:

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

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

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

var localStream;

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

在需要的地方停止LocalMediaStream:

Stop the LocalMediaStream where needed:

localStream.stop(); 

我自己的问题(和 answer ).

这篇关于在不刷新页面的情况下停止getUserMedia的网络摄像头流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！