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

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

есть ли код JavaScript для остановки или закрытия веб-камеры? Поблагодарить каждого.

11 ответов


редактировать

поскольку этот ответ был первоначально опубликован, API браузера изменился. .stop() больше не доступен в потоке, который передается обратному вызову. Разработчик должен будет получить доступ к трекам, которые составляют поток (аудио или видео) и остановить каждый из них по отдельности.

подробнее здесь: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

пример (по ссылке выше):

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

поддержка браузера может отличаться.

оригинальный ответ

navigator.getUserMedia предоставляет вам поток в обратном вызове успеха, вы можете позвонить .stop() в этом потоке, чтобы остановить запись (по крайней мере, в Chrome, кажется, FF это не нравится)


вы можете позвонить в "остановка" за MediaStream объект который будет устаревшим; новое предложение-выпустить медиа-треки по телефону"остановка" над каждым СМИ трека:

mediaStream.stop();

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

Обновлено в ноябре 03, 2015 ---- 10:34:24 AM

вот кросс-браузер stream.stop hack:

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

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

MediaStream Deprecations

использовать stream.getTracks().forEach(track => track.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="";

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


вы можете завершить поток непосредственно с помощью объекта stream, возвращенного в обработчике успеха getUserMedia. например,

localMediaStream.stop()

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


FF, Chrome и Opera начали подвергатьgetUserMedia via 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 audio 
localStream.getVideoTracks()[0].stop();

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

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

попробуйте метод bellow

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

Так как вам нужны треки для закрытия потоковой передачи, и вам нужно stream boject чтобы добраться до треков, код, который я использовал с помощью ответа Муаз-Хана выше, выглядит следующим образом:

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

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


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


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

var streamRef;

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

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