webcodecs-node 0.5.1 → 0.7.0

package/examples/offscreen-canvas.ts

@@ -0,0 +1,230 @@
+/**
+ * OffscreenCanvas Example
+ *
+ * Demonstrates using the OffscreenCanvas polyfill for browser-compatible
+ * canvas code in Node.js. This makes porting browser code trivial.
+ *
+ * Features shown:
+ * - OffscreenCanvasPolyfill (browser API compatible)
+ * - ImageDataPolyfill with Uint8ClampedArray
+ * - createPixelBuffer utilities
+ * - convertToBlob for image export
+ * - VideoFrame integration
+ *
+ * Run: npx tsx examples/offscreen-canvas.ts
+ */
+
+import {
+  VideoEncoder,
+  VideoFrame,
+  EncodedVideoChunk,
+} from '../src/index.js';
+
+import {
+  OffscreenCanvasPolyfill,
+  ImageDataPolyfill,
+  installOffscreenCanvasPolyfill,
+} from '../src/polyfills/OffscreenCanvas.js';
+
+import {
+  createPixelBuffer,
+  createPixelBufferWithColor,
+  ensureEvenDimensions,
+  validateEvenDimensions,
+} from '../src/canvas/index.js';
+
+import { writeFileSync } from 'fs';
+
+async function main() {
+  console.log('=== OffscreenCanvas Polyfill Demo ===\n');
+
+  // ============================================
+  // 1. Install Polyfill Globally (Optional)
+  // ============================================
+  // This makes OffscreenCanvas available globally like in browsers
+  installOffscreenCanvasPolyfill();
+  console.log('Polyfill installed globally');
+  console.log(`  globalThis.OffscreenCanvas: ${typeof (globalThis as any).OffscreenCanvas}`);
+  console.log(`  globalThis.ImageData: ${typeof (globalThis as any).ImageData}`);
+  console.log(`  globalThis.VideoFrame: ${typeof (globalThis as any).VideoFrame}`);
+
+  // ============================================
+  // 2. Create OffscreenCanvas (Browser-Style)
+  // ============================================
+  console.log('\n=== Creating OffscreenCanvas ===\n');
+
+  const { width, height } = ensureEvenDimensions(640, 480);
+  const canvas = new OffscreenCanvasPolyfill(width, height);
+
+  console.log(`Canvas created: ${canvas.width}x${canvas.height}`);
+  console.log(`GPU enabled: ${canvas.gpu}`);
+
+  // Get 2D context (just like in browser)
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    throw new Error('Failed to get 2D context');
+  }
+
+  // ============================================
+  // 3. Draw on Canvas
+  // ============================================
+  console.log('\n=== Drawing ===\n');
+
+  // Background
+  ctx.fillStyle = '#1a1a2e';
+  ctx.fillRect(0, 0, width, height);
+
+  // Gradient rectangle
+  const gradient = ctx.createLinearGradient(50, 50, 250, 250);
+  gradient.addColorStop(0, '#e94560');
+  gradient.addColorStop(1, '#0f3460');
+  ctx.fillStyle = gradient;
+  ctx.fillRect(50, 50, 200, 200);
+
+  // Circle
+  ctx.beginPath();
+  ctx.arc(450, 200, 100, 0, Math.PI * 2);
+  ctx.fillStyle = '#16213e';
+  ctx.fill();
+  ctx.strokeStyle = '#e94560';
+  ctx.lineWidth = 4;
+  ctx.stroke();
+
+  // Text
+  ctx.fillStyle = 'white';
+  ctx.font = 'bold 32px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('OffscreenCanvas', width / 2, height - 80);
+
+  ctx.font = '20px sans-serif';
+  ctx.fillStyle = '#888';
+  ctx.fillText('Node.js + skia-canvas', width / 2, height - 50);
+
+  console.log('Drawing complete');
+
+  // ============================================
+  // 4. Export to Blob (PNG, JPEG, WebP)
+  // ============================================
+  console.log('\n=== Export to Blob ===\n');
+
+  // PNG export
+  const pngBlob = await canvas.convertToBlob({ type: 'image/png' });
+  console.log(`PNG: ${pngBlob.size} bytes, type: ${pngBlob.type}`);
+
+  // JPEG export with quality
+  const jpegBlob = await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.8 });
+  console.log(`JPEG: ${jpegBlob.size} bytes, type: ${jpegBlob.type}`);
+
+  // WebP export
+  const webpBlob = await canvas.convertToBlob({ type: 'image/webp', quality: 0.85 });
+  console.log(`WebP: ${webpBlob.size} bytes, type: ${webpBlob.type}`);
+
+  // ============================================
+  // 5. ImageData Operations
+  // ============================================
+  console.log('\n=== ImageData Operations ===\n');
+
+  // Create empty ImageData
+  const imageData = new ImageDataPolyfill(100, 100);
+  console.log(`Empty ImageData: ${imageData.width}x${imageData.height}`);
+  console.log(`Data type: ${imageData.data.constructor.name}`);
+  console.log(`Data length: ${imageData.data.length} bytes`);
+  console.log(`Color type: ${imageData.colorType} (for skia-canvas)`);
+
+  // Fill with gradient using direct pixel manipulation
+  for (let y = 0; y < imageData.height; y++) {
+    for (let x = 0; x < imageData.width; x++) {
+      const idx = (y * imageData.width + x) * 4;
+      imageData.data[idx] = (x * 255) / imageData.width; // R
+      imageData.data[idx + 1] = (y * 255) / imageData.height; // G
+      imageData.data[idx + 2] = 128; // B
+      imageData.data[idx + 3] = 255; // A
+    }
+  }
+
+  // Draw ImageData to canvas
+  ctx.putImageData(imageData as any, 270, 280);
+  console.log('ImageData drawn to canvas');
+
+  // ============================================
+  // 6. Pixel Buffer Utilities
+  // ============================================
+  console.log('\n=== Pixel Buffer Utilities ===\n');
+
+  // Create empty buffer
+  const emptyBuffer = createPixelBuffer(64, 64);
+  console.log(`createPixelBuffer(64, 64): ${emptyBuffer.length} bytes`);
+  console.log(`Type: ${emptyBuffer.constructor.name}`);
+
+  // Create solid color buffer
+  const redBuffer = createPixelBufferWithColor(64, 64, 255, 0, 0);
+  console.log(`createPixelBufferWithColor (red): first pixel = [${redBuffer[0]}, ${redBuffer[1]}, ${redBuffer[2]}, ${redBuffer[3]}]`);
+
+  // Demonstrate Uint8ClampedArray auto-clamping
+  const testBuffer = createPixelBuffer(1, 1);
+  testBuffer[0] = 300; // Will be clamped to 255
+  testBuffer[1] = -50; // Will be clamped to 0
+  console.log(`Auto-clamping: 300 -> ${testBuffer[0]}, -50 -> ${testBuffer[1]}`);
+
+  // ============================================
+  // 7. Dimension Validation
+  // ============================================
+  console.log('\n=== Dimension Validation ===\n');
+
+  // ensureEvenDimensions rounds up
+  const dims = ensureEvenDimensions(1279, 719);
+  console.log(`ensureEvenDimensions(1279, 719) = ${dims.width}x${dims.height}`);
+
+  // validateEvenDimensions throws for odd dimensions
+  try {
+    validateEvenDimensions(1279, 720);
+  } catch (err: any) {
+    console.log(`validateEvenDimensions(1279, 720) threw: "${err.message.split('.')[0]}..."`);
+  }
+
+  // ============================================
+  // 8. VideoFrame Integration
+  // ============================================
+  console.log('\n=== VideoFrame Integration ===\n');
+
+  // Create VideoFrame directly from OffscreenCanvas
+  const frame = new VideoFrame(canvas as any, {
+    timestamp: 0,
+  });
+
+  console.log(`VideoFrame from OffscreenCanvas:`);
+  console.log(`  Size: ${frame.displayWidth}x${frame.displayHeight}`);
+  console.log(`  Format: ${frame.format}`);
+  console.log(`  Timestamp: ${frame.timestamp}`);
+
+  // Use with encoder
+  const chunks: EncodedVideoChunk[] = [];
+  const encoder = new VideoEncoder({
+    output: (chunk) => chunks.push(chunk),
+    error: console.error,
+  });
+
+  encoder.configure({
+    codec: 'avc1.42001f',
+    width,
+    height,
+    bitrate: 2_000_000,
+    framerate: 30,
+  });
+
+  encoder.encode(frame, { keyFrame: true });
+  frame.close();
+
+  await encoder.flush();
+  encoder.close();
+
+  console.log(`Encoded to ${chunks.length} chunk(s), ${chunks[0].byteLength} bytes`);
+
+  // ============================================
+  // 9. Save Sample Output
+  // ============================================
+  console.log('\n=== Done ===\n');
+  console.log('OffscreenCanvas polyfill provides full browser API compatibility!');
+}
+
+main().catch(console.error);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "webcodecs-node",
-  "version": "0.5.1",
-  "description": "WebCodecs API implementation for Node.js using FFmpeg",
+  "version": "0.7.0",
+  "description": "WebCodecs API implementation for Node.js using node-av",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -38,7 +38,12 @@
     "demo:samples": "node dist/demos/demo-samples.js",
     "demo:fourcorners": "node dist/demos/demo-four-corners.js",
     "demo:containers": "node dist/demos/demo-containers.js",
-    "demo:1080p": "node dist/demos/demo-1080p-transcode.js"
+    "demo:1080p": "node dist/demos/demo-1080p-transcode.js",
+    "demo:dvd": "node dist/demos/demo-dvd-logo.js",
+    "demo:visualizer": "node dist/demos/demo-audio-visualizer.js",
+    "bench": "node scripts/encoding-benchmark.mjs",
+    "bench:quick": "node scripts/encoding-benchmark.mjs --frames 30 --resolution 360p",
+    "bench:full": "node scripts/encoding-benchmark.mjs --frames 300 --resolution 1080p"
   },
   "keywords": [
     "webcodecs",
@@ -73,7 +78,8 @@
   "homepage": "",
   "dependencies": {
     "node-av": "^5.0.2",
-    "sharp": "^0.32.6"
+    "node-webpmux": "^3.2.1",
+    "skia-canvas": "^2.0.2"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",