Skip to main content

Screencast

用于从页面捕获屏幕录像帧的接口。

🌐 Interface for capturing screencast frames from a page.

方法​

🌐 Methods

hideActions​

Added in: v1.59 screencast.hideActions

移除动作装饰。

🌐 Removes action decorations.

用法

Screencast.hideActions();

返回

hideOverlays​

Added in: v1.59 screencast.hideOverlays

隐藏覆盖层而不移除它们。

🌐 Hides overlays without removing them.

用法

Screencast.hideOverlays();

返回

showActions​

Added in: v1.59 screencast.showActions

在被交互的元素上启用可视注释。返回一个一次性对象，当被释放时会停止显示操作。

🌐 Enables visual annotations on interacted elements. Returns a disposable that stops showing actions when disposed.

用法

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

参数

  • options Screencast.ShowActionsOptions (optional)

    • setCursor enum ScreencastCursor { NONE, POINTER } (optional) Added in: v1.61#

      指针操作显示光标装饰。"pointer"（默认）渲染一个从前一个操作点移动到下一个操作点的动画鼠标指针。"none" 禁用光标装饰。

    • setDuration double (optional)#

      每个注释显示的时间长度，单位为毫秒。默认值为 500。

    • setFontSize int (optional)#

      :::警告[已废弃] 请在setStyle中使用title，例如style: { title: 'font-size: 32px' }。 :::

      操作标题的字体大小（像素）。默认值为 24。

    • setPosition enum AnnotatePosition { TOP_LEFT, TOP, TOP_RIGHT, BOTTOM_LEFT, BOTTOM, BOTTOM_RIGHT } (optional)#

      操作标题覆盖的位置。默认值为 "top-right"。

    • setStyle Style (optional) Added in: v1.64#

      • setPoint String (optional)

        动作点上标记的 CSS 声明。标记位于动作点，大小为零并且居中于该点，所以它的大小和外观来自这个样式。如果省略则不显示。

      • setHighlight String (optional)

        覆盖目标元素的盒子的 CSS 声明。盒子会根据元素边界进行定位和调整大小。省略时不会显示。

      • setTitle String (optional)

        动作标题的 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​

Added in: v1.59 screencast.showChapter

显示带有标题和可选描述的章节覆盖，居中显示在页面上，并带有模糊背景。适用于视频录制的解说。覆盖将在指定时间后或2000毫秒后移除。

🌐 Shows a chapter overlay with a title and optional description, centered on the page with a blurred backdrop. Useful for narrating video recordings. The overlay is removed after the specified duration, or 2000ms.

用法

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

参数

  • title String#

    在覆盖层中高亮的标题文本。

  • options Screencast.ShowChapterOptions (optional)

    • setDescription String (optional)#

      可选描述文本显示在标题下方。

    • setDuration double (optional)#

      覆盖层在自动移除前的持续时间（毫秒）。默认值为 2000。

返回

showOverlay​

Added in: v1.59 screencast.showOverlay

添加一个带有指定 HTML 内容的覆盖层。该覆盖层会显示在页面上方，直到被移除。返回一个可释放对象，释放时会移除覆盖层。

🌐 Adds an overlay with the given HTML content. The overlay is displayed on top of the page until removed. Returns a disposable that removes the overlay when disposed.

用法

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

参数

  • html String#

    覆盖层的 HTML 内容。

  • options Screencast.ShowOverlayOptions (optional)

    • setDuration double (optional)#

      以毫秒为单位的持续时间，超过该时间后覆盖层会自动移除。如果未提供，覆盖层将保持显示直到被手动关闭。

返回

  • [Disposable]#

showOverlays​

Added in: v1.59 screencast.showOverlays

显示叠加层。

🌐 Shows overlays.

用法

Screencast.showOverlays();

返回

start​

Added in: v1.59 screencast.start

开始屏幕录像。当提供 setPath 时，它会将视频录制保存到指定的文件。当提供 setOnFrame 时，会将 JPEG 编码的帧传递给回调函数。两者可以一起使用。

🌐 Starts the screencast. When setPath is provided, it saves video recording to the specified file. When setOnFrame is provided, delivers JPEG-encoded frames to the callback. Both can be used together.

用法

参数

  • options Screencast.StartOptions (optional)

    • setFps int (optional) Added in: v1.64#

      视频录制的帧率，以每秒帧数为单位。仅与 setPath 一起使用。默认值为 25。

      更高的帧率可以让动画和滚动更流畅，但会消耗更多 CPU 来进行编码。可以结合 setSize 来录制高分辨率视频。视频中只能包含浏览器生成的独立帧数；目前 Firefox 和 WebKit 可以捕捉到每秒最多 25 帧。

    • setOnFrame Consumer<ScreencastFrame> (optional)#

      • setData byte[]

        JPEG 编码的帧数据。

      • setTimestamp double

        浏览器显示该帧的时间戳，自 Unix 纪元以来的毫秒数。

      • setViewportWidth int

        捕获该框架时页面视口的宽度。

      • setViewportHeight int

        捕获该框架时页面视口的高度。

      回调函数，接收 JPEG 编码的帧数据以及捕获时的页面视口尺寸。

    • setPath Path (optional)#

      当屏幕录制停止时，应保存视频的路径。如果提供此路径，将开始视频录制。

    • setQuality int (optional)#

      图片的质量，范围为 0-100。

    • setSize Size (optional)#

      • setWidth int

        最大帧宽度（像素）。

      • setHeight int

        最大帧高度（像素）。

      指定屏幕录制帧的尺寸。实际帧会按比例缩放以保持页面的纵横比，并且可能小于这些界限。如果屏幕录制已经在进行中（例如由跟踪或视频录制启动），现有配置优先，帧的大小可能超过这些界限，或者此选项可能被忽略。如果未指定，尺寸将等于页面视口的大小，并缩小以适应 800×800。

返回

  • [Disposable]#

stop​

Added in: v1.59 screencast.stop

如果正在进行屏幕录像和视频录制，则停止它们。如果正在录制视频，则将其保存到 Screencast.start() 中指定的路径。

🌐 Stops the screencast and video recording if active. If a video was being recorded, saves it to the path specified in Screencast.start().

用法

Screencast.stop();

返回