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: {
          cursor?: "none" | "pointer";
          duration?: number;
          fontSize?: number;
          position?: "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right";
          style?: {
              highlight?: string;
              point?: string;
              title?: string;
          };
      }
      • Optional cursor?: "none" | "pointer"

        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.

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

        Deprecated

        Use title in style instead, for example style: { title: 'font-size: 32px' }.

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

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

      • Optional style?: {
            highlight?: string;
            point?: string;
            title?: string;
        }

        Styles of the action decorations. All decorations fade out over duration.

        Usage

        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',
          },
        });
        • Optional highlight?: string

          CSS declarations for the box that covers the target element. The box is positioned and sized to the element bounds. Not shown when omitted.

        • Optional point?: string

          CSS declarations for the marker at the action point. The marker is positioned at the action point, has zero size and is centered on the point, so its size and look come from this style. Not shown when omitted.

        • Optional title?: string

          CSS declarations for the action title, for example 'font-size: 32px; background: #333'. The title is placed according to position.

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

    Parameters

    • Optional options: {
          fps?: number;
          onFrame?: ((frame) => any);
          path?: string;
          quality?: number;
          size?: {
              height: number;
              width: number;
          };
      }
      • Optional fps?: number
      • Optional onFrame?: ((frame) => any)
          • (frame): any

          • Parameters

            • frame: {
                  data: Buffer;
                  timestamp: number;
                  viewportHeight: number;
                  viewportWidth: number;
              }
              • data: Buffer
              • timestamp: number
              • viewportHeight: number
              • viewportWidth: number

            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