Chapter 270: renderStillOnWeb()

Core Idea

_Part of the @remotion/web-renderer package.

Key Concepts

• Arguments
• composition
• frame
• inputProps?
• scale?
• delayRenderTimeoutInMilliseconds?
• logLevel?
• signal?

Code Examples

const Component: React.FC = () => {
  return <Video src="https://remotion.media/video.mp4" />;
};

const still = await renderStillOnWeb({
  composition: {
    component: Component,
    durationInFrames: 100,
    fps: 30,
    width: 1920,
    height: 1080,
    id: 'my-composition',
  },
  frame: 0,
});

const pngBlob = await still.blob({format: 'png'});

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

Key Takeaways

1. Understand arguments when working with renderStillOnWeb().
2. Understand composition when working with renderStillOnWeb().
3. Understand frame when working with renderStillOnWeb().
4. Understand inputprops? when working with renderStillOnWeb().
5. Understand scale? when working with renderStillOnWeb().

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.