WebCodecs - Interactive Tool | IconVault
Learn WebCodecs: real codec support matrix, encoder config validator, and a working encode loop snippet. Free, runs in your browser.
WebCodecs
Video and audio codec support detection with config validation
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.
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
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
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