Захватывайте и сохраняйте потоковое видео в реальном времени с помощью 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
для запуска выполнения программы.