Chapter 266: canRenderMediaOnWeb()

Core Idea

_Part of the @remotion/web-renderer package.

Key Concepts

• Arguments
• width
• height
• container?
• videoCodec?
• audioCodec?
• transparent?
• muted?

Code Examples

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);
}

• What it demonstrates: Usage pattern for canRenderMediaOnWeb() from the official docs.

Reference Tables

Type	Description
webcodecs-unavailable	WebCodecs API is not available in this browser
container-codec-mismatch	The video codec is not supported for the selected container
invalid-dimensions	H.264 and H.265 require width and height to be multiples of 2
video-codec-unsupported	The browser cannot encode the selected video codec
audio-codec-unsupported	The browser cannot encode the selected audio codec
transparent-video-unsupported	Transparency requires VP8 or VP9 codec
webgl-unsupported	WebGL is required for 3D CSS transforms
output-target-unsupported	The requested output target is not supported by this browser

Key Takeaways

1. Understand arguments when working with canRenderMediaOnWeb().
2. Understand width when working with canRenderMediaOnWeb().
3. Understand height when working with canRenderMediaOnWeb().
4. Understand container? when working with canRenderMediaOnWeb().
5. Understand videocodec? when working with canRenderMediaOnWeb().

Connects To

• Angular: related page in the Framework & Renderer Integrations section.
• Figma: related page in the Framework & Renderer Integrations section.
• use Gsap Timeline: related page in the Framework & Renderer Integrations section.