Screencast

Interface for capturing screencast frames from a page.

Methods​

hideActions​

Removes action decorations.

Usage

await screencast.hideActions();

Returns

• Promise<void>

hideOverlays​

Hides overlays without removing them.

Usage

await screencast.hideOverlays();

Returns

• Promise<void>

showActions​

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

Usage

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

Arguments

• options Object (optional)

  • cursor "none" | "pointer" (optional)

    Cursor decoration shown for pointer actions. "pointer" (the default) renders a mouse pointer that animates from the previous action point to the next one. "none" disables the cursor decoration.

  • duration number (optional)

    How long each annotation is displayed in milliseconds. Defaults to 500.

  • fontSize number (optional)

    Font size of the action title in pixels. Defaults to 24.

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

    Position of the action title overlay. Defaults to "top-right".

Returns

• Promise<Disposable>

showChapter​

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.

Usage

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

Arguments

• title string

  Title text displayed prominently in the overlay.

• options Object (optional)

  • description string (optional)

    Optional description text displayed below the title.

  • duration number (optional)

    Duration in milliseconds after which the overlay is automatically removed. Defaults to 2000.

Returns

• Promise<void>

showOverlay​

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.

Usage

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

Arguments

• html string

  HTML content for the overlay.

• options Object (optional)

  • duration number (optional)

    Duration in milliseconds after which the overlay is automatically removed. Overlay stays until dismissed if not provided.

Returns

• Promise<Disposable>

showOverlays​

Shows overlays.

Usage

await screencast.showOverlays();

Returns

• Promise<void>

start​

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.

Usage

// 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();

Arguments

• options Object (optional)

  • onFrame function(Object):Promise (optional)

    • data Buffer

      JPEG-encoded frame data.

    • timestamp number

      The timestamp of when the frame was presented by the browser, in milliseconds since the Unix epoch.

    • viewportWidth number

      Width of the page viewport at the time the frame was captured.

    • viewportHeight number

      Height of the page viewport at the time the frame was captured.

    Callback that receives JPEG-encoded frame data along with the page viewport size at the time of capture.

  • path string (optional)

    Path where the video should be saved when the screencast is stopped. When provided, video recording is started.

  • quality number (optional)

    The quality of the image, between 0-100.

  • size Object (optional)

    • width number

      Max frame width in pixels.

    • height number

      Max frame height in pixels.

    Specifies the dimensions of screencast frames. The actual frame is scaled to preserve the page's aspect ratio and may be smaller than these bounds. If a screencast is already active (e.g. started by tracing or video recording), the existing configuration takes precedence and the frame size may exceed these bounds or this option may be ignored. If not specified the size will be equal to page viewport scaled down to fit into 800×800.

Returns

• Promise<Disposable>

stop​

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

Usage

await screencast.stop();

Returns

• Promise<void>