Как записать экран прямо во вкладке браузера, вместе со звуком
Захват экрана, окна или вкладки без установки программ, звук с первого дубля и браузеры, которые тихо теряют половину аудио.
Коллега просит показать баг на видео. Три минуты кликов, можно с комментариями. Открываете поиск — и первые четыре результата предлагают скачать программу на 120 МБ, завести аккаунт и смириться с пятью минутами на бесплатном тарифе и логотипом в углу кадра.
Chrome умеет записывать экран сам с 74-й версии, с 2019 года. Метод называется getDisplayMedia, и именно его вызывает Запись экрана. Выбрали источник, наговорили, остановили, скачали.
Экран, окно или вкладка — выбор важнее, чем кажется
Браузер предлагает все три варианта, и почти все по привычке берут весь экран. Обычно это худший из вариантов.
Записывая экран целиком, вы заодно записываете уведомление, которое выедет из угла на второй минуте. Захват окна держит в кадре одну программу и прячет всё остальное, включая второй монитор. Захват вкладки — самый чёткий: у браузера есть дерево отрисовки самой страницы, поэтому текст остаётся резким, а не уменьшается с родного разрешения монитора.
Есть и ещё одна причина предпочесть вкладку. Звук.
Подвох со звуком, о котором не предупреждают
Здесь путают два совершенно разных источника. Микрофон — один. Звук, который проигрывает компьютер, — другой. У них разные разрешения и разные API.
Микрофон пишется везде. А вот со звуком системы и вкладки всё грустнее:
- Chrome и Edge на Windows: звук вкладки работает, системный — при захвате всего экрана, если поставить галочку в окне выбора.
- Chrome и Edge на macOS: системного звука нет вообще. Система не отдаёт браузеру петлю вывода. Звук вкладки при этом пишется.
- Firefox: ни того, ни другого. Только видео и микрофон.
- Safari: экран записывает, звуком делиться не умеет.
Так что если вы на маке пишете созвон в браузере — ставьте обе галочки и надейтесь, что вкладка подходящая. Иначе в файл попадёт только ваш голос. Это ограничение macOS, а не конкретного рекордера: именно поэтому платные программы для записи тащат с собой драйвер виртуальной звуковой карты.
Когда включены и микрофон, и звук вкладки, рекордер сводит их в одну дорожку через Web Audio. Один файл, оба голоса, без последующего монтажа.
Почему на выходе WebM, а не MP4
Chrome, Edge и Firefox кодируют в WebM, чаще всего VP9 с Opus. Кнопки MP4 нет, потому что собрать его прямо в браузере — это скачать FFmpeg, собранный в WebAssembly, и перекодировать заново. Для двадцатиминутного ролика это долгое ожидание и громко воющий кулер.
На практике это почти не мешает. YouTube, Google Диск, Slack, Discord и Notion принимают WebM как есть. VLC играет. Premiere и Resolve импортируют. Если клиенту принципиально нужен MP4, команда ffmpeg -i in.webm -c copy out.mp4 на своей машине делает это за пару секунд.
Считайте размер заранее
В 1080p при 30 кадрах в секунду выходит примерно 30 МБ в минуту. Десятиминутная демонстрация — около 300 МБ, это нормально. Сорокаминутный тренинг — больше гигабайта, и всё это лежит в памяти браузера до нажатия кнопки «Скачать». Вот тут вкладки и начинают вести себя странно. Для долгих записей берите 720p или делите материал на части.
И скачивайте файл до закрытия вкладки. Копии на сервере нет — в этом весь смысл, но и случайное обновление страницы уносит запись с собой. Сохранили файл — можно писать следующий дубль.