Skip to main content

canRenderMediaOnWeb()

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.

Part of the @remotion/web-renderer package.

Checks if a render can be performed with the given configuration before actually attempting it. This is useful for providing feedback to users about browser compatibility and configuration issues.

Example usage
tsx
import {canRenderMediaOnWeb} from '@remotion/web-renderer';
 
const result = await canRenderMediaOnWeb({
  container: 'mp4',
  videoCodec: 'h264',
  width: 1920,
  height: 1080,
});
 
if (!result.canRender) {
  for (const issue of result.issues) {
    console.error(issue.message);
  }
} else {
  console.log('Ready to render!');
  console.log('Video codec:', result.resolvedVideoCodec);
  console.log('Audio codec:', result.resolvedAudioCodec);
}

Arguments​

An object with the following properties:

width​

number - required

The width of the video in pixels.

height​

number - required

The height of the video in pixels.

container?​

string WebRendererContainer

The container format. Default is "mp4".

videoCodec?​

string WebRendererVideoCodec

The video codec to use. Default depends on the container:

  • For mp4 container: "h264"
  • For webm container: "vp8"

audioCodec?​

string | null WebRendererAudioCodec

The audio codec to use. Default depends on the container:

  • For mp4 container: "aac"
  • For webm container: "opus"

transparent?​

boolean

Whether the video should have an alpha channel. Default is false.

Only vp8 and vp9 codecs support transparency.

muted?​

boolean

If true, audio codec checks are skipped. Default is false.

videoBitrate?​

number | string WebRendererQuality

The video bitrate. Can be a number (bits per second) or a quality preset: "very-low", "low", "medium", "high", "very-high".

Default is "medium".

audioBitrate?​

number | string WebRendererQuality

The audio bitrate. Can be a number (bits per second) or a quality preset: "very-low", "low", "medium", "high", "very-high".

Default is "medium".

outputTarget?​

string | null WebRendererOutputTarget

The output target to use for rendering. Can be:

  • "web-fs": Use the File System Access API for streaming writes to disk
  • "arraybuffer": Buffer the entire video in memory
  • null: Auto-detect based on browser support (default)

If "web-fs" is requested but not supported by the browser, an output-target-unsupported error will be returned.

Return value​

Returns a Promise that resolves to an object with the following properties:

canRender​

boolean

true if the render can proceed, false if there are blocking issues.

issues​

CanRenderIssue[]

An array of issues found during the check. Each issue has:

  • type: The type of issue (see Issue types below)
  • message: A human-readable description of the issue
  • severity: Either "error" (blocking) or "warning" (non-blocking, e.g. fallback was used)

resolvedVideoCodec​

string WebRendererVideoCodec

The video codec that will be used for rendering.

resolvedAudioCodec​

string | null WebRendererAudioCodec

The audio codec that will be used for rendering. This may differ from the requested codec if a fallback was applied. null if muted is true.

resolvedOutputTarget​

WebRendererOutputTarget

The output target that will be used. See renderMediaOnWeb() outputTarget for details.

Issue types​

The following issue types may be returned:

TypeDescription
webcodecs-unavailableWebCodecs API is not available in this browser
container-codec-mismatchThe video codec is not supported for the selected container
invalid-dimensionsH.264 and H.265 require width and height to be multiples of 2
video-codec-unsupportedThe browser cannot encode the selected video codec
audio-codec-unsupportedThe browser cannot encode the selected audio codec
transparent-video-unsupportedTransparency requires VP8 or VP9 codec
webgl-unsupportedWebGL is required for 3D CSS transforms
output-target-unsupportedThe requested output target is not supported by this browser

See also​