WebCodecs Examples

Complete, production-ready WebCodecs implementation examples for WebCodecs Fundamentals.

Examples

$3

Full-featured video player demonstrating:
- Play/pause/seek controls with Clock-based timing
- Audio-video synchronization using Web Audio API timeline
- Worker-based video decoding for performance
- WebGPU rendering (GPUFrameRenderer from webcodecs-utils)
- Segment-based audio loading (30s chunks)
- MP4 demuxing with MP4Box

Usage: import { WebCodecsPlayer } from 'webcodecs-examples'
Demo: npm run dev
Source: /src/player

---

$3

Transcode videos with different codecs, resolutions, and quality settings:
- Input: MP4/WebM
- Output: MP4/WebM with custom settings
- Audio pass-through (no re-encoding)
- Progress reporting
- Worker-based for non-blocking UI

Usage: import { VideoTranscoder } from 'webcodecs-examples/transcoding'
Demo: npm run dev:transcoding
Source: /src/transcoding

---

$3

Timeline-based video editing with:
- Cut/trim operations
- Multiple video sources
- Transitions
- Audio mixing

Live Demo: Coming soon
Source: /editing

---

$3

Live video stream ingestion and playback

Live Demo: Coming soon
Source: /live-streaming

---

Purpose

These examples complement the WebCodecs Fundamentals documentation by providing:
- Working code you can study and learn from
- Live demos you can interact with
- Starter templates you can clone for your own projects

The fundamentals docs teach concepts. These examples show production implementation.

Installation

$3

``bash
npm install webcodecs-examples
`

`typescript
import { WebCodecsPlayer } from 'webcodecs-examples';

const player = new WebCodecsPlayer({
src: videoFile,
canvas: document.querySelector('canvas')
});

await player.initialize();
await player.play();
`

$3

`html

`

$3

`bash
git clone https://github.com/sb2702/webcodecs-examples.git
cd webcodecs-examples
npm install
npm run dev # Run player demo
``

Related Projects

- WebCodecs Fundamentals - Learn WebCodecs concepts
- webcodecs-utils - Utility library used in these examples
- MediaBunny - Full-featured WebCodecs library

Browser Support

These examples require:
- Chrome 94+ or Edge 94+ (full support)
- Safari 17.4+ (partial support)

All examples include feature detection and graceful degradation.

Contributing

Contributions welcome! Please:
1. Keep examples focused and production-quality
2. Follow existing code style
3. Include inline comments explaining WebCodecs patterns
4. Test in Chrome, Edge, and Safari

License

MIT

Credits

Built for WebCodecs Fundamentals by Sam Bhattacharyya (@sb2702)

Created by the team at Free.Upscaler.Video