Interface Screencast

Interface for capturing screencast frames from a page.

interface Screencast {
    hideActions(): Promise<void>;
    hideOverlays(): Promise<void>;
    showActions(options?): Promise<Disposable>;
    showChapter(title, options?): Promise<void>;
    showOverlay(html, options?): Promise<Disposable>;
    showOverlays(): Promise<void>;
    start(options?): Promise<Disposable>;
    stop(): Promise<void>;
}

Methods

hideActions hideOverlays showActions showChapter showOverlay showOverlays start stop

Methods

hideActions

  • hideActions(): Promise<void>

  • Removes action decorations.

    Returns Promise<void>

hideOverlays

  • hideOverlays(): Promise<void>

  • Hides overlays without removing them.

    Returns Promise<void>

showActions

  • showActions(options?): Promise<Disposable>

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

    Parameters

    • Optional options: {
          duration?: number;
          fontSize?: number;
          position?: "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right";
      }
      • Optional duration?: number

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

      • Optional fontSize?: number

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

      • Optional position?: "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right"

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

    Returns Promise<Disposable>

showChapter

  • showChapter(title, options?): Promise<void>

  • 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.

    Parameters

    • title: string

      Title text displayed prominently in the overlay.

    • Optional options: {
          description?: string;
          duration?: number;
      }
      • Optional description?: string

        Optional description text displayed below the title.

      • Optional duration?: number

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

    Returns Promise<void>

showOverlay

  • showOverlay(html, options?): Promise<Disposable>

  • 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.

    Parameters

    • html: string

      HTML content for the overlay.

    • Optional options: {
          duration?: number;
      }
      • Optional duration?: number

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

    Returns Promise<Disposable>

showOverlays

  • showOverlays(): Promise<void>

  • Shows overlays.

    Returns Promise<void>

start

  • start(options?): Promise<Disposable>

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

    Parameters

    • Optional options: {
          annotate?: {
              duration?: number;
              fontSize?: number;
              position?: "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right";
          };
          onFrame?: ((frame) => any);
          path?: string;
          quality?: number;
          size?: {
              height: number;
              width: number;
          };
      }
      • Optional annotate?: {
            duration?: number;
            fontSize?: number;
            position?: "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right";
        }
        • Optional duration?: number
        • Optional fontSize?: number
        • Optional position?: "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right"
      • Optional onFrame?: ((frame) => any)
          • (frame): any

          • Parameters

            • frame: {
                  data: Buffer;
              }
              • data: Buffer

            Returns any

      • Optional path?: string
      • Optional quality?: number
      • Optional size?: {
            height: number;
            width: number;
        }
        • height: number
        • width: number

    Returns Promise<Disposable>

stop

  • stop(): Promise<void>

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

    Returns Promise<void>

Settings

Member Visibility

Theme

On This Page

hideActionshideOverlaysshowActionsshowChaptershowOverlayshowOverlaysstartstop