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

Screencast

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

Методы​

hideActions​

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

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

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

Screencast.hideActions();

Возвращает

hideOverlays​

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

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

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

Screencast.hideOverlays();

Возвращает

showActions​

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

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

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

Screencast.showActions();
Screencast.showActions(options);

Аргументы

  • options Screencast.ShowActionsOptions (необязательно)

    • setCursor enum ScreencastCursor { NONE, POINTER } (необязательно) Добавлено в: v1.61#

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

    • setDuration double (необязательно)#

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

    • setFontSize int (необязательно)#

      Устарело

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

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

    • setPosition enum AnnotatePosition { TOP_LEFT, TOP, TOP_RIGHT, BOTTOM_LEFT, BOTTOM, BOTTOM_RIGHT } (необязательно)#

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

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

      • setPoint String (необязательно)

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

      • setHighlight String (необязательно)

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

      • setTitle String (необязательно)

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

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

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

      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',
        },
      });

Возвращает

  • [Disposable]#

showChapter​

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

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

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

Screencast.showChapter(title);
Screencast.showChapter(title, options);

Аргументы

  • title String#

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

  • options Screencast.ShowChapterOptions (необязательно)

    • setDescription String (необязательно)#

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

    • setDuration double (необязательно)#

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

Возвращает

showOverlay​

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

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

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

Screencast.showOverlay(html);
Screencast.showOverlay(html, options);

Аргументы

  • html String#

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

  • options Screencast.ShowOverlayOptions (необязательно)

    • setDuration double (необязательно)#

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

Возвращает

  • [Disposable]#

showOverlays​

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

Показывает наложения.

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

Screencast.showOverlays();

Возвращает

start​

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

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

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

Аргументы

  • options Screencast.StartOptions (необязательно)

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

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

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

    • setOnFrame Consumer<ScreencastFrame> (необязательно)#

      • setData byte[]

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

      • setTimestamp double

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

      • setViewportWidth int

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

      • setViewportHeight int

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

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

    • setPath Path (необязательно)#

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

    • setQuality int (необязательно)#

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

    • setSize Size (необязательно)#

      • setWidth int

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

      • setHeight int

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

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

Возвращает

  • [Disposable]#

stop​

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

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

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

Screencast.stop();

Возвращает