Записывайте видео с веб-камеры и микрофона прямо в браузере, затем скачивайте файл — без загрузки и сервера.
Записывайте видео с веб-камеры и микрофона прямо в браузере, затем скачивайте файл — без загрузки и сервера. Записывайте видео с веб-камеры и микрофона прямо в браузере, затем скачивайте файл — без загрузки и сервера.
Запись в браузере — это конвейер из трёх шагов. Сначала getUserMedia() захватывает MediaStream с камеры и микрофона после того, как вы дадите разрешение — браузеры всегда спрашивают и требуют защищённого контекста (HTTPS или localhost). Затем MediaRecorder потребляет этот поток и кодирует поступающие кадры в контейнер, например WebM, нарезая данные на фрагменты по ходу дела. Наконец, при остановке фрагменты собираются в единый Blob, который можно воспроизвести и скачать. Ничего не передаётся: кодирование происходит на вашем устройстве, поэтому браузерный рекордер может создать файл даже при отключённой сети.
Контейнер и кодек зависят от вашего браузера и платформы. WebM с видео VP8 или VP9 и аудио Opus — самый надёжный вариант и работает в Chrome, Firefox, Edge и Safari. MP4 предлагается, когда браузер сообщает о его поддержке, что на новых устройствах встречается всё чаще, но не везде. Если вы выберете формат, который браузер не может закодировать, страница автоматически переключится на WebM. Когда запись завершается, появляется кнопка скачивания с корректным расширением (.webm или .mp4) в соответствии с тем, что было фактически создано.
Перед началом потока браузер показывает запрос разрешения, где можно выбрать, какие камеру и микрофон предоставить — выпадающие списки устройств на этой странице заполняются из enumerateDevices(), и вы можете переключать устройства и заново открывать поток. Вся обработка локальна: видеобайты никогда не покидают ваше устройство, и сама страница ничего не сохраняет. Когда вы останавливаете запись, индикатор камеры гаснет, а дорожки потока освобождаются, поэтому после завершения ресурсы не удерживаются. На некоторых системах индикатор камеры остаётся включённым, пока страница удерживает любой поток, даже при выключенном звуке.
Предпросмотр корректно зеркалится (беззвучное воспроизведение исключает эхо), а таймер отсчитывает прошедшее время во время записи. Для длинных записей учтите, что хранимые в памяти фрагменты растут с длительностью, поэтому очень долгие сессии потребляют больше памяти. Если нужно записывать экран, а не камеру, это требует другого API (getDisplayMedia) и здесь не рассматривается. Если запрос разрешения был однажды отклонён, браузеры обычно блокируют выбор, пока вы не сбросите настройки сайта.