web-dev-qa-db-fra.com

Stop/Close webcam ouverte par navigator.getUserMedia

J'ai ouvert une webcam en utilisant le code JavaScript suivant: navigator.getUserMedia 

Existe-t-il un code JavaScript pour arrêter ou fermer la webcam? Merci tout le monde.

javascripthtml5html5-videowebrtc
87
Shih-En Chou

MODIFIER

Depuis que cette réponse a été postée à l'origine, l'API du navigateur a changé ..stop() n'est plus disponible sur le flux transmis au rappel . Le développeur devra accéder aux pistes qui composent le flux vidéo) et arrêtez-les individuellement.

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

Exemple (à partir du lien ci-dessus):

var track = stream.getTracks()[0];  // if only one media track
// ...
track.stop();

La prise en charge du navigateur peut différer.

Réponse originale

navigator.getUserMedia vous fournit un flux dans le rappel de réussite, vous pouvez appeler .stop() sur ce flux pour arrêter l'enregistrement (au moins dans Chrome, FF ne l'aime pas)

112
andrei

Vous pouvez appeler " stop " sur MediaStream object qui va devenir obsolète; Une nouvelle proposition consiste à libérer les pistes de média en appelant " stop " par chaque piste de média:

mediaStream.stop();

// or
mediaStream.getTracks()[0].stop();
mediaStream.getTracks()[1].stop();

Mis à jour le 03 nov. 2015 ---- 10:34:24

Voici un hack stream.stop inter-navigateur:

var MediaStream = window.MediaStream;

if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') {
    MediaStream = webkitMediaStream;
}

/*global MediaStream:true */
if (typeof MediaStream !== 'undefined' && !('stop' in MediaStream.prototype)) {
    MediaStream.prototype.stop = function() {
        this.getTracks().forEach(function(track) {
            track.stop();
        });
    };
}
53
Muaz Khan

N'utilisez pas stream.stop(), c'est obsolète

Deprecations de MediaStream

Utilisez stream.getTracks().forEach(track => track.stop())

26
sol404

Démarrage de la vidéo webcam avec différents navigateurs

Pour l'opéra 12

window.navigator.getUserMedia(param, function(stream) {
                            video.src =window.URL.createObjectURL(stream);
                        }, videoError );

Pour Firefox Nightly 18.0

window.navigator.mozGetUserMedia(param, function(stream) {
                            video.mozSrcObject = stream;
                        }, videoError );

Pour chrome 22

window.navigator.webkitGetUserMedia(param, function(stream) {
                            video.src =window.webkitURL.createObjectURL(stream);
                        },  videoError );

Arrêt de la vidéo webcam avec différents navigateurs

Pour l'opéra 12

video.pause();
video.src=null;

Pour Firefox Nightly 18.0

video.pause();
video.mozSrcObject=null;

Pour chrome 22

video.pause();
video.src="";

Avec cela, la lumière de la webcam s’allume à chaque fois ...

9
Alain Saurat

Vous pouvez terminer le flux directement à l'aide de l'objet de flux renvoyé dans le gestionnaire de réussite à getUserMedia. par exemple. 

localMediaStream.stop()

video.src="" ou null supprimerait simplement la source de la balise video. Il ne libère pas le matériel.

7
Bhavin

FF, Chrome et Opera ont commencé à exposer getUserMedia via navigator.mediaDevices en standard (peut changer :)

démo en ligne 

navigator.mediaDevices.getUserMedia({audio:true,video:true})
    .then(stream => {
        window.localStream = stream;
    })
    .catch( (err) =>{
        console.log(err);
    });
// later you can do below
// stop both video and audio
localStream.getTracks().forEach( (track) => {
track.stop();
});
// stop only audio
localStream.getAudioTracks()[0].stop();
//stop only audio 
localStream.getVideoTracks()[0].stop();
6
Sasi Varunan

Essayez la méthode ci-dessous 

var mediaStream = null;
    navigator.getUserMedia(
        {
            audio: true,
            video: true
        },
        function (stream) {
            mediaStream = stream;
            mediaStream.stop = function () {
                this.getAudioTracks().forEach(function (track) {
                    track.stop();
                });
                this.getVideoTracks().forEach(function (track) { //in case... :)
                    track.stop();
                });
            };
            /*
             * Rest of your code.....
             * */
        });

    /*
    * somewhere insdie your code you call
    * */
    mediaStream.stop();
5
imal hasaranga perera

Si la .stop() est obsolète, alors je ne pense pas que nous devrions l'ajouter de nouveau comme @MuazKhan dose. C'est une raison pour laquelle les choses deviennent obsolètes et ne devraient plus être utilisées. Créez simplement une fonction d'assistance à la place ... Voici une version plus es6 

function stopStream (stream) {
    for (let track of stream.getTracks()) { 
        track.stop()
    }
}
4
Endless

Etant donné que vous avez besoin des pistes pour fermer le streaming et que vous avez besoin de la variable stream pour accéder aux pistes, le code que j'ai utilisé à l'aide de la réponse de Muaz Khan ci-dessus est le suivant:

if (navigator.getUserMedia) {
    navigator.getUserMedia(constraints, function (stream) {
        videoEl.src = stream;
        videoEl.play();
        document.getElementById('close').addEventListener('click', function () {
            stopStream(stream);
        });
    }, errBack);

function stopStream(stream) {
console.log('stop called');
stream.getVideoTracks().forEach(function (track) {
    track.stop();
});

Bien sûr, toutes les pistes vidéo actives seront fermées. Si vous en avez plusieurs, vous devez sélectionner en conséquence. 

3
mcy

Veuillez vérifier ceci: https://jsfiddle.net/wazb1jks/3/

navigator.getUserMedia(mediaConstraints, function(stream) {
    window.streamReference = stream;
}, onMediaError);

Arrête d'enregistrer

function stopStream() {
    if (!window.streamReference) return;

    window.streamReference.getAudioTracks().forEach(function(track) {
        track.stop();
    });

    window.streamReference.getVideoTracks().forEach(function(track) {
        track.stop();
    });

    window.streamReference = null;
}
0
Akshay Italiya

L'utilisation de .stop () sur le flux fonctionne sur chrome lorsqu'il est connecté via http. Cela ne fonctionne pas avec ssl (https).

0
ACEGL

Vous devez arrêter toutes les pistes (depuis la webcam, le microphone):

localStream.getTracks().forEach(track => track.stop());
0
TopReseller

Supposons que nous ayons une diffusion en continu dans une balise video et que id soit video - <video id="video"></video>, nous devrions alors avoir le code suivant

var videoEl = document.getElementById('video');
// now get the Steam 
stream = videoEl.srcObject;
// now get all tracks
tracks = stream.getTracks();
// now close each track by having forEach loop
tracks.forEach(function(track) {
   // stopping every track
   track.stop();
});

// Assigne null à srcObject of video videoEl.srcObject = null;

0
Veshraj Joshi
localStream.getTracks().forEach(track => track.stop());

a raison ... mais aussi lorsque l’utilisation https est quelque chose qui ne fonctionne pas.

0
theman whosoldtheworld

Le code suivant a fonctionné pour moi:

public vidOff() {

      let stream = this.video.nativeElement.srcObject;
      let tracks = stream.getTracks();

      tracks.forEach(function (track) {
          track.stop();
      });

      this.video.nativeElement.srcObject = null;
      this.video.nativeElement.stop();
  }
0
TechDo