WebCodecs Examples

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

Examples

🎬 Video Player (available)

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

🔄 Video Transcoding (available)

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

✂️ Video Editing (planned)

Timeline-based video editing with:

• Cut/trim operations
• Multiple video sources
• Transitions
• Audio mixing

Live Demo: Coming soon Source: /editing

📡 Live Streaming (planned)

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

As an npm package

npm install webcodecs-examples

import { WebCodecsPlayer } from 'webcodecs-examples';

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

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

Via CDN

<script type="module">
  import { WebCodecsPlayer } from 'https://esm.sh/webcodecs-examples';
  // Use WebCodecsPlayer...
</script>

Clone and run locally

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