Video Frame Extractor

Screen capture tools grab what your display renders — compressed, scaled to your monitor's DPI, limited by your screen resolution. The AT USE Video Frame Extractor reads the actual encoded frame data from the video file and exports it at the full native resolution of the footage. A 4K source gives you a 3840 × 2160 PNG. A 1080p source gives you 1920 × 1080. No upscaling, no downscaling, no screenshot artefacts. All processing runs locally in your browser via WebCodecs and the Canvas API — the video never leaves your device.

The extractor is built for workflows where the exact frame matters: thumbnail selection for content creators, keyframe documentation for developers and QA teams, forensic review of video evidence, training data extraction for machine learning pipelines. The scrubber lets you navigate frame by frame when precision is needed, or jump to any timestamp when you already know where to look. You can export as PNG for lossless output or as JPEG when file size matters more than exact pixel fidelity.

How to use

1. Upload your video by clicking Choose file or dragging the file onto the upload zone. MP4, MOV, WebM, AVI, and MKV are accepted. Files up to 20 MB are supported — for larger recordings, trim the clip to the region of interest in your video editor first.
2. Navigate to your target frame using the video timeline scrubber. Click anywhere on the timeline to jump to that timestamp, then use the ◀ and ▶ frame-step buttons to advance or rewind one frame at a time. The current timestamp and frame number are shown below the preview.
3. Select output format: PNG for lossless output (preserves every pixel exactly as decoded from the video stream), or JPEG for a smaller file. If selecting JPEG, use the quality slider — 85 is the standard editorial quality setting; values below 70 introduce visible compression artefacts on sharp edges.
4. Click Extract Frame. The browser decodes the selected frame from the video's bitstream using the native WebCodecs decoder, paints it to an off-screen Canvas element at the video's full encoded resolution, and encodes it as your chosen image format.
5. Download the image using the Download Frame button. The filename includes the timestamp by default (e.g., frame_00m15s420ms.png) so extracted frames from the same clip stay sorted when you download multiple.

Technical details

Modern browsers expose video decoding through the WebCodecs API, which provides direct access to compressed video data. The frame extractor uses this to seek to a specific timestamp at the decoder level — rather than playing the video and pausing, it instructs the decoder to jump to the nearest keyframe before the target timestamp and decode forward to the exact requested frame. This produces frame-accurate seeks, whereas play-and-pause approaches are subject to display timing jitter.

Once decoded, the frame is a VideoFrame object in YUV or RGBA colour space. The extractor converts it to an ImageBitmap and draws it to a OffscreenCanvas at the video's displayWidth × displayHeight (which respects the video's SAR — sample aspect ratio — so anamorphic footage is drawn at the correct non-square pixel dimensions). PNG export uses the browser's built-in lossless encoder via canvas.toBlob('image/png'). JPEG export uses canvas.toBlob('image/jpeg', quality) where quality maps to a 0–100 range (stored internally as 0.0–1.0). For H.264 and H.265 sources, the decoder runs natively in hardware on supported devices, making frame extraction fast even from 4K footage.

Use cases

• YouTube and social media creators choosing thumbnails. A creator finishes editing a video and needs a thumbnail that captures a specific expression or moment. Instead of screenshotting a preview at display resolution (compressed, subject to browser zoom level), they upload the export file and step frame by frame through the key moment to get a clean PNG at the full 1920 × 1080 or 4K resolution that the upload forms at YouTube and Instagram require.
• QA engineers documenting visual regressions. A tester is reviewing a recorded browser session and spots a layout glitch that lasts two frames. They upload the session recording, step to the exact frame, and export a lossless PNG that goes directly into the Jira ticket as visual evidence. The frame number and timestamp in the filename make it reproducible: "the bug appears at 00m47s120ms."
• Machine learning data annotation teams. A team building a computer vision model needs labelled still images from dashcam or surveillance footage. They use the frame extractor to pull representative frames at intervals — specific lighting conditions, object positions, edge cases — without running a full video processing pipeline. The lossless PNG output preserves the detail needed for accurate bounding-box annotation.
• Video editors reviewing reference frames. A motion graphics artist needs to match a client's existing footage — colour grade, framing, lighting angle. Extracting a reference frame from the client's video as a PNG lets them use it as a layer in Photoshop or After Effects for colour matching without needing the full video file open.
• Legal and forensic teams preserving video evidence. When a specific frame of a video is relevant as evidence (a timestamp showing a location, a number plate, a face), extracting it as a lossless PNG at the video's native resolution — rather than a JPEG screenshot — preserves all available detail and avoids introducing screenshot compression artefacts that could be challenged as degradation of the original.

FAQ

Why does the extracted frame look different from what I see on my screen when the video is playing?

Several factors can cause this. Display rendering applies colour profiles, HDR tone mapping, and video colour space conversion that vary by monitor and operating system. The raw decoded frame uses the video file's embedded colour space (usually BT.709 for HD content, BT.2020 for HDR). The frame extractor exports what the decoder produces before display colour management is applied — this is typically more accurate for image editing than a screenshot, but may look slightly different from what you see in a media player that applies display-specific colour management.

Can I extract multiple frames at once?

The current version extracts one frame per operation. For bulk extraction — for example every 10th frame across a clip — the better tool is ffmpeg run locally (e.g., ffmpeg -i input.mp4 -vf "select=not(mod(n\,10))" -vsync 0 frame_%04d.png). The browser-based tool prioritises single precision-frame extraction where you know exactly which frame you need.

The frame step buttons skip more than one frame. Is the extractor broken?

No — this happens with variable frame rate (VFR) video, where frame durations are not uniform. Common sources: screen recordings from tools that drop frames when the CPU is busy, action camera footage shot at high speeds with adaptive frame rate, and most phone video. The extractor uses the actual frame timestamps from the video container, so the step size varies to match the real frame positions in the bitstream. At a fixed 30 fps the steps are uniform 33 ms; in a 30 fps VFR recording they may range from 16 ms to 66 ms.

Does the extractor work with HDR (high dynamic range) video?

The frame is decoded and exported in the video file's native colour space. For HDR10 content (BT.2020 PQ), the exported PNG will contain the HDR colour values, which will appear washed out when opened in an SDR image viewer that does not perform HDR-to-SDR tone mapping. If you need a correctly tone-mapped SDR output from HDR footage, process it through ffmpeg with -vf "zscale=t=linear,tonemap=hable,zscale=t=bt709" before extracting frames.