Захватывайте и сохраняйте потоковое видео в реальном времени с помощью JavaScript📹»

Этот код позволяет захватывать видео с камеры и микрофона, записывать его и воспроизводить записанное видео с помощью кнопок «Старт» и «Стоп». Записанное видео отображается в элементе videoRecorded, и оно будет отображаться, и мы можем снять много видео.

<html>
  <head>
    <title>To record a video with JavaScript</title>
  </head>
  <body>
    <div>
      <button type="button" id="buttonStart">Start</button>
      <button type="button" id="buttonStop" disabled>Stop</button>
    </div>
    <div>
      <video autoplay muted playsinline id="videoLive"></video>
    </div>
    <div>
      <video controls playsinline id="videoRecorded"></video>
    </div>
    <script>
async function main () {
  const buttonStart = document.querySelector('#buttonStart')
  const buttonStop = document.querySelector('#buttonStop')
  const videoLive = document.querySelector('#videoLive')
  const videoRecorded = document.querySelector('#videoRecorded')

  const stream = await navigator.mediaDevices.getUserMedia({ 
    video: true,
    audio: true,
  })

  videoLive.srcObject = stream

  if (!MediaRecorder.isTypeSupported('video/webm')) {
    console.warn('video/webm is not supported')
  }

  const mediaRecorder = new MediaRecorder(stream, { 
    mimeType: 'video/webm',
  })

  buttonStart.addEventListener('click', () => {
    mediaRecorder.start() 
    buttonStart.setAttribute('disabled', '')
    buttonStop.removeAttribute('disabled')
  })

  buttonStop.addEventListener('click', () => {
    mediaRecorder.stop() 
    buttonStart.removeAttribute('disabled')
    buttonStop.setAttribute('disabled', '')
  })

  mediaRecorder.addEventListener('dataavailable', event => {
    videoRecorded.src = URL.createObjectURL(event.data) 
  })
}

main()
</script>
  </body>
</html>

async function main () : определяет асинхронную функцию с именем main, которая будет содержать основную логику программы.

buttonStart, buttonStop, videoLive и videoRecorded — это ссылки на различные элементы HTML, полученные с помощью метода document.querySelector на основе их идентификатора.

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }): Эта строка запрашивает разрешение пользователя на доступ к камере и микрофону (дорожки video и audio) с использованием метода getUserMedia.

Ключевое слово await заставляет код ожидать предоставления разрешения, прежде чем продолжить.

videoLive.srcObject = stream. При этом поток, полученный с камеры и микрофона пользователя, назначается свойству srcObject элемента videoLive, что позволяет осуществлять потоковую передачу видео в реальном времени.

if (!MediaRecorder.isTypeSupported('video/webm')) : проверяет, поддерживает ли браузер формат video/webm для записи видео. Если он не поддерживается, на консоль записывается предупреждающее сообщение.

const mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' }): При этом создается новый экземпляр MediaRecorder для записи медиапотоков. Он принимает объект stream и указывает желаемый тип носителя (video/webm) с помощью параметра mimeType.

buttonStart.addEventListener('click', () => { ... }): к кнопке "Пуск" добавляется прослушиватель событий щелчка. При нажатии экземпляр mediaRecorder начинает запись с использованием метода start(). Кнопки включаются/отключаются соответственно.

buttonStop.addEventListener('click', () => { ... }): к кнопке Стоп добавляется прослушиватель событий щелчка. При нажатии экземпляр mediaRecorder прекращает запись с использованием метода stop(). Кнопки включаются/отключаются соответственно.

mediaRecorder.addEventListener('dataavailable', event => { ... }): Этот прослушиватель событий срабатывает, когда mediaRecorder записывает доступные данные. Записанные данные преобразуются в большой двоичный объект, а URL-адрес большого двоичного объекта присваивается атрибуту src элемента videoRecorded, что позволяет воспроизводить записанное видео.

main(): вызывает функцию main для запуска выполнения программы.