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.
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)
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();
});
};
}
Não uses {[[0]}, está desactualizado
Depreciações Mediastreamconstellation Name (Optional)
Uso stream.getTracks().forEach(track => track.stop())
A iniciar o vídeo da Webcam com diferentes navegadores
Para A Ópera 12window.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 12video.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...
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.
FF, cromo e Opera começaram a expor getUserMedia
via navigator.mediaDevices
como padrão agora (pode mudar:)
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();
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()
}
}
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();
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.
Usar .stop () on the stream works on chrome when connected via http. Não funciona ao usar ssl (https).
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();
});