The missing manual for WebCodecs - comprehensive documentation, production patterns, and real-world datasets for building browser-based video applications.
🌐 Live site: webcodecsfundamentals.org
WebCodecs Fundamentals is the authoritative resource for building production WebCodecs applications. Unlike fragmented W3C specs and outdated blog posts, this provides:
- Complete documentation - From basics to advanced production patterns
- Real-world datasets - Empirical codec support data from 221k+ user sessions
- Working examples - Production-tested code you can actually use
- Best practices - Patterns that work at scale
- Introduction - Why WebCodecs and when to use it
- Basics - VideoEncoder, VideoDecoder, and core APIs
- Concepts - CPU vs GPU memory, threading, file handling
- Patterns - Production-tested design patterns for:
- Video playback
- Transcoding pipelines
- Live streaming
- Frame-by-frame processing
- Performance - Zero-copy rendering, memory management, optimization
- Audio - AudioEncoder, AudioDecoder, and audio processing
- Troubleshooting - Common issues and debugging
The upscaler.video Codec Support Dataset
The world's first empirical registry of WebCodecs hardware support:
- 71.3+ million codec tests
- 224,360 unique user sessions
- 1,087 codec variants tested
- 5 major browsers × 5 platforms
Interactive demos hosted at webcodecsfundamentals.org:
- Transcoding Pipeline - Complete transcode example using Streams API
- Codec String Generation - Generate valid codec strings
- Media Bunny Demos - Production demuxing/muxing examples
Real-world applications built with these patterns:
- free.upscaler.video - Open-source video upscaling tool (architecture)
- Katana.video - Professional podcast editor (technical overview)
Found an issue, error, or have a suggestion?
- Report issues: Open an issue
- Submit corrections: Create a pull request
- Contact: [email protected]
- Fork this repository
- Create a new branch (
git checkout -b feature/my-feature) - Make your changes to markdown files in
src/content/docs/ - Test locally with
npm run dev - Commit your changes (
git commit -am 'Add new content') - Push to your branch (
git push origin feature/my-feature) - Open a Pull Request
All contributions must follow the existing documentation style and include working code examples where applicable.
src/content/docs/
├── intro/ # Introduction and "Why WebCodecs?"
├── basics/ # VideoEncoder, VideoDecoder, codec strings
├── concepts/ # Core concepts (memory, threading, file handling)
├── patterns/ # Design patterns (playback, transcoding, streaming)
├── performance/ # Optimization techniques
├── audio/ # Audio processing with WebCodecs
├── datasets/ # Codec support dataset and registry
├── projects/ # Ecosystem projects (Mediabunny, etc.)
├── reference/ # About, sources, inside jokes
└── troubleshooting/ # Debugging and common issues
Built with Astro Starlight.
- Node.js 18+
- npm or pnpm
# Install dependencies
npm install
# Start dev server (http://localhost:4321)
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewMIT License - see LICENSE for details.
Content is freely available for educational and commercial use with attribution.
Created by Sam Bhattacharyya based on years of building production WebCodecs applications. Special thanks to the 200,000+ users of free.upscaler.video who contributed to the codec support dataset.