Зупинити / закрити веб-камеру, яку відкриває navigator.getUserMedia

Я відкрив веб-камеру за допомогою наступного коду JavaScript: navigator.getUserMedia

Чи є якийсь код JavaScript, щоб зупинити або закрити веб-камеру? Дякую всім.

EDIT

Оскільки ця відповідь спочатку була розміщена, API браузера змінився. .stop()більше не доступний у потоці, який передається до зворотного дзвінка. Розробнику доведеться отримати доступ до треків, що входять до потоку (аудіо чи відео), і зупинити кожен з них окремо.

Більше інформації тут: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=uk#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();
        }
    });
}

Примітка: Відповідь було оновлено: 06.09.2020

Не використовуйте stream.stop(), це застаріло

Застарення MediaStream

Використовуйте 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();

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

Для опери 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 );

Зупинення відео з веб-камери за допомогою різних браузерів

Для опери 12

video.pause();
video.src=null;

Для Firefox Nightly 18.0

video.pause();
video.mozSrcObject=null;

Для Chrome 22

video.pause();
video.src="";

При цьому світло веб-камери падає щоразу ...

Припустимо, у нас є потокове відео тег, а id - відео - <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;

Ви можете закінчити потік безпосередньо, використовуючи об'єкт потоку, повернутий в обробник успіху для отриманняUUerMedia. напр

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

Оскільки треки вам потрібні для закриття потокової передачі, і вам потрібен streamboject, щоб дістатися до треків, кодом, який я використав за допомогою відповіді Муаз-Хана, наведено вище:

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

Використання .stop () у потоці працює на chrome при підключенні через http. Він не працює при використанні ssl (https).

Перевірте це: 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;
}

Наступний код працював для мене:

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

Запуск та зупинка веб-камери (оновлення 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());
}

Функція зупинки веб-камери працює навіть у відеопотоках:

  this.video.src = this.state.videoToTest;
  this.video.play();

Майте посилання на успішну форму потоку

var streamRef;

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

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