ContextQMD
Back to Remotion

renderMediaOnVercel()

packages/docs/docs/vercel/render-media-on-vercel.mdx

4.0.4816.8 KB
Original Source

renderMediaOnVercel()<AvailableFrom v="4.0.426" />

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

Renders a video inside a Vercel Sandbox.

The rendered file stays inside the sandbox. Use uploadToVercelBlob() to upload it to Vercel Blob.

Set detached: true to return immediately and poll the render with getRenderProgress().

Example

ts
// @module: es2022
// @target: es2022
import {renderMediaOnVercel, addBundleToSandbox, createSandbox} from '@remotion/vercel';
const sandbox = await createSandbox();
// ---cut---
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)}%`);
    }
  },
});

Detached render

ts
// @module: es2022
// @target: es2022
import {renderMediaOnVercel, createSandbox} from '@remotion/vercel';
const sandbox = await createSandbox();
// ---cut---
const {sandboxId, cmdId} = await renderMediaOnVercel({
  sandbox,
  compositionId: 'MyComp',
  inputProps: {title: 'Hello World'},
  detached: true,
  vercelBlob: {
    blobToken: process.env.BLOB_READ_WRITE_TOKEN!,
    access: 'public',
  },
});

Arguments

An object with the following properties:

sandbox

A Sandbox instance.

compositionId

The ID of the Remotion composition to render.

inputProps

Props to pass to the composition.

codec?

string <TsType type="Codec" source="@remotion/renderer" href="/docs/renderer/types#codec" />

Choose a suitable codec for your output media. Refer to the Encoding guide to find the best codec for your use case. Default: "h264".

outputFile?

The output file path inside the sandbox. Default: "/tmp/video.mp4".

detached?<AvailableFrom v="4.0.469" />

When set to true, starts the render and returns {sandboxId, cmdId, outputFile} without waiting for it to finish.

Use getRenderProgress() to poll the returned IDs.

vercelBlob?<AvailableFrom v="4.0.469" />

<TsType type="VercelBlobUploadOptions" source="@remotion/vercel" href="/docs/vercel/types#vercelblobuploadoptions" />

Uploads the rendered video from inside the sandbox to Vercel Blob.

This option is only available when detached: true, and required in that mode because the route that started the render returns before the video exists.

detachedSandboxTimeoutInMilliseconds?<AvailableFrom v="4.0.469" />

Extends the sandbox lifetime before returning from a detached render. Default: 1800000 (30 minutes).

crf?

<Options id="crf" />

imageFormat?

<Options id="video-image-format" />

pixelFormat?

<Options id="pixel-format" />

envVariables?

Record<string, string>

An object containing environment variables to be injected in your project.

See: Environment variables

frameRange?

number | [number, number] | [number, null] <TsType type="FrameRange" source="@remotion/renderer" href="/docs/renderer/types#framerange" />

Specify a single frame (passing a number) or a range of frames (passing a tuple [number, number]) to be rendered. By passing null (default) all frames of a composition get rendered.

everyNthFrame?

<Options id="every-nth-frame" />

proResProfile?

<Options id="prores-profile" />

chromiumOptions?

Allows you to set certain Chromium / Google Chrome flags. See: Chromium flags.

scale?

<Options id="scale" />

preferLossless?

<Options id="prefer-lossless" />

enforceAudioTrack?

<Options id="enforce-audio-track" />

disallowParallelEncoding?

<Options id="disallow-parallel-encoding" />

concurrency?

<Options id="concurrency" />

metadata?

<Options id="metadata" />

logLevel?

<Options id="log" />

timeoutInMilliseconds?

<Options id="timeout" />

videoBitrate?

<Options id="video-bitrate" />

audioBitrate?

<Options id="audio-bitrate" />

audioCodec?

<Options id="audio-codec" />

encodingMaxRate?

<Options id="max-rate" />

encodingBufferSize?

<Options id="buffer-size" />

muted?

<Options id="muted" />

numberOfGifLoops?

<Options id="number-of-gif-loops" />

x264Preset?

<Options id="x264-preset" />

gopSize?<AvailableFrom v="4.0.466" />

<Options id="gop" />

colorSpace?

<Options id="color-space" />

jpegQuality?

<Options id="jpeg-quality" />

forSeamlessAacConcatenation?

<Options id="for-seamless-aac-concatenation" />

separateAudioTo?

<Options cli id="separate-audio-to" />

hardwareAcceleration?

<Options id="hardware-acceleration" />

offthreadVideoCacheSizeInBytes?

<Options id="offthreadvideo-cache-size-in-bytes" />

mediaCacheSizeInBytes?

<Options id="media-cache-size-in-bytes" />

offthreadVideoThreads?

<Options id="offthreadvideo-video-threads" />

licenseKey?

<Options id="license-key" />

onProgress?

function <TsType type="RenderMediaOnVercelProgress" source="@remotion/vercel" href="/docs/vercel/types#rendermediaonvercelprogress" />

A callback that receives progress updates. Every variant includes overallProgress (0–1).

ts
import type {RenderMediaOnVercelProgress} from '@remotion/vercel';
// ---cut---
const onProgress = async (update: RenderMediaOnVercelProgress) => {
  console.log(`Overall: ${Math.round(update.overallProgress * 100)}%`);
  if (update.stage === 'render-progress') {
    console.log(`Rendering: ${Math.round(update.progress.progress * 100)}%`);
  }
};

Return value

When detached is unset or false, an object containing:

sandboxFilePath

The path to the rendered video inside the sandbox.

contentType

The MIME type of the rendered output (e.g. "video/mp4", "video/webm", "image/gif").

When detached is true, an object containing:

sandboxId

The ID of the sandbox that is rendering the video.

cmdId

The ID of the command that is rendering the video.

outputFile

The path to the rendered video inside the sandbox.

See also