Parar/fechar a webcam que é aberta pelo navegador.getUserMedia

abri uma webcam usando o seguinte código JavaScript: navigator.getUserMedia

Existe algum código de JavaScript para parar ou fechar a webcam? Obrigado a todos.

Author: GusP, 2012-07-25

11 answers

Editar

Desde que esta resposta foi originalmente postada, a API do navegador mudou. .stop() já não está disponível no fluxo que passa para o callback. O desenvolvedor terá que acessar as faixas que compõem o fluxo (áudio ou vídeo) e parar cada um deles individualmente.

Mais informações aqui: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

Exemplo (a partir da ligação acima):

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

O Suporte do navegador pode ser diferente.

Resposta Original

navigator.getUserMedia fornece - lhe um fluxo no retorno de sucesso, você pode chamar .stop() Naquele fluxo para parar a gravação (pelo menos no Chrome, parece que o FF não gosta disso)

 97
Author: andrei, 2016-01-11 20:10:31

Você pode chamar de "parar" sobre MediaStream object que vai ser obsoleto; nova proposta é a mídia de versão faixas chamando "parar" sobre cada faixa:

mediaStream.stop();

// or
mediaStream.getAudioTracks()[0].stop();
mediaStream.getVideoTracks()[0].stop();

Actualizado em Nov. 03, 2015 ---- 10:34:24 AM

Aqui está um 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.getAudioTracks().forEach(function(track) {
            track.stop();
        });

        this.getVideoTracks().forEach(function(track) {
            track.stop();
        });
    };
}
 47
Author: Muaz Khan, 2015-11-03 05:35:02

Não uses {[[0]}, está desactualizado

Depreciações Mediastreamconstellation Name (Optional)

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

 14
Author: sol-ibit, 2017-11-17 19:00:14

A iniciar o vídeo da Webcam com diferentes navegadores

Para A Ópera 12
window.navigator.getUserMedia(param, function(stream) {
                            video.src =window.URL.createObjectURL(stream);
                        }, videoError );

Para Firefox Todas As Noites 18, 0

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

Para O Cromado 22

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

Parar o vídeo da Webcam com diferentes navegadores

Para A Ópera 12
video.pause();
video.src=null;

Para Firefox Todas As Noites 18, 0

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

Para O Cromado 22

video.pause();
video.src="";
Com isto, a luz da Webcam desaparece sempre...
 9
Author: Alain Saurat, 2012-10-08 18:20:48

Você pode terminar o fluxo diretamente usando o objeto stream retornado no manipulador de sucesso para getUserMedia. por exemplo

localMediaStream.stop()

video.src="" ou null apenas removeria a fonte da etiqueta de vídeo. Não vai libertar o hardware.

 7
Author: Bhavin, 2014-11-09 09:19:16

FF, cromo e Opera começaram a expor getUserMedia via navigator.mediaDevices como padrão agora (pode mudar:)

Demonstração 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 audio 
localStream.getVideoTracks()[0].stop();
 5
Author: Sasi Varunan, 2017-02-21 12:15:28

Se o {[1] } está desactualizado, então acho que não devemos adicioná-lo como a dose de @MuazKhan. É uma razão para as coisas ficarem desacreditadas e não deverem ser usadas mais. Em vez disso, crie uma função auxiliar... Aqui está uma versão mais es6

function stopStream (stream) {
    for (let track of stream.getTracks()) { 
        track.stop()
    }
}
 4
Author: Endless, 2016-09-01 09:18:27

Tenta o método de bellow

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();
 4
Author: imal hasaranga perera, 2017-02-21 07:16:12

Uma vez que você precisa das faixas para fechar o streaming, e você precisa do stream boject para chegar às faixas, o código que eu usei com a ajuda da resposta do Muaz Khan acima é o seguinte:

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();
});
É claro que isto vai fechar todas as faixas de vídeo activas. Se você tem vários, Você deve selecionar de acordo.
 3
Author: mcy, 2016-03-16 12:53:29

Usar .stop () on the stream works on chrome when connected via http. Não funciona ao usar ssl (https).

 0
Author: ACEGL, 2013-04-10 11:01:20

Tem uma referência do 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();
});
 -1
Author: BigBrother, 2016-07-09 12:27:12