Chapter 169: renderMediaOnVercel()

Core Idea

:::warning Experimental package: We reserve the right to make breaking changes in order to correct bad design decisions until this notice is gone.

Key Concepts

• Example
• Detached render
• Arguments
• sandbox
• compositionId
• inputProps
• codec?
• outputFile?

Code Examples

// @module: es2022
// @target: es2022
const sandbox = await createSandbox();
const {sandboxFilePath} = await renderMediaOnVercel({
  sandbox,
  compositionId: 'MyComp',
  inputProps: {title: 'Hello World'},
  onProgress: async (update) => {
    console.log(`Overall: ${Math.round(update.overallProgress * 100)}%`);
    if (update.stage === 'render-progress') {
      console.log(`Rendering: ${Math.round(update.progress.progress * 100)}%`);
    }
  },
});

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

Key Takeaways

1. Understand example when working with renderMediaOnVercel().
2. Understand detached render when working with renderMediaOnVercel().
3. Understand arguments when working with renderMediaOnVercel().
4. Understand sandbox when working with renderMediaOnVercel().
5. Understand compositionid when working with renderMediaOnVercel().

Connects To

• Azure Container Apps: related page in the Deployment & Runtimes section.
• bun: related page in the Deployment & Runtimes section.
• Cloudflare Containers: related page in the Deployment & Runtimes section.