remotion-dev/remotion · error · Error

The encoded frame would be ${outputSize.width}×${outputSize.

Error message

The encoded frame would be ${outputSize.width}×${outputSize.height} pixels at ${scale}× scale; its maximum even side is ${maxEncodedDimension.toLocaleString()} pixels. Reduce the scale or select a smaller area.

What it means

Even when the display canvas fits, Canvas Capture scales the crop region by `scale` to get the encoded frame size and rejects if either side exceeds the encoder's maximum even dimension. The encoder requires even dimensions and has a hard cap, so a large crop multiplied by a high scale factor trips this check in validateCaptureSize.

Source

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

		1,
		Math.round(height * window.devicePixelRatio),
	);
	const outputSize = getScaledCanvasSize(
		resolvedCrop.width,
		resolvedCrop.height,
		scale,
	);
	if (displayWidth > maxCanvasDimension || displayHeight > maxCanvasDimension) {
		throw new Error(
			`The display canvas would be ${displayWidth}×${displayHeight} pixels; its maximum side is ${maxCanvasDimension.toLocaleString()} pixels.`,
		);
	}

	if (
		outputSize.width > maxEncodedDimension ||
		outputSize.height > maxEncodedDimension
	) {
		throw new Error(
			`The encoded frame would be ${outputSize.width}×${outputSize.height} pixels at ${scale}× scale; its maximum even side is ${maxEncodedDimension.toLocaleString()} pixels. Reduce the scale or select a smaller area.`,
		);
	}

	return outputSize;
};

export const getCapturePreflight = ({
	scale,
	crop,
}: {
	readonly scale: number;
	readonly crop: CaptureCrop | null;
}): CapturePreflight => {
	const sourceSize = getWholePageSize();
	return {
		sourceSize,
		outputSize: validateCaptureSize({

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Reduce the scale factor (e.g. from 2x to 1x).
2. Select a smaller crop area so the scaled dimensions stay under the encoder cap.
3. Compute scale dynamically from the crop size to stay within limits.
4. Prefer 1x scale for full-page captures and reserve higher scales for small regions.

Example fix

// before
getCapturePreflight({scale: 3, crop: {left: 0, top: 0, width: 1920, height: 1080}});

// after
getCapturePreflight({scale: 1, crop: {left: 0, top: 0, width: 1920, height: 1080}});

const MAX_ENCODED = 4096; // platform encoder max even side
const encodedFits = (cropW: number, cropH: number, scale: number) => {
  const w = Math.round(cropW * scale);
  const h = Math.round(cropH * scale);
  return w <= MAX_ENCODED && h <= MAX_ENCODED && w % 2 === 0 && h % 2 === 0;
};
// pick the highest scale that fits:
const safeScale = pickScale(cropW, cropH, MAX_ENCODED);

try {
  getCapturePreflight({scale, crop});
} catch (err) {
  if (String(err?.message ?? '').startsWith('The encoded frame would be')) {
    // reduce scale or shrink crop, then retry
  } else throw err;
}

When it happens

Trigger: Using a scale > 1 on a crop that is already near the encoder limit; scale = 2 doubling a large region past the max even side; selecting a wide/tall area and requesting a high scale.

Common situations: Requesting 2x/3x scale on a 1080p+ region; exporting high-DPI crops of large areas; defaulting to a high scale factor without accounting for crop size.

Related errors

• The display canvas would be ${displayWidth}×${displayHeight}
• Canvas capture scale must be greater than 0.
• The required HTML-in-canvas APIs are unavailable. Open chrom
• Could not create an HTML-in-canvas OffscreenCanvas 2D contex
• No canvas recording was available to open.

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