Javascript: трансляция видео с веб камеры в браузер

Напишем довольно простой код на javascript, для захвата и трансляции видео потока с веб камеры в браузер. Но учтите, что код поддерживает только современные браузеры.

Для начала, добавим тэг video и кнопку запуска трансляции.

<video id="webcam" width="640" height="480"></video>

<button id="startStopButton">Start</button>

После нажатия на кнопку старт, браузер попросит разрешения на трансляцию видео. Убедитесь, что не заблокировали это разрешение.

Теперь создадим скрипт для трансляции

  const video = document.getElementById('webcam');
  const startStopButton = document.getElementById('startStopButton');

  let mediaStream;

  if (navigator.mediaDevices.getUserMedia) {
    startStopButton.addEventListener('click', function() {
      if (startStopButton.textContent === 'Start') {
        navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
          video.srcObject = stream;
          mediaStream = stream;

          video.play();

          startStopButton.textContent = 'Stop';
        }).catch(function(error) {
          console.error('Error accessing the webcam:', error);
        });
      } else {
        video.pause();

        video.srcObject = null;

        mediaStream.getTracks().forEach(function(track) {
          track.stop();
        });

        startStopButton.textContent = 'Start';
      }
    });
  } else {
    console.error('getUserMedia is not supported by this browser.');
  }