@web-engine-dev/screenshot

Screenshot and recording utilities for web-engine.

Features

• Screenshots: Capture game frames
• Video Recording: Record gameplay video
• GIF Export: Create animated GIFs
• Thumbnail Generation: Auto-generate thumbnails
• Watermarks: Add branding to captures

Installation

npm install @web-engine-dev/screenshot
# or
pnpm add @web-engine-dev/screenshot

Quick Start

import { Screenshot, VideoRecorder } from '@web-engine-dev/screenshot';

// Take screenshot
const image = await Screenshot.capture(canvas);
Screenshot.download(image, 'screenshot.png');

// Record video
const recorder = new VideoRecorder(canvas);
recorder.start();

// ... gameplay ...

const video = await recorder.stop();
recorder.download(video, 'gameplay.webm');

API Overview

Screenshots

// Basic capture
const image = await Screenshot.capture(canvas);

// With options
const image = await Screenshot.capture(canvas, {
  format: 'png', // 'png', 'jpeg', 'webp'
  quality: 0.9,
  scale: 2, // 2x resolution
});

// Capture with UI overlay
const image = await Screenshot.captureWithOverlay(canvas, uiCanvas);

// Download
Screenshot.download(image, 'screenshot.png');

// Get as data URL
const dataUrl = await Screenshot.toDataURL(canvas);

// Get as Blob
const blob = await Screenshot.toBlob(canvas);

Video Recording

const recorder = new VideoRecorder(canvas, {
  format: 'webm',
  codec: 'vp9',
  bitrate: 5000000, // 5 Mbps
  frameRate: 60,
});

recorder.start();

// Add audio track
recorder.addAudioTrack(audioStream);

// Pause/resume
recorder.pause();
recorder.resume();

// Stop and get video
const video = await recorder.stop();

// Download
recorder.download(video, 'gameplay.webm');

GIF Export

import { GifRecorder } from '@web-engine-dev/screenshot';

const gif = new GifRecorder(canvas, {
  frameRate: 15,
  quality: 10,
  workers: 4,
});

gif.start();

// ... capture ...

const blob = await gif.stop();
gif.download(blob, 'animation.gif');

Thumbnails

const thumb = await Screenshot.thumbnail(canvas, {
  width: 320,
  height: 180,
  format: 'jpeg',
  quality: 0.8,
});