remotion-dev/remotion · error · Error

${label} encoding is not supported at ${size.width}×${size.h

Error message

${label} encoding is not supported at ${size.width}×${size.height} in this browser. Reduce the scale or select a smaller area.

What it means

`assertCanEncodeCapture` delegates to `canEncodeCapture`, which calls Mediabunny's `canEncodeVideo` for 'avc' (mp4) or 'vp9' (webm) at the given width/height with realtime latency and high quality. If the codec is not encodable at that resolution in the current browser, it throws with the codec label and dimensions, advising a smaller scale/area.

Source

Thrown at packages/canvas-capture-extension/src/recorder.ts:208

) => {
	const {canEncodeVideo, QUALITY_HIGH} = await import('mediabunny');
	return canEncodeVideo(format === 'mp4' ? 'avc' : 'vp9', {
		width,
		height,
		...getVideoEncodingOptions(QUALITY_HIGH),
	});
};

export const assertCanEncodeCapture = async (
	format: CaptureFormat,
	size: {readonly width: number; readonly height: number},
) => {
	if (await canEncodeCapture(format, size)) {
		return;
	}

	const label = format === 'mp4' ? 'H.264 MP4' : 'VP9 WebM';
	throw new Error(
		`${label} encoding is not supported at ${size.width}×${size.height} in this browser. Reduce the scale or select a smaller area.`,
	);
};

const setCanvasSize = (
	canvas: HTMLCanvasElement | OffscreenCanvas,
	scaledWidth: number,
	scaledHeight: number,
) => {
	if (canvas.width !== scaledWidth) {
		canvas.width = scaledWidth;
	}

	if (canvas.height !== scaledHeight) {
		canvas.height = scaledHeight;
	}
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce the density/scale factor so the effective encode dimensions fall within codec limits.
2. Select a smaller capture area.
3. Switch format (mp4 <-> webm) to find a codec the browser supports.
4. Call `canEncodeCapture(format, size)` yourself before starting to probe support.

Example fix

// before
await assertCanEncodeCapture('mp4', {width: 7680, height: 4320});

// after
const scale = await pickScaleFitting('mp4', area);
await assertCanEncodeCapture('mp4', scale);

import {canEncodeCapture} from './recorder';
async function pickSize(format: 'mp4'|'webm', max: {width:number;height:number}) {
  for (const s of [max, half(max), quarter(max)]) {
    if (await canEncodeCapture(format, s)) return s;
  }
  throw new Error('No supported encode size found.');
}

try {
  await assertCanEncodeCapture(format, size);
} catch (e) {
  if (e instanceof Error && /encoding is not supported/.test(e.message)) {
    size = reduceScale(size);
    await assertCanEncodeCapture(format, size);
  } else throw e;
}

When it happens

Trigger: Selecting a capture size (after applying the density/scale factor) that exceeds the browser's maximum supported encode dimensions for H.264/VP9; requesting mp4 in a browser without hardware/software H.264 encode; requesting very large dimensions where WebCodecs `isConfigSupported` returns false.

Common situations: High-DPI capture with a large scale factor pushing effective pixels beyond codec limits (e.g. 4K+ on a retina display); browser lacks the requested encoder; VP9 max dimension limits hit on WebM.

Related errors

• No frames were added to the canvas recording.
• Mediabunny did not return an output buffer.
• The display canvas would be ${displayWidth}×${displayHeight}
• The encoded frame would be ${outputSize.width}×${outputSize.
• The required HTML-in-canvas APIs are unavailable. Open chrom

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/c0d24695cde6638d. Report an issue: GitHub.