Skip to main content

canRenderVideoCodec()

warning

Very experimental feature - expect bugs and breaking changes at any time. Track progress on GitHub and discuss in the #web-renderer channel on Discord.

Available from v4.0.401 - Part of the @remotion/web-renderer package.

Checks if the browser supports encoding video with the specified codec and options. Use this function to verify browser capabilities before attempting to render.

Example usage
tsx
import {canRenderVideoCodec} from '@remotion/web-renderer';
 
const canRender = await canRenderVideoCodec('h264', {
  width: 1920,
  height: 1080,
  bitrate: 'high',
});
 
if (canRender) {
  console.log('H.264 encoding is supported!');
} else {
  console.log('H.264 encoding is not supported, try a different codec.');
}

Arguments​

codec​

string WebRendererVideoCodec

The video codec to check support for. One of:

  • "h264" - H.264/AVC codec (widely supported)
  • "h265" - H.265/HEVC codec
  • "vp8" - VP8 codec (WebM)
  • "vp9" - VP9 codec (WebM)
  • "av1" - AV1 codec

options?​

object CanRenderVideoCodecOptions

An optional object with the following properties:

width?​

number

The width of the video in pixels. Specifying this allows the browser to check if it can encode video at this resolution.

height?​

number

The height of the video in pixels. Specifying this allows the browser to check if it can encode video at this resolution.

bitrate?​

number | string WebRendererQuality

The target bitrate for encoding. Can be either:

  • A number representing bits per second
  • A quality preset: "very-low", "low", "medium", "high", or "very-high"

Return value​

Returns Promise<boolean> - resolves to true if the browser supports encoding with the specified configuration, false otherwise.

Example: Finding a supported codec​

Find supported codec
tsx
import {canRenderVideoCodec} from '@remotion/web-renderer';
import type {WebRendererVideoCodec} from '@remotion/web-renderer';
 
const findSupportedCodec = async (): Promise<WebRendererVideoCodec | null> => {
  const codecs: WebRendererVideoCodec[] = ['h264', 'vp8', 'vp9', 'av1', 'h265'];
 
  for (const codec of codecs) {
    if (await canRenderVideoCodec(codec)) {
      return codec;
    }
  }
 
  return null;
};
 
const codec = await findSupportedCodec();
console.log('Supported codec:', codec);

See also​