web-dev-qa-db-de.com

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

Ich habe eine Webcam mit folgendem JavaScript-Code geöffnet: navigator.getUserMedia 

Gibt es einen JavaScript-Code zum Stoppen oder Schließen der Webcam? Vielen Dank an alle.

87
Shih-En Chou

EDIT

Da diese Antwort ursprünglich gepostet wurde, hat sich die Browser-API geändert.stop() ist nicht mehr in dem Stream verfügbar, der an den Callback übergeben wird. Der Entwickler muss auf die Spuren zugreifen, aus denen sich die streamen (Audio oder Video) und stoppen sie einzeln.

Weitere Informationen finden Sie hier: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=de#stop-ended-and-active

Beispiel (aus dem Link oben):

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

Die Browser-Unterstützung kann abweichen.

Originalantwort

navigator.getUserMedia versorgt Sie mit einem Stream im Erfolgs-Callback. Sie können .stop() in diesem Stream aufrufen, um die Aufzeichnung zu beenden (zumindest in Chrome scheint es FF nicht zu gefallen).

112
andrei

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

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

MediaStream-Abwertungen

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

26
sol404

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 ...

9
Alain Saurat

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.

7
Bhavin

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();
6
Sasi Varunan

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()
    }
}
4
Endless

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. 

3
mcy

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;
}
0
Akshay Italiya

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

0
ACEGL

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

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

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;

0
Veshraj Joshi
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();
  }
0
TechDo