J'ai ouvert une webcam en utilisant le code JavaScript suivant: navigator.getUserMedia
Existe-t-il un code JavaScript pour arrêter ou fermer la webcam? Merci tout le monde.
J'ai ouvert une webcam en utilisant le code JavaScript suivant: navigator.getUserMedia
Existe-t-il un code JavaScript pour arrêter ou fermer la webcam? Merci tout le monde.
Réponses:
ÉDITER
Depuis que cette réponse a été publiée à l'origine, l'API du navigateur a changé.
.stop()
n'est plus disponible sur le flux qui est transmis au rappel. Le développeur devra accéder aux pistes qui composent le flux (audio ou vidéo) et arrêter chacune d'elles individuellement.
Plus d'informations ici: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active
Exemple (à partir du lien ci-dessus):
stream.getTracks().forEach(function(track) {
track.stop();
});
La prise en charge du navigateur peut différer.
Réponse originale
navigator.getUserMedia
vous fournit un flux dans le rappel de réussite, vous pouvez appeler .stop()
ce flux pour arrêter l'enregistrement (au moins dans Chrome, semble que FF ne l'aime pas)
Utilisez l'une de ces fonctions:
// 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();
}
});
}
Remarque: La réponse a été mise à jour le: 06/09/2020
stream.getTracks().forEach(track => { track.stop() })
? Ou si vous faites cela assez souvent pour justifier un raccourci, vous pouvez toujours définir une fonction d'assistance comme stopAllTracks(stream)
.
Ne pas utiliser stream.stop()
, c'est obsolète
Utilisation stream.getTracks().forEach(track => track.stop())
FF, Chrome et Opera ont commencé à exposer getUserMedia
via navigator.mediaDevices
en standard maintenant (pourrait changer :)
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();
Démarrage de la vidéo webcam avec différents navigateurs
Pour Opera 12
window.navigator.getUserMedia(param, function(stream) {
video.src =window.URL.createObjectURL(stream);
}, videoError );
Pour Firefox Nightly 18.0
window.navigator.mozGetUserMedia(param, function(stream) {
video.mozSrcObject = stream;
}, videoError );
Pour Chrome 22
window.navigator.webkitGetUserMedia(param, function(stream) {
video.src =window.webkitURL.createObjectURL(stream);
}, videoError );
Arrêt de la vidéo webcam avec différents navigateurs
Pour Opera 12
video.pause();
video.src=null;
Pour Firefox Nightly 18.0
video.pause();
video.mozSrcObject=null;
Pour Chrome 22
video.pause();
video.src="";
Avec cela, la lumière de la webcam s'éteint à chaque fois ...
Supposons que nous ayons un streaming dans la balise vidéo et que l'identifiant soit la vidéo - <video id="video"></video>
alors nous devrions avoir le code suivant -
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;
Vous pouvez terminer le flux directement à l'aide de l'objet de flux renvoyé dans le gestionnaire de succès pour getUserMedia. par exemple
localMediaStream.stop()
video.src=""
ou null
supprimerait simplement la source de la balise vidéo. Il ne libérera pas le matériel.
Essayez la méthode ci-dessous:
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();
Si le .stop()
est obsolète, je ne pense pas que nous devrions le rajouter comme @MuazKhan dose. C'est une raison pour laquelle les choses sont obsolètes et ne devraient plus être utilisées. Créez simplement une fonction d'assistance à la place ... Voici une version plus 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() })
dans ES5, cela évite de longues transformations defor of
Puisque vous avez besoin des pistes pour fermer le streaming et que vous avez besoin du stream
boject pour accéder aux pistes, le code que j'ai utilisé avec l'aide de la réponse de Muaz Khan ci-dessus est le suivant:
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();
});
Bien sûr, cela fermera toutes les pistes vidéo actives. Si vous en avez plusieurs, vous devez sélectionner en conséquence.
Vous devez arrêter toutes les pistes (depuis la webcam, le microphone):
localStream.getTracks().forEach(track => track.stop());
Veuillez vérifier ceci: https://jsfiddle.net/wazb1jks/3/
navigator.getUserMedia(mediaConstraints, function(stream) {
window.streamReference = stream;
}, onMediaError);
Arrête d'enregistrer
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;
}
Démarrer la caméra 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();
});
}
}
Arrêter la lecture de la caméra Web ou de la vidéo en général
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 fonction Stop Web Camera fonctionne même avec les flux vidéo:
this.video.src = this.state.videoToTest;
this.video.play();
Avoir une référence de succès de formulaire de flux
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()
pour Chrome,mediaRecorder.stop()
arrête l'enregistrement, alors que cela n'arrête pas le flux fourni par le navigateur. Pouvez-vous consulter ce stackoverflow.com/questions/34715357/…