Webcam stoppen/schließen, die von navigator.getUserMedia geöffnet wird

Sie können " stop " über MediaStream object aufrufen, das veraltet sein wird; Neuer Vorschlag ist die Veröffentlichung von Medientiteln durch Aufrufen von " stop " über jeden Medientitel:

mediaStream.stop();

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

Aktualisiert am 03. November 2015 ---- 10:34:24 Uhr

Hier ist ein Cross-Browser stream.stop-Hack:

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

Verwenden Sie nicht stream.stop(), es ist veraltet

MediaStream-Abwertungen

Verwenden Sie stream.getTracks().forEach(track => track.stop())

Webcam-Video mit verschiedenen Browsern starten

Für Opera 12

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

Für Firefox Nightly 18.0

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

Für Chrome 22

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

Webcam-Video mit verschiedenen Browsern stoppen

Für Opera 12

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

Für Firefox Nightly 18.0

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

Für Chrome 22

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

Damit geht das Webcam-Licht jedes Mal wieder runter ...

Sie können den Stream direkt mit dem Stream-Objekt beenden, das im Erfolgs-Handler an getUserMedia zurückgegeben wird. z.B. 

localMediaStream.stop()

video.src="" oder null würden nur die Quelle aus dem Videotag entfernen. Die Hardware wird nicht freigegeben.

FF, Chrome und Opera haben nun standardmäßig getUserMedia über navigator.mediaDevices angezeigt (Änderungen vorbehalten :)

Online-Demo

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

Versuchen Sie die folgende Methode 

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

Wenn .stop() veraltet ist, denke ich nicht, dass wir es wie @MuazKhan-Dosis hinzufügen sollten. Dies ist ein Grund, warum Dinge veraltet werden und nicht mehr verwendet werden sollten. Erstellen Sie stattdessen eine Hilfsfunktion ... Hier ist eine weitere es6-Version 

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

Da Sie die Tracks zum Schließen des Streamings benötigen und das stream-Projekt benötigen, um zu den Tracks zu gelangen, lautet der Code, den ich mit Hilfe der obigen Antwort des Muaz Khan verwendet habe, folgendermaßen:

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

Natürlich werden dadurch alle aktiven Videospuren geschlossen. Wenn Sie mehrere haben, sollten Sie entsprechend auswählen. 

Bitte überprüfen Sie dies: https://jsfiddle.net/wazb1jks/3/

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

Höre auf, aufzunehmen

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

Die Verwendung von .stop () für den Stream funktioniert auf Chrome, wenn eine Verbindung über http hergestellt wird. Es funktioniert nicht bei Verwendung von SSL (https).

Sie müssen alle Spuren (von der Webcam, dem Mikrofon) anhalten:

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

Angenommen, wir haben Streaming in Video-Tag und ID ist Video - <video id="video"></video>.

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

// weise dem srcObject des Videos den Wert null zu videoEl.srcObject = null;

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

ist richtig ... aber auch richtig, wenn https etwas nicht funktioniert.

Der folgende Code hat für mich funktioniert:

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