Отключите веб-камеру по щелчку после доступа к ней через .getUserMedia в ReactJS

Question

Я получаю веб-фид через navigator.mediaDevices.getUserMedia по нажатию кнопки и передаю его <video /> через createRef API. Мне нужно отключить подачу (не паузу) одним и тем же нажатием кнопки, если она включена.

Я пытался получить доступ к медиа-трекам, как

.getUserMedia({ video: true, audio: false })
 .then(stream => 
  (this.video.current.srcObject = stream.getTracks()[0].stop))

чтобы попытаться остановить их без удачи.

Я обрабатываю поток вкл / выкл через эту функцию:

handleClick = () => {
 // accessing webcam feed
 if (!this.state.rec) {
   navigator.mediaDevices
    .getUserMedia({ video: true, audio: true })
    .then(stream => (this.video.current.srcObject = stream))
 } else {
  // TODO disconnect webcam feed
 }
};

Я ожидаю, что у меня будет функция, которая отключает канал веб-камеры при нажатии, если он активен.

Answer 1

Остановка треков - это решение, но вам действительно нужно вызвать этот метод. Вы также должны вызывать его на всех треках, даже если вы ожидаете только одного, на тот случай, если ваши ограничения не были выполнены точно.

stream.getTracks().forEach((track) => {
  track.stop();
});