Ho aperto una webcam utilizzando il seguente codice JavaScript: navigator.getUserMedia
Esiste un codice JavaScript per arrestare o chiudere la webcam? Grazie a tutti.
Ho aperto una webcam utilizzando il seguente codice JavaScript: navigator.getUserMedia
Esiste un codice JavaScript per arrestare o chiudere la webcam? Grazie a tutti.
Risposte:
MODIFICARE
Da quando questa risposta è stata originariamente pubblicata, l'API del browser è cambiata.
.stop()
non è più disponibile sullo stream che viene passato al callback. Lo sviluppatore dovrà accedere alle tracce che compongono il flusso (audio o video) e fermarle singolarmente.
Maggiori informazioni qui: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=it#stop-ended-and-active
Esempio (dal link sopra):
stream.getTracks().forEach(function(track) {
track.stop();
});
Il supporto del browser potrebbe essere diverso.
Risposta originale
navigator.getUserMedia
ti fornisce uno stream nel callback di successo, puoi chiamare .stop()
quello stream per interrompere la registrazione (almeno in Chrome, sembra che a FF non piaccia)
Utilizzare una di queste funzioni:
// 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();
}
});
}
Nota: la risposta è stata aggiornata il: 06/09/2020
stream.getTracks().forEach(track => { track.stop() })
? O se lo stai facendo abbastanza spesso da giustificare una scorciatoia, puoi sempre definire una funzione di supporto come stopAllTracks(stream)
.
Non usare stream.stop()
, è deprecato
Uso stream.getTracks().forEach(track => track.stop())
FF, Chrome e Opera ha iniziato esponendo getUserMedia
via navigator.mediaDevices
come standard ora (potrebbe cambiare :)
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();
Avvio del video della webcam con diversi browser
Per Opera 12
window.navigator.getUserMedia(param, function(stream) {
video.src =window.URL.createObjectURL(stream);
}, videoError );
Per Firefox Nightly 18.0
window.navigator.mozGetUserMedia(param, function(stream) {
video.mozSrcObject = stream;
}, videoError );
Per Chrome 22
window.navigator.webkitGetUserMedia(param, function(stream) {
video.src =window.webkitURL.createObjectURL(stream);
}, videoError );
Interruzione del video della webcam con diversi browser
Per Opera 12
video.pause();
video.src=null;
Per Firefox Nightly 18.0
video.pause();
video.mozSrcObject=null;
Per Chrome 22
video.pause();
video.src="";
Con questo la luce della webcam si spegne ogni volta ...
Supponiamo di avere lo streaming nel tag video e l'id sia video - <video id="video"></video>
quindi dovremmo avere il seguente codice -
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;
È possibile terminare lo stream direttamente utilizzando l'oggetto stream restituito nel gestore dei successi per getUserMedia. per esempio
localMediaStream.stop()
video.src=""
o null
rimuoverebbe semplicemente la sorgente dal tag video. Non rilascerà l'hardware.
Prova il metodo seguente:
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();
Se .stop()
è deprecato, non penso che dovremmo aggiungerlo di nuovo come la dose di @MuazKhan. È un motivo per cui le cose diventano deprecate e non dovrebbero più essere utilizzate. Basta creare una funzione di supporto invece ... Ecco una versione più es6
function stopStream (stream) {
for (let track of stream.getTracks()) {
track.stop()
}
}
for (let track of stream.getTracks()) { track.stop() }
stream.getTracks().forEach(function (track) { track.stop() })
in ES5, questo evita lunghe trasformazioni di babele difor of
Poiché hai bisogno delle tracce per chiudere lo streaming e hai bisogno del stream
boject per raggiungere le tracce, il codice che ho usato con l'aiuto della risposta di Muaz Khan sopra è il seguente:
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();
});
Naturalmente questo chiuderà tutte le tracce video attive. Se ne hai diversi, devi selezionare di conseguenza.
Devi interrompere tutti i brani (da webcam, microfono):
localStream.getTracks().forEach(track => track.stop());
Si prega di controllare questo: https://jsfiddle.net/wazb1jks/3/
navigator.getUserMedia(mediaConstraints, function(stream) {
window.streamReference = stream;
}, onMediaError);
Ferma la registrazione
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;
}
Avvia Web Camera
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();
});
}
}
Interrompere la riproduzione della videocamera o del video in generale
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());
}
La funzione Stop Web Camera funziona anche con flussi video:
this.video.src = this.state.videoToTest;
this.video.play();
Avere un riferimento di stream da successHandle
var streamRef;
var handleVideo = function (stream) {
streamRef = stream;
}
//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
val.stop();
});
stream.stop()
funzioni per Chrome,mediaRecorder.stop()
interrompe la registrazione, mentre non interrompe lo streaming fornito dal browser. Puoi dare un'occhiata a questo stackoverflow.com/questions/34715357/…