跳转到主要内容

截屏录制

用于从页面捕获截屏帧的接口。

方法​

hideActions​

新增于: v1.59 screencast.hideActions

移除操作装饰（action decorations）。

用法

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 (可选)

    • duration number (可选)#

      每个注释显示的持续时间（以毫秒为单位）。默认为 500。

    • fontSize number (可选)#

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

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

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

返回

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 内容的覆盖层。覆盖层将显示在页面上方直至被移除。返回一个可释放对象，销毁该对象时将移除覆盖层。

用法

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 编码的帧传递给回调函数。两者可以同时使用。

用法

// 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 }) => console.log(`frame size: ${data.length}`),
  size: { width: 800, height: 600 },
});
// ... perform actions ...
await page.screencast.stop();

参数

  • options Object (可选)

    • onFrame function(Object):Promise (可选)#

      • data Buffer

        JPEG 编码的帧数据。

      接收 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();

返回