Запись видео с экрана

Puppeteer — это мощный инструмент для автоматизации браузера, который позволяет создавать скрипты для тестирования, парсинга данных и взаимодействия с веб-страницами. Помимо основного функционала, Puppeteer предоставляет возможности для захвата скриншотов и записи видео с экрана, что может быть полезно для тестирования, отладки и создания учебных материалов.

Настройка записи видео

Для записи видео с экрана в Puppeteer необходимо использовать Chrome DevTools Protocol. Puppeteer, как обёртка для Chromium, может взаимодействовать с этим протоколом, что даёт доступ к низкоуровневым функциям браузера. Стандартный Puppeteer не поддерживает запись видео «из коробки», но с помощью дополнительного API это возможно.

Чтобы начать, потребуется подключение к DevTools Protocol и настройка захвата видео. Вот пример, как можно записывать видео с экрана с помощью Puppeteer: 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch({
    headless: false, // Запуск в браузере (не в headless режиме)
    defaultViewport: null, // Использовать экран по умолчанию
  });

  const page = await browser.newPage();
  
  // Подключение к DevTools Protocol
  const client = await page.target().createCDPSession();
  await client.send('Page.startScreencast', {
    format: 'jpeg', // Формат скриншотов
    quality: 85, // Качество скриншотов
    everyNthFrame: 1 // Количество кадров для записи
  });

  // Начало записи видео
  const videoChunks = [];
  client.on('Page.screencastFrame', async ({data, metadata}) => {
    videoChunks.push(data); // Сохранение данных каждого кадра
    await client.send('Page.screencastFrameAck', {sessionId: metadata.sessionId});
  });

  // Навигация по странице
  await page.goto('https://example.com');
  await page.waitForTimeout(5000); // Ждём 5 секунд

  // Остановка записи
  await client.send('Page.stopScreencast');

  // Сохранение видео
  const fs = require('fs');
  fs.writeFileSync('output_video.webm', Buffer.concat(videoChunks));

  await browser.close();
})();

Этот код подключает сессию к DevTools Protocol, активирует режим записи экрана, собирает кадры и сохраняет их в видеофайл.

Хранение кадров и кодек

В примере выше используется формат JPEG для кадра, однако для более качественной записи видео можно использовать формат WebM или VP8, которые обеспечивают сжатие без потери качества.

Запись видео осуществляется путём захвата каждого отдельного кадра, который затем сохраняется в массив. После того как запись завершена, кадры объединяются в один файл. Важно учитывать, что количество кадров, которое нужно захватывать для плавного видео, должно быть разумным — слишком большое количество кадров может снизить производительность теста или повлиять на работу страницы.

Работа с аудио

Puppeteer не предоставляет возможности для захвата аудио из браузера, поскольку он работает на уровне видео-кадров и не имеет встроенной поддержки для работы с аудиофайлами. Чтобы записывать и аудио, необходимо использовать сторонние инструменты или синхронизировать Puppeteer с другими технологиями.

Проблемы и ограничения

  1. Производительность: Запись видео с экрана требует значительных ресурсов от системы. Особенно это проявляется на больших страницах или при записи с высоким качеством. Следует помнить, что это может повлиять на стабильность работы тестов, если они выполняются параллельно с захватом видео.

  2. Размер файла: Без компрессии видеофайлы могут занимать много места. Для решения этой проблемы стоит добавить обработку сжимающего алгоритма или использовать сторонние библиотеки для постобработки видео, такие как FFmpeg.

  3. Тестирование в headless режиме: Когда Puppeteer работает в headless-режиме (без графического интерфейса), запись видео становится более сложной задачей. Некоторые браузеры могут не поддерживать создание видеокадров в этом режиме, и для корректной работы нужно запускать браузер с графическим интерфейсом.

Советы по улучшению качества записи

  1. Использование меньшего разрешения: Если необходимо снимать большие страницы, можно уменьшить разрешение браузера перед записью видео. Это поможет снизить нагрузку на систему.

    Пример настройки разрешения: 

    await page.setViewport({ width: 1280, height: 720 });

  2. Увеличение частоты кадров: Для плавности видео можно настроить параметр everyNthFrame, который управляет количеством захватываемых кадров. Для записи с высокой частотой кадров потребуется больше ресурсов.

  3. Добавление задержек: Чтобы избежать слишком быстрого или рваного видео, стоит добавлять паузы или задержки в скрипт, давая странице время на рендеринг.

Альтернативы и дополнительные инструменты

Хотя Puppeteer сам по себе предоставляет все необходимые инструменты для записи экрана через DevTools Protocol, для более сложных задач, таких как синхронизация с аудио или использование продвинутых кодеков, можно использовать FFmpeg. Эта утилита позволяет сжать видео, преобразовать форматы и настроить дополнительную обработку после захвата кадров.

Пример использования FFmpeg для сжатия видео: 

ffmpeg -i input_video.webm -vcodec libvpx -b:v 1M -acodec libvorbis output_video.webm

FFmpeg может быть интегрирован с Puppeteer, где Puppeteer будет собирать кадры, а FFmpeg использоваться для окончательной обработки.

Заключение

Запись видео с экрана в Puppeteer с помощью Chrome DevTools Protocol открывает дополнительные возможности для тестирования, отладки и создания наглядных демонстраций. Этот процесс может быть адаптирован под различные нужды: от создания видеоотчетов до записи взаимодействий с интерфейсом. Важно учитывать ограничения по производительности и ресурсам, а также помнить о возможной необходимости в дополнительных инструментах для сжатия и обработки видеоматериала.

Оглавление