@browserless/screencast

@browserless/screencast: Browserless video recording using puppeteer.

See the screencast section on our website for more information.

Install

Using npm:

npm install @browserless/screencast --save

About

This package provides frame-by-frame video capture from browser page navigation using the Chrome DevTools Protocol. It allows you to capture individual frames during page interactions for creating GIFs, videos, or frame-by-frame analysis.

What this package does

The @browserless/screencast package allows you to:

• Capture frames during browser navigation and interactions
• Control recording with start/stop methods
• Process frames individually via callback functions
• Configure quality and format for captured frames
• Create animations like GIFs from captured frames

Usage

const createScreencast = require('@browserless/screencast')
const createBrowser = require('browserless')

const browser = createBrowser()
const browserless = await browser.createContext()
const page = await browserless.page()

// Create screencast instance
const screencast = createScreencast(page, { 
  maxWidth: 1280, 
  maxHeight: 800 
})

// Collect frames
const frames = []
screencast.onFrame((data, metadata) => {
  frames.push({ data, metadata })
})

// Record during navigation
screencast.start()
await browserless.goto(page, { url: 'https://example.com' })
await screencast.stop()

console.log(`Captured ${frames.length} frames`)

API

createScreencast(page, options)

Creates a screencast instance for the given Puppeteer page.

Returns an object with:

Options

Options are passed to Page.startScreencast after applying these package defaults:

Frame callback

The onFrame callback receives two arguments:

screencast.onFrame((data, metadata) => {
  // data: base64-encoded image string
  // metadata: { timestamp, ... }
})

If the callback returns a promise, the next CDP frame is acknowledged after that promise settles. Use this to apply backpressure when writing frames to a slow stream or encoder.

Examples

Create a GIF from navigation

const { GifEncoder } = require('@skyra/gifenc')
const { createCanvas, Image } = require('canvas')
const sharp = require('sharp')

const width = 640
const height = 400

const canvas = createCanvas(width, height)
const ctx = canvas.getContext('2d')
const encoder = new GifEncoder(width, height)

const screencast = createScreencast(page, { 
  maxWidth: width, 
  maxHeight: height 
})

screencast.onFrame(async data => {
  const frame = Buffer.from(data, 'base64')
  const buffer = await sharp(frame).resize({ width, height }).toBuffer()
  
  const img = new Image()
  img.src = buffer
  ctx.drawImage(img, 0, 0)
  encoder.addFrame(ctx)
})

encoder.start()
screencast.start()

await browserless.goto(page, { url: 'https://example.com' })

encoder.finish()
await screencast.stop()

Capture specific frames

const screencast = createScreencast(page, {
  format: 'png',
  quality: 100,
  everyNthFrame: 5  // Capture every 5th frame
})

screencast.onFrame((data, metadata) => {
  console.log(`Frame at ${metadata.timestamp}`)
  // Save or process the frame
})

Save frames to disk

const fs = require('fs/promises')

let frameCount = 0

screencast.onFrame(async data => {
  const buffer = Buffer.from(data, 'base64')
  await fs.writeFile(`frame-${frameCount++}.jpg`, buffer)
})

screencast.start()
await page.goto('https://example.com')
await screencast.stop()

How it fits in the monorepo

This is an extended functionality package for video/animation capture:

Dependencies

License

@browserless/screencast © Microlink, released under the MIT License.
Authored and maintained by Microlink with help from contributors.

The logo has been designed by xinh studio.

microlink.io · GitHub microlinkhq · X @microlinkhq