WebCodecs - Interactive Tool | IconVault

Learn WebCodecs: real codec support matrix, encoder config validator, and a working encode loop snippet. Free, runs in your browser.

All tools

WebCodecs

Video and audio codec support detection with config validation

5 of 5 free uses left

API detection in this browser

Checking…

Codec support matrix

Real isConfigSupported() calls against this browser at 1280x720, 30fps, 5 Mbps. Results vary by OS and hardware, nothing is hard-coded.

  • H.264 Baseline avc1.42001fNot checked
  • H.264 High avc1.640028Not checked
  • VP8 vp8Not checked
  • VP9 vp09.00.10.08Not checked
  • AV1 av01.0.05M.08Not checked
  • HEVC hvc1.1.6.L93.B0Not checked

Audio

  • Opus opusNot checked
  • AAC-LC mp4a.40.2Not checked
  • FLAC flacNot checked

Encoder config validator

Build a config and validate it for real before writing encode code.

5.0 Mbps

Real encode loop

// Minimal real WebCodecs encode loop
const encoder = new VideoEncoder({
  output: (chunk, meta) => {
    // chunk is an EncodedVideoChunk; mux it (e.g. into MP4/WebM) yourself
    console.log(chunk.type, chunk.byteLength, meta);
  },
  error: (e) => console.error(e),
});

encoder.configure({
  codec: "avc1.42001f",
  width: 1280,
  height: 720,
  bitrate: 5_000_000,
  framerate: 30,
});

const frame = new VideoFrame(canvas, { timestamp: 0 }); // from a <canvas>
encoder.encode(frame, { keyFrame: true });
frame.close();
await encoder.flush();
encoder.close();

WebCodecs gives you raw encoded chunks, not a file. Pair it with a muxer (mp4-muxer, webm-muxer) to write playable video.

5 of 5 free checks left.

About this tool

IconVault's WebCodecs playground is a hands-on lab for the browser's low-level media API. It runs real isConfigSupported() checks against your browser for H.264, VP8, VP9, AV1, HEVC, Opus, AAC, and FLAC, so the support matrix reflects your actual hardware and OS instead of a generic table. It is free and runs fully in your browser.

The encoder config validator lets you build a codec, resolution, framerate, and bitrate combo and get a real yes or no before you write encode code. The page also detects every WebCodecs interface (VideoEncoder, VideoDecoder, AudioEncoder, AudioDecoder, VideoFrame) and includes a copy-paste encode loop showing how raw chunks flow out of the encoder.

Frequently asked questions

Popular searches

webcodecswebcodecs tutorialwebcodecs examplevideoencodervideodecoderaudioencoderwebcodecs supportisConfigSupportedwebcodecs browser supportlearn webcodecswebcodecs playgroundwebcodecs demovideo encoder javascriptbrowser video encodingencode video in browserh264 browser supportvp9 browser supportav1 browser supporthevc browser supportopus encoder browseraac browser supportcodec support matrixvideo codec checkercheck codec support javascriptvideoframe apiencodedvideochunkwebcodecs encode loopmux webcodecs chunksmp4 muxer webcodecswebm muxercanvas to video browserrecord canvas webcodecslow latency video webrealtime video processingwebcodecs vs mediarecordermediarecorder vs webcodecshardware encoding browsergpu video encoding webwebcodecs code samplejavascript video encodingfrontend video toolsvideo api playgroundlearn browser apisweb api playgroundmedia capabilities apivideo encoding bitratechoose video codec webavc1 codec stringvp09 codec stringwebcodecs videoframe tutorial

More tools

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →