Остановка / закрытие веб-камеры, которая открывается navigator.getUserMedia

139

Я открыл веб-камеру, используя следующий код JavaScript: navigator.getUserMedia

Есть ли код JavaScript, чтобы остановить или закрыть веб-камеру? Спасибо всем.

Ши-Эн Чоу
источник

Ответы:

199

РЕДАКТИРОВАТЬ

Так как этот ответ был первоначально опубликован, 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 это не нравится)

андрей
источник
2
Я думаю, что stream.stop()не работает для Chrome, mediaRecorder.stop()останавливает запись, в то время как это не останавливает поток, предоставленный браузером. Можете ли вы посмотреть на этот stackoverflow.com/questions/34715357/…
Muthu
@Muntu, я думаю, это зависит от меня, работает stream.stop () (в chrome). Потому что у меня есть поток webRTC. Так что если у вас запись в браузере, то mediaRecorder.stop () будет работать?
Йохан Хоксма
да, но это поднимает другую проблему. Эта функция для остановки записи должна появиться после нескольких секунд / минут записи. Как вы можете контролировать это: чтобы остановить его после времени записи по умолчанию? Спасибо!
Эмануэла Кольта
1
Это останавливает потоки, но индикатор видео на Chrome все еще остается активным до перезагрузки. Есть ли способ удалить это тоже?
Киберсупернова
@Cybersupernova Вы нашли решение для этого? Я думаю, что обновление страницы может работать
samayo
60

Используйте любую из этих функций:

// 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.

Муаз Хан
источник
2
Спасибо за это. mediaStream.stop устарела.
Дэн Браун
@ DanBrown, каково ваше решение?
веб-женщина
Я бы настоятельно не рекомендовал изменять прототип нативного API для восстановления функции, которая официально устарела и удалена из браузера. Это нерегулярно и может привести к путанице позже. Когда вам нужно остановить все дорожки в потоке, почему бы просто не сделать stream.getTracks().forEach(track => { track.stop() })? Или, если вы действительно делаете это достаточно часто, чтобы оправдать сокращение, вы всегда можете определить вспомогательную функцию, например stopAllTracks(stream).
Каллум
45

Не используйте stream.stop(), это устарело

MediaStream Устаревшие

использование stream.getTracks().forEach(track => track.stop())

sol404
источник
1
Большое спасибо, он работает полностью нормально, из-за обесценения сбивает людей с толку, какой из них работает, но с марта 2019 года вышеупомянутое решение отлично работает в хроме .. 🙂
ПАНКАЙ НАРОЛА,
10

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();
Саси Варунан
источник
9

Запуск видео с веб-камеры в разных браузерах

Для 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="";

С этим свет веб-камеры гаснет каждый раз ...

Ален Саурат
источник
10
Это только останавливает показ видео в теге <video>, но не останавливает камеру.
Г. Фюр
8

Предположим, у нас есть потоковая передача в теге 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;
Вешрадж Джоши
источник
6

Вы можете завершить поток напрямую, используя объект потока, возвращенный в обработчике успеха getUserMedia. например

localMediaStream.stop()

video.src=""или nullпросто удалили бы источник из тега видео. Это не выпустит аппаратное обеспечение.

Bhavin
источник
Понимаю. Я попробую это позже.
Shih-En Chou
1
Не совсем ... На firefox не работает. В документах упоминается, что этот метод реализован не во всех браузерах ...
Sdra
Вышеупомянутое решение не работает для меня. Это сделало это.
Скоттмас
5

Попробуйте метод ниже:

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();
Имал Хасаранга Перера
источник
4

Если .stop()это устарело, то я не думаю, что мы должны добавить его снова, как доза @MuazKhan. Это причина того, почему вещи устарели и больше не должны использоваться. Вместо этого просто создайте вспомогательную функцию ... Вот еще версия для es6

function stopStream (stream) {
    for (let track of stream.getTracks()) { 
        track.stop()
    }
}
Бесконечный
источник
1
for (let track of stream.getTracks()) { track.stop() }
guest271314
7
stream.getTracks().forEach(function (track) { track.stop() })в ES5 это позволяет избежать длительных преобразованийfor of
Babel
3

Поскольку вам нужны дорожки, чтобы закрыть потоковую передачу, и вам нужен 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();
});

Конечно, это закроет все активные видеодорожки. Если у вас их несколько, выберите соответствующий вариант.

MCy
источник
2

Вам нужно остановить все треки (с веб-камеры, микрофона):

localStream.getTracks().forEach(track => track.stop());
TopReseller
источник
0

Использование .stop () в потоке работает в Chrome при подключении через http. Не работает при использовании ssl (https).

ACEGL
источник
0

Пожалуйста, проверьте это: 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;
}

Акшай Италия
источник
0

Следующий код работал для меня:

public vidOff() {

      let stream = this.video.nativeElement.srcObject;
      let tracks = stream.getTracks();

      tracks.forEach(function (track) {
          track.stop();
      });

      this.video.nativeElement.srcObject = null;
      this.video.nativeElement.stop();
  }
TechDo
источник
0

Запустите и остановите веб-камеру, (обновление 2020 React ES6)

Запустить веб-камеру

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();
Хите саху
источник
-1

Есть ссылка на поток формы successHandle

var streamRef;

var handleVideo = function (stream) {
    streamRef = stream;
}

//this will stop video and audio both track
streamRef.getTracks().map(function (val) {
    val.stop();
});
Панкадж Анупам
источник
1
Этот ответ по существу такой же, как и несколько других, которые уже были даны.
Дан Даскалеску
Не слишком далеко @DanDascalescu. Смотрите, в этом примере он ясно демонстрирует свою способность вспомнить функцию карты.
charliebeckwith