Stoppen / Schließen Sie die Webcam, die von navigator.getUserMedia geöffnet wird

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

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

BEARBEITEN

Seit diese Antwort ursprünglich veröffentlicht wurde, hat sich die Browser-API geändert. .stop()ist für den Stream, der an den Rückruf übergeben wird, nicht mehr verfügbar. Der Entwickler muss auf die Tracks zugreifen, aus denen der Stream besteht (Audio oder Video), und jeden einzeln stoppen.

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

Beispiel (über den obigen Link):

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

Die Browserunterstützung kann abweichen.

Ursprüngliche Antwort

navigator.getUserMediaWenn Sie im erfolgreichen Rückruf einen Stream erhalten, können Sie .stop()diesen Stream aufrufen , um die Aufzeichnung zu stoppen (zumindest in Chrome scheint FF dies nicht zu mögen).

Verwenden Sie eine der folgenden Funktionen:

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

Hinweis: Die Antwort wurde aktualisiert am: 06/09/2020

Nicht verwenden stream.stop(), es ist veraltet

MediaStream-Abschreibungen

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

FF, Chrome und Opera hat begonnen aussetzt getUserMediaüber navigator.mediaDevicesnun als Standard (ändern könnte :)

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 video
localStream.getVideoTracks()[0].stop();

Starten von Webcam Video mit verschiedenen Browsern

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

Stoppen von Webcam-Videos mit verschiedenen Browsern

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 die Webcam jedes Mal aus ...

Angenommen, wir haben Streaming in Video-Tag und ID ist Video - <video id="video"></video>dann sollten wir folgenden Code haben -

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;

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

localMediaStream.stop()

video.src=""oder nullwürde einfach die Quelle aus dem Video-Tag entfernen. Die Hardware wird nicht freigegeben.

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 das .stop()veraltet ist, denke ich nicht, dass wir es wie die @ MuazKhan-Dosis erneut hinzufügen sollten. Dies ist ein Grund, warum Dinge veraltet sind und nicht mehr verwendet werden sollten. Erstellen Sie stattdessen einfach eine Hilfsfunktion ... Hier ist eine weitere es6-Version

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

Da Sie die Tracks benötigen, um das Streaming zu schließen, und Sie das streamObjekt benötigen , um zu den Tracks zu gelangen, lautet der Code, den ich mithilfe der obigen Antwort von Muaz Khan verwendet habe, wie folgt:

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.

Sie müssen alle Titel (von Webcam, Mikrofon) anhalten:

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

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

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

Der folgende Code hat bei mir 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();
  }

Starten und Stoppen der Webkamera (Update 2020 React es6)

Starten Sie die Webkamera

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

Stoppen Sie die Wiedergabe von Webkameras oder Videos im Allgemeinen

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

Die Funktion zum Stoppen der Webkamera funktioniert auch bei Videostreams:

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

Haben Sie eine Referenz von Stream Form successHandle

var streamRef;

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

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