Skip to main content

Screencast

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

🌐 Interface for capturing screencast frames from a page.

方法​

🌐 Methods

hideActions​

Added in: v1.59 screencast.hideActions

移除动作装饰。

🌐 Removes action decorations.

用法

await screencast.hideActions();

返回

hideOverlays​

Added in: v1.59 screencast.hideOverlays

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

🌐 Hides overlays without removing them.

用法

await screencast.hideOverlays();

返回

showActions​

Added in: v1.59 screencast.showActions

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

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

用法

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

参数

  • options Object (optional)

    • cursor "none" | "pointer" (optional) Added in: v1.61#

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

    • duration number (optional)#

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

    • fontSize number (optional)#

      已弃用

      请改用 style 中的 title，例如 style: { title: 'font-size: 32px' }。

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

    • position "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right" (optional)#

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

    • style Object (optional) Added in: v1.64#

      • point string (optional)

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

      • highlight string (optional)

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

      • title string (optional)

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

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.

用法

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

参数

  • title string#

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

  • options Object (optional)

    • description string (optional)#

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

    • duration number (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.

用法

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

参数

  • html string#

    覆盖层的 HTML 内容。

  • options Object (optional)

    • duration number (optional)#

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

返回

showOverlays​

Added in: v1.59 screencast.showOverlays

显示叠加层。

🌐 Shows overlays.

用法

await screencast.showOverlays();

返回

start​

Added in: v1.59 screencast.start

开始屏幕录制。当提供path时，它会将视频录制保存到指定的文件中。当提供onFrame时，会将JPEG编码的帧传递给回调。两者可以同时使用。

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

用法

// Record video
await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } });
// ... perform actions ...
await page.screencast.stop();
// Capture frames
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 },
});
// ... perform actions ...
await page.screencast.stop();

参数

  • options Object (optional)

    • fps number (optional) Added in: v1.64#

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

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

    • onFrame function(Object):Promise (optional)#

      • data Buffer

        JPEG 编码的帧数据。

      • timestamp number

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

      • viewportWidth number

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

      • viewportHeight number

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

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

    • path string (optional)#

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

    • quality number (optional)#

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

    • size Object (optional)#

      • width number

        最大帧宽度（像素）。

      • height number

        最大帧高度（像素）。

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

返回

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().

用法

await screencast.stop();

返回