Can a browser encode 4K video?

An H.264 level caps the resolution it is allowed to encode, and the encoder rejects a configuration that exceeds it rather than degrading. Level 4.2 tops out around 1080p. For 4K you need 5.1.

In practice that means choosing the codec string from the frame size before configuring anything.

const codec = W > 1920 || H > 1920
  ? "avc1.640033"   // level 5.1, covers 4K
  : "avc1.640029";  // level 4.2, up to 1080p

await VideoEncoder.isConfigSupported({
  codec, width: W, height: H, bitrate, framerate: 30,
});

isConfigSupported is worth calling before you commit to the path, because the answer differs by machine and by browser, and the fallback needs to be chosen before the user has waited.

Flat vector artwork compresses well, so the numbers can be lower than video footage would need. 40 Mbps at 4K, 20 at 1440p and 12 at 1080p produce clean edges on line art. Push lower and thin construction lines are the first thing to go mushy, because they are exactly the high frequency detail a codec throws away first.

The trap is recording in real time. If the encoder is fed from a live clock and one frame takes too long, that frame is dropped and the stutter is baked into the file permanently.

Rendering frame by frame and timestamping each one at its position in the sequence means a slow machine takes longer to export and produces the same file as a fast one. Every frame lands. This is the single biggest quality difference between a canvas recording and an encode.

MediaRecorder is the fallback and it is genuinely worse: it records in real time, so it inherits the dropped frame problem, and it usually produces WebM rather than MP4. It is still better than failing, and worth keeping for the browsers that need it.