Инструмент записи экрана
Запись экрана, окна или вкладки с возможностью записи звука,с возможностью скачивание видео
Предпросмотр записи
Что такое онлайн-запись экрана?
Запись экрана захватывает прямо в браузере весь экран, окно приложения или отдельную вкладку. В зависимости от браузера и разрешений можно добавить системный звук и вход микрофона, поэтому инструмент подходит для коротких инструкций, воспроизведения багов, демонстраций продукта, фрагментов уроков, дизайн-ревью и объяснений для поддержки без установки отдельной программы. Перед записью важно проверить, не видны ли личные окна, уведомления, пароли, данные клиентов или лишние вкладки, потому что выбранная область записывается как есть. Обработка идет локально, файл затем можно скачать, но качество видео и звука зависит от системы. Для реальной диагностики результат нужно сопоставлять с permissions, средой браузера, сетевым путем и состоянием устройства или сервера.
Как использовать
Как использовать
- Выберите, что записывать: весь экран, окно или вкладку браузера
- Настройте параметры звука (по желанию)
- Нажмите «Начать запись» и выберите, чем делиться
- Нажмите «Остановить запись», когда закончите
- Скачайте или просмотрите запись
Советы
- Закройте ненужные уведомления перед записью
- Для записи системного звука выберите «Вкладка браузера» и отметьте «Поделиться звуком»
- Вы можете приостанавливать и возобновлять запись
- Для наилучшего результата используйте стабильное сетевое подключение
Применение
Технический принцип
Захват начинается с вызова navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }), который возвращает MediaStream с одной видеодорожкой (выбранный экран, окно или вкладка) и опционально одной аудиодорожкой, если браузер и источник это позволяют. Пользователь выбирает поверхность в нативном диалоге, а поток завершается автоматически при нажатии системной кнопки «Остановить демонстрацию», что вызывает событие ended на дорожке и позволяет рекордеру финализировать файл. Кодированный выход формируется через MediaRecorder API. Выбор контейнера и кодека выполняется через MediaRecorder.isTypeSupported() с проверкой кандидатов вроде video/webm;codecs=vp9,opus, video/webm;codecs=vp8,opus и video/mp4;codecs=avc1 на Safari. Событие ondataavailable срабатывает периодически (или при остановке), доставляя фрагменты Blob, которые объединяются в один Blob с согласованным mimeType. Параметры videoBitsPerSecond и audioBitsPerSecond устанавливают баланс между качеством и размером файла — при 1080p и 4 Mbps VP9 получается около 30 МБ в минуту. При одновременном запросе системного звука и микрофона страница создаёт AudioContext, оборачивает каждый MediaStreamTrack в MediaStreamAudioSourceNode и микширует их через GainNode в MediaStreamAudioDestinationNode. Объединённая аудиодорожка заменяет исходные потоки перед запуском MediaRecorder, поэтому итоговый WebM содержит одну смешанную дорожку Opus вместо двух отдельных. Для работы требуется Chrome 72+, Firefox 66+ или Safari 13+; более старые браузеры либо отказывают в getDisplayMedia, либо игнорируют параметр аудио.
- API захвата: navigator.mediaDevices.getDisplayMedia({ video, audio }) возвращает MediaStream; пользователь выбирает экран/окно/вкладку в системном диалоге
- Кодировщик: MediaRecorder с isTypeSupported() — сначала проверяется video/webm;codecs=vp9,opus, затем fallback на vp8 или H.264/AVC1 в MP4
- Поблочный вывод: ondataavailable выдаёт фрагменты Blob, которые объединяются и оборачиваются в Blob с согласованным mimeType
- Микширование аудио: AudioContext + MediaStreamAudioSourceNode + GainNode + MediaStreamAudioDestinationNode объединяют системный звук с микрофоном в одну дорожку Opus
- Триггер завершения потока: событие ended видеодорожки срабатывает при нажатии пользователем панели «Остановить демонстрацию» в браузере, финализируя запись
- Управление битрейтом: videoBitsPerSecond в диапазоне 2,5–8 Мбит/с для 1080p; 4 Мбит/с VP9 — примерно 30 МБ в минуту
- Минимальные требования к браузеру: Chrome 72+, Firefox 66+, Safari 13+; захват звука вкладки работает только в браузерах на базе Chromium при установке флажка «Поделиться звуком вкладки»
Примеры
Видеоурок по ПО, 10 минут в 1080p
Источник: Весь экран (1920 x 1080)
Звук: только микрофон
Кодек: video/webm;codecs=vp9, opus
Частота кадров: 30 fps
Длительность: 10:00
Выход: tutorial.webm, ~190 МБ
Применение: обзоры продуктов, загрузка в LMSВоспроизведение бага со звуком системы
Источник: Вкладка браузера (Chrome)
Звук: Системный звук (звук вкладки в диалоге)
Кодек: video/webm;codecs=vp8, opus
Длительность: 0:45
Выход: bug-repro-2026-06-10.webm, 7.2 МБ
Прикреплено к: GitHub issue #1284Фрагмент онлайн-встречи с микрофоном и системным звуком
Источник: Окно приложения (Zoom)
Звук: Системный + Микрофон (оба)
Длительность: 3:20
Выход: meeting-snippet.webm, 42 МБ
Примечание: пауза на 1:15, чтобы пропустить ввод учётных данных, затем продолжениеДемо продукта для магазина приложений
Источник: Окно приложения (1280 x 720)
Звук: Нет (немое демо для последующего наложения субтитров)
Частота кадров: 30 fps, битрейт: 4 Мбит/с
Длительность: 0:30
Выход: demo.mp4 (если поддерживается H.264) или резервный .webm
Размер: ~15 МБ, укладывается в лимит превью магазинаЧасто задаваемые вопросы
Как работает запись экрана?
Используется браузерный API MediaRecorder поверх медиапотока screen-share, полученного через getDisplayMedia. Браузер спрашивает, что вы хотите расшарить (весь экран / окно / вкладку); страница записывает кадры в видеоблоб в памяти и предлагает скачать файл, когда вы остановите запись. Никаких серверов записи, облака и загрузок нет.
Какой используется формат и кодек?
WebM с видеокодеком VP8 или VP9 (в зависимости от поддержки браузера) и аудио Opus. Большинство современных браузеров, видеоредакторов и плееров читают WebM нативно. Чтобы получить MP4, после скачивания перекодируйте файл локально через FFmpeg.
Можно ли записать системный звук?
Некоторые браузеры и операционные системы позволяют захватывать звук вкладки или системы при getDisplayMedia. Самый щедрый вариант — Chrome в Windows; Safari и Firefox строже. Звук с микрофона (ваш голос) пишется отдельно, если вы дали разрешение.
Какова максимальная длина записи?
Лимит — это объём оперативной памяти, потому что запись держится в RAM до остановки. Практически: 10–60 минут в зависимости от разрешения и битрейта. Для длинных записей или качественного скринкаста удобнее OBS Studio (десктоп) — он пишет на диск, и потолка по памяти у него нет.
Загружается ли запись куда-нибудь?
Нет. Запись остаётся локально в браузере. При скачивании файл WebM сохраняется на ваше устройство. Ничего никуда не передаётся, пока вы сами не поделитесь файлом.
Почему запись лагает или получается некачественной?
Захват экрана и перекодирование сильно нагружают процессор. Закройте лишние приложения, по возможности понизьте разрешение записи и выбирайте отдельное окно или вкладку, а не весь экран. Аппаратное кодирование (h264 через WebCodecs API) помогает там, где оно поддерживается, но пока есть не везде.
Можно ли обрезать или редактировать запись здесь же?
Нет. Скачайте файл WebM и используйте видеоредактор (DaVinci Resolve, Shotcut, командную строку FFmpeg), чтобы обрезать, перекодировать или добавить пометки.