# WebCodecs Fundamentals

> WebCodecs API tutorials, production code patterns, and the world's largest codec support dataset. Learn browser-based video encoding, decoding, transcoding, and playback.

Each link below is a clean Markdown version of a documentation page. For any page, replace the trailing `/` in its URL with `.md` to get its Markdown.

## Start here

- [WebCodecs Tutorial - Complete Guide to the WebCodecs API](https://webcodecsfundamentals.org/index.md): A comprehensive WebCodecs tutorial - learn VideoDecoder, VideoEncoder, audio processing, transcoding and playback patterns. Includes real-world codec support data referenced by MDN, CanIuse, and Chrome Developers.

## Introduction

- [What are Codecs?](https://webcodecsfundamentals.org/intro/what-are-codecs.md): Learn what video codecs are, how encoding and decoding work, and why codec choice is critical for web video applications built with WebCodecs.
- [What is WebCodecs?](https://webcodecsfundamentals.org/intro/what-is-webcodecs.md): A complete introduction to the WebCodecs API - VideoDecoder, VideoEncoder, VideoFrame, and EncodedVideoChunk. The starting point for browser-based video processing.
- [Why Use WebCodecs?](https://webcodecsfundamentals.org/intro/why-use-webcodecs.md): WebCodecs use cases: browser-based video editing, transcoding, live streaming, and programmatic video generation - with no server costs.
- [Why WebCodecs is harder than it looks](https://webcodecsfundamentals.org/intro/reality-check.md): Why WebCodecs is harder than it looks

## Core Concepts

- [CPU vs GPU](https://webcodecsfundamentals.org/concepts/cpu-vs-gpu.md): Understanding ImageData vs VideoFrame
- [Offscreen Processing](https://webcodecsfundamentals.org/concepts/threading.md): Main thread vs workers and transferable objects
- [A primer on the Streams API](https://webcodecsfundamentals.org/concepts/streams.md): Understanding ReadableStreams, WritableStreams, and TransformStreams for video processing
- [File Handling](https://webcodecsfundamentals.org/concepts/file-handling.md): Streams, buffers, and file system handles

## Basics

- [VideoFrame](https://webcodecsfundamentals.org/basics/video-frame.md): The WebCodecs VideoFrame: raw pixel data plus timestamp metadata, pixel formats like RGBA, I420 and NV12, how to get frames, how to use them, and why you must close() them.
- [EncodedVideoChunk](https://webcodecsfundamentals.org/basics/encoded-video-chunk.md): The WebCodecs EncodedVideoChunk: the compressed form of a VideoFrame, key frames vs delta frames, why chunks aren't a video file without muxing, and how to get and use them.
- [Muxing and Demuxing](https://webcodecsfundamentals.org/basics/muxing.md): How to mux and demux video in the browser with WebCodecs - working with MP4, WebM containers and choosing the right demuxing library.
- [Codecs](https://webcodecsfundamentals.org/basics/codecs.md): Understanding WebCodecs codec strings - AVC, HEVC, VP9, AV1 formats, how to generate valid codec strings, and choosing the right codec for your use case.
- [VideoDecoder](https://webcodecsfundamentals.org/basics/decoder.md): How to use the WebCodecs VideoDecoder API - configuration, the decoding loop, buffer management, flush behavior, and production pipeline patterns.
- [VideoEncoder](https://webcodecsfundamentals.org/basics/encoder.md): How to use the WebCodecs VideoEncoder API - configuration, encode settings, queue management, keyframe control, and production patterns.
- [Rendering](https://webcodecsfundamentals.org/basics/rendering.md): Different rendering options

## Audio

- [Intro to Audio](https://webcodecsfundamentals.org/audio/intro.md): Introduction to audio processing with WebCodecs - AudioEncoder, AudioDecoder, AudioData, and how to build audio pipelines alongside video.
- [AudioData](https://webcodecsfundamentals.org/audio/audio-data.md): Understanding the WebCodecs AudioData interface - working with raw audio samples, format conversion, and memory management.
- [EncodedAudioChunk](https://webcodecsfundamentals.org/audio/encoded-audio-chunk.md): Understanding EncodedAudioChunk in WebCodecs - the data type for encoded audio, timestamps, duration, and how it fits into the audio encoding/decoding pipeline.
- [Decoding & Encoding](https://webcodecsfundamentals.org/audio/decoding-encoding.md): Encoding and decoding audio
- [WebAudio Playback](https://webcodecsfundamentals.org/audio/web-audio.md): How to play audio in the browser with WebAudio
- [MP3](https://webcodecsfundamentals.org/audio/mp3.md): How to encode MP3

## Design Patterns

- [Main use cases for WebCodecs](https://webcodecsfundamentals.org/patterns/use-cases.md): Common WebCodecs use cases: video playback, transcoding, editing, live streaming, and programmatic video generation - with architecture guidance for each.
- [How to build a Video Player in WebCodecs](https://webcodecsfundamentals.org/patterns/playback.md): High level architectural explanation of how to build a video player in WebCodecs
- [How to transcode video with WebCodecs](https://webcodecsfundamentals.org/patterns/transcoding.md): A comprehensive guide to transcoding video in the browser with WebCodecs - building encoder/decoder pipelines, managing streams, and handling edge cases.
- [Streaming video with WebCodecs](https://webcodecsfundamentals.org/patterns/live-streaming.md): How to live stream with WebCodecs and Media over Quic (MoQ)

## Datasets

- [AV1, H265 support in 2026: Data from 7M+ devices](https://webcodecsfundamentals.org/datasets/codec-analysis-2026.md): Empirical analysis of AV1, HEVC, VP9, and H.264 support across 7.6 million real-world browser sessions. Key findings: AV1+HEVC covers 99.6% for decode, VP9 is as universal as H.264, and the 10-bit encoding wall affects every codec family.
- [WebCodecs Codec Support Table](https://webcodecsfundamentals.org/datasets/codec-support-table.md): Real-world WebCodecs codec support across browsers and platforms - 1,087 codec strings tested across 7.7M user sessions. Find which codecs work in Chrome, Safari, Firefox, and Edge.
- [Codec Support Dataset](https://webcodecsfundamentals.org/datasets/codec-support.md): The world's first empirical registry of WebCodecs hardware support, collected from 7,655,853 real-world user sessions

## Ecosystem

- [Mediabunny - ffmpeg for the web](https://webcodecsfundamentals.org/projects/media-bunny.md): Mediabunny, "ffmpeg for the web": a library built on WebCodecs that handles muxing, demuxing, transcoding and decoding through simple Input and Output objects instead of raw encoders and decoders.
- [Media over Quic - Low-latency streaming protocol](https://webcodecsfundamentals.org/projects/moq.md): How Media over Quic enables WebCodecs streaming

## Reference

- [About WebCodecs Fundamentals](https://webcodecsfundamentals.org/reference/about.md): Why this site exists and who built it
- [Sources & References](https://webcodecsfundamentals.org/reference/sources.md): Key references and resources used throughout this documentation
- [Inside Jokes](https://webcodecsfundamentals.org/reference/inside-jokes.md): Explanations of the hidden references and inside jokes throughout this site

## More pages

- [An Intro to Mediabunny](https://webcodecsfundamentals.org/media-bunny/intro.md): An introduction to Mediabunny's API: working with Inputs and Outputs instead of VideoEncoder and VideoDecoder, plus a concrete decoding example.

## Optional

- [Complete documentation](https://webcodecsfundamentals.org/llms-full.txt): every page above in a single file