web-gelistirme-sc.com

Navigator.getUserMedia tarafından açılan web kamerasını durdur/kapat

Aşağıdaki JavaScript kodunu kullanarak bir web kamerası açtım: navigator.getUserMedia 

Web kamerasını durdurmak veya kapatmak için herhangi bir JavaScript kodu var mı? Herkese teşekkürler.

87
Shih-En Chou

DÜZENLE

Bu cevap başlangıçta gönderildiğinden beri, tarayıcı API değişmiştir ..stop() artık geri çağırma kanalına aktarılan akışta kullanılamaz. video) ve her birini ayrı ayrı durdurun.

Daha fazla bilgi burada: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=tr#stop-ended-and-active

Örnek (yukarıdaki bağlantıdan):

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

Tarayıcı desteği farklı olabilir.

Orijinal cevap

navigator.getUserMedia size başarı geri çağrısında bir akış sağlar, kaydı durdurmak için .stop() öğesini çağırabilirsiniz (en azından Chrome'da, FF hoşlanmıyor gibi görünüyor)

112
andrei

Eski olacak " stop " üzerinden MediaStream object diyebilirsiniz; Yeni teklif, her bir medya parçası üzerinde " stop " diyerek medya parçalarını yayınlamaktır:

mediaStream.stop();

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

03 Kas 2015 tarihinde güncellendi ---- 10:34:24

İşte bir çapraz tarayıcı 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

stream.stop() kullanmayın, kullanımdan kaldırıldı

MediaStream Deprecations

stream.getTracks().forEach(track => track.stop()) kullanın

26
sol404

Farklı video tarayıcılarla Webcam Video başlatılması

Opera 12 için

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

Firefox Nightly 18.0 için

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

Chrome 22 için

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

Farklı video tarayıcılarla Webcam Videoyu Durdurma

Opera 12 için

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

Firefox Nightly 18.0 için

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

Chrome 22 için

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

Bununla, Webcam ışığı her zaman söner ...

9
Alain Saurat

GetUserMedia işlevine ulaşmak için başarı işleyicisinde döndürülen stream nesnesini kullanarak akışı doğrudan sona erdirebilirsiniz. Örneğin. 

localMediaStream.stop()

video.src="" veya null, kaynağı video etiketinden kaldırır. Donanımı serbest bırakmayacak.

7
Bhavin

FF, Chrome ve Opera şimdi standart olarak navigator.mediaDevices aracılığıyla getUserMedia öğesini göstermeye başladı

çevrimiçi 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

Feryat yöntemini deneyin 

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

.stop() öğesi kullanımdan kaldırılırsa, @MuazKhan dose gibi tekrar eklememiz gerektiğini düşünmüyorum. Neden işlerin kullanımdan kaldırılmasının ve artık kullanılmaması gerektiğinin bir nedeni. Sadece bunun yerine bir yardımcı işlev oluşturun ... İşte daha es6 sürümü 

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

Akışı kapatmak için izlere ihtiyacınız olduğundan ve izlere ulaşmak için stream nesnesine ihtiyacınız olduğundan, yukarıda Muaz Khan'ın cevabı yardımıyla kullandığım kod şöyledir:

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

Elbette bu tüm aktif video izlerini kapatacak. Birden fazla varsa, buna göre seçmelisiniz. 

3
mcy

Lütfen şunu kontrol edin: https://jsfiddle.net/wazb1jks/3/

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

Kaydetmeyi bırak

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

Akışta .stop () işlevinin kullanılması, http üzerinden bağlandığında krom üzerinde çalışır. Ssl (https) kullanılırken çalışmaz.

0
ACEGL

Tüm parçaları durdurmanız gerekiyor (web kamerası, mikrofondan):

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

Video etiketinde akışımız olduğunu ve kimliğimizin video olduğunu - varsayalım - <video id="video"></video>, sonra aşağıdaki kodu kullanmalıyız -

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

// srcObject of video .__ 'ya null atayın. videoEl.srcObject = null;

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

doğru ... aynı zamanda https kullanımında işe yaramazsa bir şey de geçerlidir.

Aşağıdaki kod benim için çalıştı:

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