Stop / Close webcam yang dibuka oleh navigator.getUserMedia

Saya membuka webcam dengan menggunakan kode JavaScript berikut: navigator.getUserMedia

Apakah ada kode JavaScript untuk menghentikan atau menutup webcam? Terimakasih semuanya.

EDIT

Karena jawaban ini awalnya diposting, API peramban telah berubah. .stop()tidak lagi tersedia di aliran yang diteruskan ke panggilan balik. Pengembang harus mengakses trek yang membentuk aliran (audio atau video) dan menghentikan masing-masing secara individual.

Info lebih lanjut di sini: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

Contoh (dari tautan di atas):

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

Dukungan browser mungkin berbeda.

Jawaban asli

navigator.getUserMediamemberi Anda aliran dalam panggilan balik yang berhasil, Anda dapat memanggil .stop()aliran itu untuk menghentikan rekaman (setidaknya di Chrome, sepertinya FF tidak menyukainya)

Gunakan salah satu dari fungsi ini:

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

Catatan: Jawabannya diperbarui pada: 06/09/2020

Jangan gunakan stream.stop(), sudah usang

Penghentian MediaStream

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

FF, Chrome dan Opera telah mulai mengekspos getUserMediamelalui navigator.mediaDevicessebagai standar sekarang (Mungkin berubah :)

demo online

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

Memulai Video Webcam dengan berbagai browser

Untuk Opera 12

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

Untuk Firefox Nightly 18.0

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

Untuk Chrome 22

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

Menghentikan Video Webcam dengan browser yang berbeda

Untuk Opera 12

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

Untuk Firefox Nightly 18.0

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

Untuk Chrome 22

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

Dengan ini lampu Webcam mati setiap ...

Misalkan kita memiliki streaming dalam tag video dan id adalah video - <video id="video"></video>maka kita harus memiliki kode berikut -

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;

Anda dapat mengakhiri streaming secara langsung menggunakan objek stream yang dikembalikan di penangan sukses ke getUserMedia. misalnya

localMediaStream.stop()

video.src=""atau nullhanya akan menghapus sumber dari tag video. Itu tidak akan melepaskan perangkat keras.

Coba metode di bawah ini:

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

Jika .stop()sudah usang maka saya tidak berpikir kita harus menambahkannya kembali seperti dosis @MuazKhan. Ini adalah alasan mengapa hal-hal menjadi usang dan tidak boleh digunakan lagi. Sebagai gantinya, buat saja fungsi pembantu ... Ini adalah versi yang lebih es6

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

Karena Anda memerlukan trek untuk menutup streaming, dan Anda perlu streamboject untuk sampai ke trek, kode yang saya gunakan dengan bantuan jawaban Muaz Khan di atas adalah sebagai berikut:

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

Tentu saja ini akan menutup semua trek video yang aktif. Jika Anda memiliki banyak, Anda harus memilih yang sesuai.

Anda harus menghentikan semua trek (dari webcam, mikrofon):

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

Menggunakan .stop () pada streaming berfungsi di chrome saat terhubung melalui http. Tidak berfungsi saat menggunakan ssl (https).

Silakan periksa ini: https://jsfiddle.net/wazb1jks/3/

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

Hentikan rekaman

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

Kode berikut ini berfungsi untuk saya:

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

Mulai dan Hentikan Kamera Web, (Perbarui 2020 Bereaksi es6)

Mulai Kamera Web

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

Hentikan Kamera Web atau pemutaran Video secara umum

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

Fungsi Stop Web Camera berfungsi bahkan dengan streaming video:

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

Memiliki referensi bentuk keberhasilan stream

var streamRef;

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

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