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.

DÜZENLE

Bu yanıt ilk olarak gönderildiğinden tarayıcı API'si değişti. .stop()artık geri aramaya aktarılan akışta kullanılamıyor. Geliştiricinin akışı oluşturan parçalara (ses veya video) erişmesi ve her birini ayrı ayrı durdurması gerekir.

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

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

Tarayıcı desteği farklı olabilir.

Orijinal cevap

navigator.getUserMediabaşarılı geri aramada bir .stop()akış sağlarsa, kaydı durdurmak için bu akışı çağırabilirsiniz (en azından Chrome'da, FF hoşuna gitmiyor gibi görünüyor)

Bu işlevlerden herhangi birini kullanın:

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

Not: Cevap şu tarihte güncellendi: 06/09/2020

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

MediaStream Kullanımdan Kaldırılma

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

FF, Krom ve Opera açığa başlamıştır getUserMediayoluyla navigator.mediaDevices(değiştirmek Olabilir şimdi standart olarak :)

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

Web Kamerası Video'sunu farklı tarayıcılarla başlatma

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

Web Kamerası Video'sunu farklı tarayıcılarla 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="";

Bu web kamerası ışığı her zaman aşağı inmek ...

Video etiketinde akışımız olduğunu ve id'nin video olduğunu varsayalım - <video id="video"></video>o zaman aşağıdaki kodu almalı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();
});
// assign null to srcObject of video
videoEl.srcObject = null;

GetUserMedia için başarı işleyicisinde döndürülen akış nesnesini kullanarak akışı doğrudan sonlandırabilirsiniz. Örneğin

localMediaStream.stop()

video.src=""veya nullkaynağı video etiketinden kaldırabilir. Donanımı serbest bırakmayacak.

Aşağıdaki yöntemi 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();

Eğer .stop()kullanımdan kaldırıldı o zaman biz @MuazKhan doz gibi yeniden ekleyin gerektiğini sanmıyorum. Bu, neden kullanımdan kaldırıldıklarının ve artık kullanılmamalarının bir nedeni. Bunun yerine bir yardımcı işlev oluşturun ... İşte daha fazla es6 sürümü

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

streamAkışı kapatmak için parçalara ihtiyacınız olduğundan ve parçalara ulaşmak için botasyona ihtiyacınız olduğundan , Muaz Khan'ın yukarıdaki cevabının yardımıyla kullandığım kod aşağıdaki gibidir:

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 parçalarını kapatacaktır. Birden fazla varsa, buna göre seçim yapmalısınız.

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

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

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

Lütfen bunu 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;
}

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

Web Kamerasını Başlat ve Durdur, (2020 React es6 Güncellemesi)

Web Kamerasını Başlat

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

Genel olarak Web Kamerası veya Video oynatmayı durdurma

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

Web Kamerasını Durdur işlevi video akışlarında bile çalışır:

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

Başarılı bir akış formu referansı var

var streamRef;

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

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