Skip to main content

屏幕录制

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

🌐 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)

    • duration number (optional)#

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

    • fontSize number (optional)#

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

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

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

返回

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

参数

  • options Object (optional)

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

      • data Buffer

        JPEG 编码的帧数据。

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

返回