Ответы:
РЕДАКТИРОВАТЬ
Так как этот ответ был первоначально опубликован, API браузера изменился.
.stop()
больше не доступен в потоке, который передается обратному вызову. Разработчик должен будет получить доступ к дорожкам, которые составляют поток (аудио или видео), и остановить каждую из них в отдельности.
Более подробная информация здесь: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active
Пример (по ссылке выше):
stream.getTracks().forEach(function(track) {
track.stop();
});
Поддержка браузера может отличаться.
Оригинальный ответ
navigator.getUserMedia
предоставляет вам поток в обратном вызове успеха, вы можете вызвать .stop()
этот поток, чтобы остановить запись (по крайней мере, в Chrome, кажется, FF это не нравится)
Используйте любую из этих функций:
// 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();
}
});
}
Примечание. Ответ был обновлен 09.09.2020.
stream.getTracks().forEach(track => { track.stop() })
? Или, если вы действительно делаете это достаточно часто, чтобы оправдать сокращение, вы всегда можете определить вспомогательную функцию, например stopAllTracks(stream)
.
Не используйте stream.stop()
, это устарело
использование stream.getTracks().forEach(track => track.stop())
FF, Chrome и Opera начали выставлять getUserMedia
через navigator.mediaDevices
стандарт как сейчас (может измениться :)
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();
Запуск видео с веб-камеры в разных браузерах
Для Opera 12
window.navigator.getUserMedia(param, function(stream) {
video.src =window.URL.createObjectURL(stream);
}, videoError );
Для Firefox Nightly 18.0
window.navigator.mozGetUserMedia(param, function(stream) {
video.mozSrcObject = stream;
}, videoError );
Для Chrome 22
window.navigator.webkitGetUserMedia(param, function(stream) {
video.src =window.webkitURL.createObjectURL(stream);
}, videoError );
Остановка видео с веб-камеры в разных браузерах
Для Opera 12
video.pause();
video.src=null;
Для Firefox Nightly 18.0
video.pause();
video.mozSrcObject=null;
Для Chrome 22
video.pause();
video.src="";
С этим свет веб-камеры гаснет каждый раз ...
Предположим, у нас есть потоковая передача в теге video, а id - это video, <video id="video"></video>
тогда у нас должен быть следующий код -
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;
Вы можете завершить поток напрямую, используя объект потока, возвращенный в обработчике успеха getUserMedia. например
localMediaStream.stop()
video.src=""
или null
просто удалили бы источник из тега видео. Это не выпустит аппаратное обеспечение.
Попробуйте метод ниже:
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();
Если .stop()
это устарело, то я не думаю, что мы должны добавить его снова, как доза @MuazKhan. Это причина того, почему вещи устарели и больше не должны использоваться. Вместо этого просто создайте вспомогательную функцию ... Вот еще версия для 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() })
в ES5 это позволяет избежать длительных преобразованийfor of
Поскольку вам нужны дорожки, чтобы закрыть потоковую передачу, и вам нужен stream
проект, чтобы добраться до дорожек, код, который я использовал с помощью ответа Муаз-хана выше, выглядит следующим образом:
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();
});
Конечно, это закроет все активные видеодорожки. Если у вас их несколько, выберите соответствующий вариант.
Вам нужно остановить все треки (с веб-камеры, микрофона):
localStream.getTracks().forEach(track => track.stop());
Пожалуйста, проверьте это: https://jsfiddle.net/wazb1jks/3/
navigator.getUserMedia(mediaConstraints, function(stream) {
window.streamReference = stream;
}, onMediaError);
Остановить запись
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;
}
Запустить веб-камеру
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();
});
}
}
Остановить воспроизведение веб-камеры или видео в целом
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());
}
Функция Stop Web Camera работает даже с видеопотоками:
this.video.src = this.state.videoToTest;
this.video.play();
Есть ссылка на поток формы 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()
не работает для Chrome,mediaRecorder.stop()
останавливает запись, в то время как это не останавливает поток, предоставленный браузером. Можете ли вы посмотреть на этот stackoverflow.com/questions/34715357/…