Перейти к основному содержимому

Screencast

Интерфейс для захвата кадров скринкаста со страницы.

Методы​

hideActions​

Добавлено в: v1.59 screencast.hideActions

Удаляет визуальные обозначения действий.

Использование

await screencast.hideActions();

Возвращает

hideOverlays​

Добавлено в: v1.59 screencast.hideOverlays

Скрывает оверлеи, не удаляя их.

Использование

await screencast.hideOverlays();

Возвращает

showActions​

Добавлено в: v1.59 screencast.showActions

Включает визуальные аннотации для элементов, с которыми выполняется взаимодействие. Возвращает объект Disposable, при освобождении которого отображение действий прекращается.

Использование

await screencast.showActions();
await screencast.showActions(options);

Аргументы

  • options Object (необязательно)

    • cursor "none" | "pointer" (необязательно) Добавлено в: v1.61#

      Визуальное обозначение курсора, отображаемое при действиях указателя. Значение "pointer" (по умолчанию) отображает указатель мыши, который анимированно перемещается от точки предыдущего действия к точке следующего. Значение "none" отключает визуальное обозначение курсора.

    • duration number (необязательно)#

      Продолжительность отображения каждой аннотации в миллисекундах. По умолчанию — 500.

    • fontSize number (необязательно)#

      Устарело

      Вместо этого используйте title в style, например style: { title: 'font-size: 32px' }.

      Размер шрифта заголовка действия в пикселях. По умолчанию — 24.

    • position "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right" (необязательно)#

      Положение оверлея с заголовком действия. По умолчанию — "top-right".

    • style Object (необязательно) Добавлено в: v1.64#

      • point string (необязательно)

        CSS-объявления для маркера в точке действия. Маркер располагается в точке действия, имеет нулевой размер и центрируется относительно этой точки, поэтому его размер и внешний вид определяются этим стилем. Если параметр не указан, маркер не отображается.

      • highlight string (необязательно)

        CSS-объявления для прямоугольной области, покрывающей целевой элемент. Положение и размер этой области соответствуют границам элемента. Если параметр не указан, область не отображается.

      • title string (необязательно)

        CSS-объявления для заголовка действия, например 'font-size: 32px; background: #333'. Заголовок размещается в соответствии с параметром position.

      Стили визуальных обозначений действий. Все обозначения плавно исчезают в течение времени, заданного параметром duration.

      Использование

      await page.screencast.showActions({
        style: {
          point: 'width: 20px; height: 20px; border-radius: 50%; background: red',
          highlight: 'outline: 2px solid #333; background: rgba(0, 128, 255, .15)',
          title: 'font-size: 16px',
        },
      });

Возвращает

showChapter​

Добавлено в: v1.59 screencast.showChapter

Показывает оверлей главы с заголовком и необязательным описанием по центру страницы на размытом фоне. Полезно для пояснения происходящего в видеозаписях. Оверлей удаляется по истечении указанного времени или через 2000 мс.

Использование

await screencast.showChapter(title);
await screencast.showChapter(title, options);

Аргументы

  • title string#

    Текст заголовка, отображаемый в оверлее в выделенном виде.

  • options Object (необязательно)

    • description string (необязательно)#

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

    • duration number (необязательно)#

      Время в миллисекундах, по истечении которого оверлей автоматически удаляется. По умолчанию — 2000.

Возвращает

showOverlay​

Добавлено в: v1.59 screencast.showOverlay

Добавляет оверлей с указанным HTML-содержимым. Оверлей отображается поверх страницы до его удаления. Возвращает объект Disposable, при освобождении которого оверлей удаляется.

Использование

await screencast.showOverlay(html);
await screencast.showOverlay(html, options);

Аргументы

  • html string#

    HTML-содержимое оверлея.

  • options Object (необязательно)

    • duration number (необязательно)#

      Время в миллисекундах, по истечении которого оверлей автоматически удаляется. Если параметр не указан, оверлей остается на странице до явного удаления.

Возвращает

showOverlays​

Добавлено в: v1.59 screencast.showOverlays

Показывает оверлеи.

Использование

await screencast.showOverlays();

Возвращает

start​

Добавлено в: v1.59 screencast.start

Запускает скринкаст. Если указан параметр path, сохраняет видеозапись в указанный файл. Если указан параметр onFrame, передает кадры в формате JPEG в функцию обратного вызова. Оба параметра можно использовать одновременно.

Использование

// Запись видео
await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } });
// ... выполнение действий ...
await page.screencast.stop();
// Захват кадров
await page.screencast.start({
  onFrame: ({ data, timestamp, viewportWidth, viewportHeight }) => {
    console.log(`frame size: ${data.length} (${viewportWidth}x${viewportHeight}) at ${timestamp}`);
  },
  size: { width: 800, height: 600 },
});
// ... выполнение действий ...
await page.screencast.stop();

Аргументы

  • options Object (необязательно)

    • fps number (необязательно) Добавлено в: v1.64#

      Частота кадров видеозаписи в кадрах в секунду. Используется только вместе с параметром path. По умолчанию — 25.

      Более высокая частота кадров делает анимацию и прокрутку плавнее, но увеличивает нагрузку на процессор при кодировании. Используйте вместе с параметром size для записи видео высокого разрешения. Видео может содержать не больше уникальных кадров, чем создает браузер; Firefox и WebKit в настоящее время захватывают до 25 кадров в секунду.

    • onFrame function(Object):Promise (необязательно)#

      • data Buffer

        Данные кадра, закодированные в формате JPEG.

      • timestamp number

        Временная метка момента отображения кадра браузером, в миллисекундах с начала эпохи Unix.

      • viewportWidth number

        Ширина области просмотра страницы на момент захвата кадра.

      • viewportHeight number

        Высота области просмотра страницы на момент захвата кадра.

      Функция обратного вызова, получающая данные кадра в формате JPEG вместе с размером области просмотра страницы на момент захвата.

    • path string (необязательно)#

      Путь для сохранения видео после остановки скринкаста. Если параметр указан, начинается запись видео.

    • quality number (необязательно)#

      Качество изображения в диапазоне от 0 до 100.

    • size Object (необязательно)#

      • width number

        Максимальная ширина кадра в пикселях.

      • height number

        Максимальная высота кадра в пикселях.

      Задает размеры кадров скринкаста. Фактический кадр масштабируется с сохранением соотношения сторон страницы и может быть меньше указанных размеров. Если скринкаст уже активен (например, запущен при трассировке или записи видео), существующая конфигурация имеет приоритет, и размер кадра может превышать эти ограничения либо этот параметр может игнорироваться. Если параметр не указан, размер будет равен размеру области просмотра страницы, уменьшенному так, чтобы он вписывался в 800×800.

Возвращает

stop​

Добавлено в: v1.59 screencast.stop

Останавливает скринкаст и запись видео, если они активны. Если велась запись видео, сохраняет его по пути, указанному в screencast.start().

Использование

await screencast.stop();

Возвращает