example - javascript camera

Detener/Cerrar cámara web que está abierto por navigator.getUserMedia

Question

Abrí una cámara web utilizando el siguiente código JavaScript: navigator.getUserMedia

¿Hay algún código JavaScript para detener o cerrar la cámara web? Gracias a todos.

Answer 1

Como necesita las pistas para cerrar la transmisión y necesita el boject de transmisión para llegar a las pistas, el código que he usado con la ayuda de la respuesta anterior de Muaz Khan es el siguiente:

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

Por supuesto, esto cerrará todas las pistas de video activas. Si tiene múltiples, debe seleccionar en consecuencia.

Answer 2

FF, Chrome y Opera han comenzado a exponer getUserMedia través de navigator.mediaDevices como estándar ahora (podría cambiar :)

demostración en línea

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

Answer 3

Iniciar el video de la webcam con diferentes navegadores

Para Opera 12

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

Para Firefox Nightly 18.0

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

Para Chrome 22

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

Detener el video de la webcam con diferentes navegadores

Para Opera 12

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

Para Firefox Nightly 18.0

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

Para Chrome 22

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

Con esto, la luz de la webcam se apaga cada vez ...

Answer 4

No use stream.stop() , está en desuso

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

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

Answer 5

Pruebe el método de abajo

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

Answer 6

Puede finalizar la transmisión directamente utilizando el objeto de flujo devuelto en el controlador de éxito para obtenerUserMedia. p.ej

localMediaStream.stop()

video.src="" o null simplemente eliminaría la fuente de la etiqueta de video. No lanzará el hardware.

Answer 7

Puede llamar a " detener " sobre el objeto MediaStream que va a quedar obsoleto ; La nueva propuesta es lanzar pistas de medios llamando a " detener " sobre cada pista de medios:

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

Actualizado en Nov 03, 2015 ---- 10:34:24 AM

Aquí hay una stream.stop cross-browser. stream.stop :

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

Answer 8

Si el .stop() está en desuso, no creo que debamos volver a agregarlo como la dosis de @MuazKhan. Es una razón de por qué las cosas se quedan obsoletas y ya no se deben usar. Simplemente crea una función de ayuda en su lugar ... Aquí hay una versión más es6

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

Answer 9

Tener una referencia de secuencia de forma correctaHandle

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

Answer 10

Usar .stop () en la transmisión funciona en chrome cuando se conecta a través de http. No funciona cuando se usa ssl (https).

Answer 11

EDITAR

Dado que esta respuesta se publicó originalmente, la API del navegador ha cambiado. .stop() ya no está disponible en la transmisión que pasa a la devolución de llamada. El desarrollador tendrá que acceder a las pistas que componen la transmisión (audio o video) y detener cada una de ellas individualmente.

Más información aquí: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

Ejemplo (del enlace de arriba):

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

El soporte del navegador puede diferir.

Respuesta original

navigator.getUserMedia proporciona una secuencia en la devolución de llamada exitosa, puede llamar .stop() en esa secuencia para detener la grabación (al menos en Chrome, parece que a FF no le gusta)