Arrêter / fermer la webcam qui est 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.

ÉDITER

Depuis que cette réponse a été publiée à l'origine, l'API du navigateur a changé. .stop()n'est plus disponible sur le flux qui est transmis au rappel. Le développeur devra accéder aux pistes qui composent le flux (audio ou vidéo) et arrêter chacune d'elles 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):

stream.getTracks().forEach(function(track) {
  track.stop();
});

La prise en charge du navigateur peut différer.

Réponse originale

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

Utilisez l'une de ces fonctions:

// stop both mic and camera
function stopBothVideoAndAudio(stream) {
    stream.getTracks().forEach(function(track) {
        if (track.readyState == 'live') {
            track.stop();
        }
    });
}

// stop only camera
function stopVideoOnly(stream) {
    stream.getTracks().forEach(function(track) {
        if (track.readyState == 'live' && track.kind === 'video') {
            track.stop();
        }
    });
}

// stop only mic
function stopAudioOnly(stream) {
    stream.getTracks().forEach(function(track) {
        if (track.readyState == 'live' && track.kind === 'audio') {
            track.stop();
        }
    });
}

Remarque: La réponse a été mise à jour le: 06/09/2020

Ne pas utiliser stream.stop(), c'est obsolète

Obsolescence de MediaStream

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

FF, Chrome et Opera ont commencé à exposer getUserMediavia navigator.mediaDevicesen standard maintenant (pourrait 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 video
localStream.getVideoTracks()[0].stop();

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

Pour Opera 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 Opera 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'éteint à chaque fois ...

Supposons que nous ayons un streaming dans la balise vidéo et que l'identifiant soit la vidéo - <video id="video"></video>alors nous devrions 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();
});
// assign null to srcObject of video
videoEl.srcObject = null;

Vous pouvez terminer le flux directement à l'aide de l'objet de flux renvoyé dans le gestionnaire de succès pour getUserMedia. par exemple

localMediaStream.stop()

video.src=""ou nullsupprimerait simplement la source de la balise vidéo. Il ne libérera pas le matériel.

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();

Si le .stop()est obsolète, je ne pense pas que nous devrions le rajouter comme @MuazKhan dose. C'est une raison pour laquelle les choses sont 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()
    }
}

Puisque vous avez besoin des pistes pour fermer le streaming et que vous avez besoin du streamboject pour accéder aux pistes, le code que j'ai utilisé avec 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, cela fermera toutes les pistes vidéo actives. Si vous en avez plusieurs, vous devez sélectionner en conséquence.

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

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

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

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

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

Démarrer et arrêter la webcam, (mise à jour 2020 React es6)

Démarrer la caméra Web

stopWebCamera =()=>

       //Start Web Came
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        //use WebCam
        navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
          this.localStream = stream;
          this.video.srcObject = stream;
          this.video.play();
        });
      }
 }

Arrêter la lecture de la caméra Web ou de la vidéo en général

stopVideo =()=>
{
        this.video.pause();
        this.video.src = "";
        this.video.srcObject = null;

         // As per new API stop all streams
        if (this.localStream)
          this.localStream.getTracks().forEach(track => track.stop());
}

La fonction Stop Web Camera fonctionne même avec les flux vidéo:

  this.video.src = this.state.videoToTest;
  this.video.play();

Avoir une référence de succès de formulaire de flux

var streamRef;

var handleVideo = function (stream) {
    streamRef = stream;
}

//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
    val.stop();
});