Implementation:Microsoft Playwright VideoRecorder

Overview

VideoRecorder records browser page content as WebM video files using FFmpeg, managing frame timing, encoding pipeline, and graceful shutdown.

Description

The VideoRecorder class launches an FFmpeg subprocess configured for VP8/WebM encoding and writes raw video frames to it via stdin. It manages frame timing to maintain a consistent 25fps output, handles frame duplication for gaps, and provides graceful shutdown with proper FFmpeg cleanup.

Key features:

• Converts JPEG screenshot frames to raw pixel data using jpegjs
• Maintains frame queue with proper timestamp calculation
• Handles last-frame repetition to fill timing gaps
• Configures FFmpeg with optimized VP8 encoding parameters
• Supports graceful close with SIGINT followed by forced termination

Usage

Created by the Screencast class when video recording is enabled for a page.

Code Reference

Source Location

packages/playwright-core/src/server/videoRecorder.ts (186 lines)

Class Signature

export class VideoRecorder {
  constructor(ffmpegPath: string, options: types.VideoOptions)
  async writeFrame(frame: Buffer, timestamp: number): Promise<void>
  async stop(): Promise<void>
}

Import

import { VideoRecorder } from './server/videoRecorder';

I/O Contract

Inputs

• ffmpegPath: string -- path to the FFmpeg binary
• options.outputFile: string -- output file path (must end in .webm)
• options.width/height: number -- video dimensions
• Frame buffers: JPEG-encoded screenshot data with timestamps

Outputs

• WebM video file written to options.outputFile
• VP8-encoded at 25fps with configurable quality settings

Related Pages

• Microsoft_Playwright_Screencast -- Screencast coordinator using VideoRecorder
• Microsoft_Playwright_ProcessLauncher -- Process management for FFmpeg