remotion-dev/remotion · error · Error

This browser cannot encode the VP9 video streams required fo

Error message

This browser cannot encode the VP9 video streams required for video layer separation.

What it means

Before processing, the library checks with mediabunny's canEncodeVideo('vp9', ...) that the browser can encode both VP9 output streams, including one with alpha: 'keep'. If either base (opaque) or foreground (alpha) VP9 encoding is unsupported, the Error is thrown — video layer separation outputs WebM VP9 with alpha and cannot run on such browsers.

Source

Thrown at packages/video-matting/src/separate-video-layers.ts:293

		throw new Error('The input video has invalid dimensions.');
	}

	const [canEncodeBase, canEncodeForeground] = await Promise.all([
		canEncodeVideo('vp9', {
			width,
			height,
			quality: videoQuality,
			alpha: 'discard',
		}),
		canEncodeVideo('vp9', {
			width,
			height,
			quality: videoQuality,
			alpha: 'keep',
		}),
	]);
	if (!canEncodeBase || !canEncodeForeground) {
		throw new Error(
			'This browser cannot encode the VP9 video streams required for video layer separation.',
		);
	}

	return {videoTrack, width, height};
};

export const separateVideoLayers = async (
	options: SeparateVideoLayersOptions,
): Promise<SeparateVideoLayersResult> => {
	validateOptions(options);
	throwIfAborted(options.signal);

	const model = options.model ?? 'modnet';
	const audio = options.audio ?? 'base';
	const videoQuality = resolveVideoMattingQuality(
		options.videoBitrate ?? 'very-high',
	);

View on GitHub (pinned to b2f4e34732)

Solutions

Run in a Chromium-based browser (Chrome/Edge 94+), which supports VP9 encoding with alpha via WebCodecs.
Feature-detect first with mediabunny's canEncodeVideo('vp9', {alpha: 'keep'}) and show a browser-support message instead of failing mid-process.
Avoid embedded WebViews; open the page in the full browser.
If you must support Safari, perform separation server-side instead of in-browser.

Example fix

// before
await separateVideoLayers({src}); // throws in Safari
// after
if (!(await canEncodeVideo('vp9', {alpha: 'keep'}))) {
  alert('Use Chrome or Edge for video layer separation.');
  return;
}
await separateVideoLayers({src});

Defensive patterns

Strategy: validation

Validate before calling

import {canEncodeVideo} from 'mediabunny';
if (!(await canEncodeVideo('vp9', {alpha: 'keep'}))) {
  throw new Error('This browser cannot encode VP9 with alpha. Use Chrome or Edge.');
}

Try / catch

try {
  await separateVideoLayers({src});
} catch (e) {
  if (e instanceof Error && e.message.includes('cannot encode the VP9')) {
    showBrowserUnsupportedNotice();
    return;
  }
  throw e;
}

Prevention

Feature-detect VP9 alpha encoding at app startup and gate the feature behind it.
Recommend/require Chromium-based browsers for this feature.
Avoid embedded WebViews; offer a server-side fallback for unsupported browsers.

When it happens

Trigger: Running separateVideoLayers in Safari (no VP9 alpha encoding via WebCodecs), older Firefox, or any browser whose WebCodecs VideoEncoder lacks VP9 support.

Common situations: Safari on macOS/iOS — the most common hit; embedded WebViews (Android WebView, Electron with restricted codecs); headless browsers without full WebCodecs encoder support.

Understand the failure class

Background: "unsupported platform" / "not supported on this platform" errors: what they mean and how to fix them — this error's family across 47 libraries.

Related errors

AI-assisted analysis of remotion-dev/remotion@b2f4e34732 (2026-09-09). Data as JSON: /api/errors/1bbf57a8c76e19ec. Report an issue: GitHub.