stop the webcam streaming of getUserMedia without page refreshing [duplicate]

问题

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?

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

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

回答1:

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

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

Stop the LocalMediaStream where needed:

localStream.stop();

More info in my own question (and answer).

回答2:

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

Uncaught TypeError: localStream.stop is not a function

I got it to work by calling:

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

回答3:

Addition to asgoth's answer

localStream.stop() is deprecated in Chrome 45, removed in 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.

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

回答4:

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

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)

回答5:

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 posting on Google's developer site by Sam Dutton.

回答6:

To get rid of the red symbol at browser's tab and for disabling both, the video and audio streams 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: _webRTCStream equals localStream, depends on a library you are using.

回答7:

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

来源：https://stackoverflow.com/questions/15925010/stop-the-webcam-streaming-of-getusermedia-without-page-refreshing

标签

javascript

webrtc

getusermedia