web-dev-qa-db-fra.com

arrêter le streaming webcam de getUserMedia sans rafraîchissement de page

J'essaie de fermer la webcam avec la fonction javascript (elle doit être fermée après avoir reçu une réponse Ajax), mais il semble impossible de fermer sans rafraîchir la page. Toutes les méthodes pour le fermer comme video.src = null, video.pause ... etc ne fonctionnent pas du tout dans un navigateur. La manière unique est de fermer le flux passé en paramètre sur les fonctions de réussite, donc existe-t-il un moyen d'utiliser cet objet en dehors de la fonction de réussite pour fermer la webcam?

Je sais que cette question a déjà été posée ( Stop/Close webcam using getUserMedia and RTCPeerConnection Chrome 25 ), mais mes besoins sont différents, donc j'aurais besoin d'aide pour résoudre ce problème

merci!

EDIT: Mon code de travail tente de fermer la 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..il est vraiment compliqué de poster ici le code XD

javascriptwebrtcgetusermedia
15
user2158954

Vous devez arrêter l'objet LocalMediaStream en exécutant sa méthode stop(). J'ai eu des problèmes similaires. Ce que vous devez faire, c'est:

Conservez une référence à LocalMediaStream dans la fonction de rappel onSuccess de l'exécution getUserMedia():

var localStream;

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

Arrêtez LocalMediaStream si nécessaire:

localStream.stop();

Plus d'informations dans ma propre question (et réponse ).

29
asgoth

Enregistrer une référence au LocalMediaStream comme le suggère asgoth est correct, mais pour moi dans Chrome 47. localStream.stop(); m'a donné une erreur:

Uncaught TypeError: localStream.stop is not a function

Je l'ai fait fonctionner en appelant:

localStream.getVideoTracks()[0].stop();
46
Jay P.

Ajout à réponse d'Asgoth

localStream.stop () est déconseillé dans Chrome 45, supprimé dans Chrome 47

Si vous appelez .stop () à partir de plusieurs endroits, vous pouvez utiliser l'aide suivante pour la fonction d'arrêt pour garder la logique à un endroit.

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;
};
9
Peter Mols

Je rencontrais des problèmes pour fermer la piste du flux vidéo (caméra orientée vers l'avant) et ouvrir une piste alternative (caméra orientée vers l'arrière) dans Chrome 49. J'ai trouvé que MediaStream.stop() a été obsolète depuis la version 45, et a été remplacé par MediaStreamTrack.stop(). Vous pouvez en lire plus à partir d'un publication sur le site de développeur de Google par Sam Dutton.

1
Steve

Cela semble être une zone de buggy dans Chrome, et le comportement change constamment. Cela semble fonctionner, uniquement si vous êtes connecté via http (pas https):

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

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

Pour une raison étrange, cela ne fonctionne pas sur SSL (https) (vérifié sur Chrome pour Linux, Ver 27 Dev)

1
ACEGL

Pour se débarrasser du symbole rouge dans l'onglet du navigateur et pour désactiver les deux, les flux vidéo et audio lors de la réception de l'une de ces erreurs

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

parcourir les pistes trouvées et les arrêter toutes.

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

remarque: _webRTCStream est égal à localStream, dépend de la bibliothèque que vous utilisez.

0
Qwerty