WebCodecs Video Frame Reader

The WebCodecs Video Frame Reader is a browser-based tool that lets you decode and inspect individual frames from video files. It leverages modern browser APIs — including the WebCodecs VideoDecoder, requestVideoFrameCallback, and VideoFrame — to provide precise frame-level access without requiring server-side processing. You can step through frames, view detailed metadata, and export frames as PNG images.

The WebCodecs API is supported in Google Chrome 94+, Microsoft Edge 94+, and Opera 80+. Firefox and Safari have limited or experimental support. Our tool gracefully falls back to using the HTML5 <video> element + Canvas for rendering when WebCodecs is unavailable, ensuring broad compatibility. Key features like requestVideoFrameCallback work in Chrome 83+.

Supported formats depend on your browser's codec support. Generally, MP4 (H.264/AAC), WebM (VP8/VP9), and MOV files work well. Chrome supports H.264, VP8, VP9, and AV1. For HEVC/H.265, support varies by platform. The tool reads the video container and uses the browser's built-in decoder, so any format your browser can play natively will work for frame extraction.

Frame navigation accuracy depends on the video's encoding structure. For videos with all keyframes (I-frames), navigation is exact. For videos with P-frames and B-frames, the browser may seek to the nearest keyframe and decode forward. Our tool uses seekToNextFrame() when available (Chrome with experimental flags) for pixel-accurate frame stepping. The displayed frame always reflects what the browser decoder produces at that timestamp.

Yes! Click the "Export PNG" button or press S to download the current frame at its original video resolution. The export uses the canvas element's full-resolution buffer, preserving every pixel. For 4K videos, exported frames are 3840×2160 PNG files. You can also use the "Copy" button to copy the frame to your clipboard for pasting into image editors.

The tool attempts to detect FPS through multiple methods: (1) using the getVideoPlaybackQuality() API to measure total decoded frames divided by duration, (2) analyzing requestVideoFrameCallback timing intervals, and (3) reading video metadata when available. If detection is uncertain, it defaults to 30 FPS. You can verify accuracy by stepping through and checking if frame increments align with your video's known frame rate.

No. All processing happens entirely in your browser. The video file is loaded locally using the File API and decoded by your browser's built-in codecs. No data is ever sent to any server. This tool is completely privacy-preserving — you can use it offline after the page loads. Your videos remain on your device at all times.

Traditional methods use videoElement.currentTime + canvas.drawImage(), which relies on the browser's media pipeline and may not give frame-accurate results. WebCodecs provides low-level access to the video decoder, allowing you to feed encoded chunks and receive decoded VideoFrame objects with exact timestamps, duration, and pixel format metadata. This enables precise frame selection, color space awareness, and better performance for applications like video editing and analysis.