Skip to content

README.md

Latest commit

 

History

History
127 lines (97 loc) · 3.81 KB

README.md

File metadata and controls

127 lines (97 loc) · 3.81 KB

Examples

Practical examples demonstrating webcodecs-node features.

Prerequisites

Build the project first:

npm run build

Running Examples

Use npx tsx to run TypeScript examples directly:

npx tsx examples/video-encoding.ts
npx tsx examples/video-decoding.ts
npx tsx examples/audio-encoding.ts
npx tsx examples/image-decoding.ts
npx tsx examples/transparent-video.ts
npx tsx examples/streaming.ts
npx tsx examples/hardware-encoding.ts
npx tsx examples/hardware-decoding.ts
npx tsx examples/canvas-encoding.ts
npx tsx examples/offscreen-canvas.ts

Examples

video-encoding.ts

Basic video encoding with H.264. Demonstrates:

  • Creating a VideoEncoder
  • Configuring codec, bitrate, and framerate
  • Encoding VideoFrames from raw RGBA data
  • Handling keyframes

video-decoding.ts

Video decoding back to raw frames. Demonstrates:

  • Encoding frames to get sample chunks
  • Creating a VideoDecoder
  • Decoding EncodedVideoChunks back to VideoFrames

audio-encoding.ts

Audio encoding with Opus. Demonstrates:

  • Creating an AudioEncoder
  • Configuring sample rate, channels, and bitrate
  • Encoding AudioData from float32 samples
  • Generating sine wave test audio

image-decoding.ts

Image decoding including animated formats. Demonstrates:

  • Checking format support with isTypeSupported
  • Decoding PNG, JPEG, GIF, WebP images
  • Accessing frame timing for animated images
  • Using ImageTrackList for animation info

transparent-video.ts

VP9 encoding with alpha channel. Demonstrates:

  • Configuring alpha: 'keep' for transparency
  • Creating frames with varying alpha values
  • Comparing file sizes with/without alpha

streaming.ts

Real-time vs quality encoding comparison. Demonstrates:

  • Using latencyMode: 'realtime' for streaming
  • Using latencyMode: 'quality' for best compression
  • Measuring encode time and output size differences

hardware-encoding.ts

GPU-accelerated encoding. Demonstrates:

  • Detecting available hardware acceleration (VAAPI, NVENC, QSV)
  • Using hardwareAcceleration: 'prefer-hardware'
  • Benchmarking hardware vs software encoding
  • Getting the best encoder for a codec

hardware-decoding.ts

GPU-accelerated decoding. Demonstrates:

  • Detecting available hardware decoders (VAAPI, NVDEC, QSV)
  • Using hardwareAcceleration: 'prefer-hardware' for decoding
  • Benchmarking hardware vs software decoding
  • Real-time decoding capability analysis

canvas-encoding.ts

GPU-accelerated canvas rendering with skia-canvas. Demonstrates:

  • GPU acceleration detection (Metal/Vulkan/D3D)
  • Creating GPU-accelerated canvas with createCanvas()
  • Using FrameLoop with backpressure for smooth encoding
  • Animated canvas drawing with gradients and shapes
  • Proper memory lifecycle (frame closing)
  • Real-time encoding speed measurement

offscreen-canvas.ts

Browser-compatible OffscreenCanvas API. Demonstrates:

  • Using OffscreenCanvasPolyfill (matches browser API)
  • Installing polyfill globally with installOffscreenCanvasPolyfill()
  • ImageDataPolyfill with Uint8ClampedArray
  • createPixelBuffer() utilities for pixel manipulation
  • convertToBlob() for PNG/JPEG/WebP export
  • validateEvenDimensions() for YUV420 compatibility
  • Direct VideoFrame creation from OffscreenCanvas

Additional Demos

The demos/ folder contains more complete demos that can be run via npm scripts:

npm run demo:webcodecs      # Basic WebCodecs demo
npm run demo:image          # Image decoding demo
npm run demo:streaming      # Streaming comparison
npm run demo:hwaccel        # Hardware acceleration detection
npm run demo:fourcorners    # Video quadrant compositor
npm run demo:containers     # Container demuxing/muxing
npm run demo:1080p          # 1080p transcoding benchmark
npm run demo:dvd            # Bouncing DVD logo animation
npm run demo:visualizer     # Audio visualizer with waveform