renderMediaOnWeb()<AvailableFrom v="4.0.397" />

:::warning 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.

Renders a video or audio in the browser.
If you want to render a single frame to an image, use renderStillOnWeb().

import {renderMediaOnWeb} from '@remotion/web-renderer';
import {Video} from '@remotion/media';

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

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

const blob = await getBlob();

Arguments

An object with the following properties:

composition

An object describing a composition. The object should have the following properties:

• id: A unique identifier for the composition.
• component: A React component that renders the video content.
• durationInFrames: The duration of the video in frames.
• fps: The frame rate of the video.
• width: The width of the video in pixels.
• height: The height of the video in pixels.
• defaultProps?: Optional default props to pass to the component.
• calculateMetadata?: Optional function to calculate metadata. If provided, width, height, fps, and durationInFrames can be omitted and will be calculated dynamically.

inputProps?

object

Input Props to pass to the component.
You may transform input props using calculateMetadata().

:::note You cannot use getInputProps() to read input props in client-side rendering. :::

container?

string <TsType type="WebRendererContainer" source="@remotion/web-renderer" href="/docs/web-renderer/types#webrenderercontainer" />

The container format to use for the output video. Default is mp4.

videoCodec?

string <TsType type="WebRendererVideoCodec" source="@remotion/web-renderer" href="/docs/web-renderer/types#webrenderervideocodec" />

Which codec should be used to encode the video.
Default depends on the container:

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

frameRange?

number | [number, number] | [number, null] <TsType type="FrameRange" source="@remotion/web-renderer" href="/docs/web-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. Pass [number, null] to render from a frame to the end of the composition.<AvailableFrom v="4.0.421" inline />

scale?

number

onProgress?

function <TsType type="RenderMediaOnWebProgressCallback" source="@remotion/web-renderer" href="/docs/web-renderer/types#rendermediaonwebprogresscallback" />

React to render progress. The callback receives an object with the following properties:

import type {RenderMediaOnWebProgressCallback} from '@remotion/web-renderer';

const onProgress: RenderMediaOnWebProgressCallback = ({
  encodedFrames,
  renderEstimatedTime,
  progress,
  doneIn,
}) => {
  console.log(`Encoded ${encodedFrames} frames`);
  console.log(`Overall progress: ${Math.round(progress * 100)}%`);
  console.log(`Estimated render time remaining: ${renderEstimatedTime}ms`);

  if (doneIn !== null) {
    console.log(`Finished rendering in ${doneIn}ms`);
  }
};

videoBitrate?

number | string <TsType type="WebRendererQuality" source="@remotion/web-renderer" href="/docs/web-renderer/types#webrendererquality" />

Controls the quality and file size of the output video. Can be either a number representing the bitrate in bits per second, or one of the preset quality levels:

• "very-low": Smallest file size, lowest quality
• "low": Small file size, lower quality
• "medium": Balanced file size and quality (default)
• "high": Larger file size, higher quality
• "very-high": Largest file size, highest quality

hardwareAcceleration?

"no-preference" | "prefer-hardware" | "prefer-software"

Controls whether to prefer hardware or software encoding:

• "no-preference": Let the browser decide (default)
• "prefer-hardware": Prefer GPU-based encoding for better performance
• "prefer-software": Prefer CPU-based encoding for broader compatibility

keyframeIntervalInSeconds?

number

The interval in seconds between keyframes.
Lower values result in better seeking performance but larger file sizes.
Default is 5.

transparent?

boolean

If set to true, the video will be encoded with an alpha channel, allowing for transparent backgrounds. The composition must render with a transparent background for this to work.

Only the "webm" and "mkv" containers support transparency. Only the "vp8" and "vp9" codecs support transparency. An error will be thrown if an incompatible container or codec is used.

Default is false.

muted?

boolean

If set to true, no audio will be included in the output video.

audioCodec?

string <TsType type="WebRendererAudioCodec" source="@remotion/web-renderer" href="/docs/web-renderer/types#webrendereraudiocodec" />

Which codec should be used to encode the audio.
Default depends on the container:

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

audioBitrate?

number | string <TsType type="WebRendererQuality" source="@remotion/web-renderer" href="/docs/web-renderer/types#webrendererquality" />

Controls the quality and file size of the audio. Can be either a number representing the bitrate in bits per second, or one of the preset quality levels:

• "very-low": Smallest file size, lowest quality
• "low": Small file size, lower quality
• "medium": Balanced file size and quality (default)
• "high": Larger file size, higher quality
• "very-high": Largest file size, highest quality

sampleRate?<AvailableFrom v="4.0.448" />

number

The audio sample rate in Hz.
Default is 48000.

delayRenderTimeoutInMilliseconds?

number

A number describing how long the render may take to resolve all delayRender() calls before it times out.
Default is 30000.

logLevel?

string <TsType type="LogLevel" source="remotion" />

Determines how much information is logged during rendering.
Default is "info".

signal?

AbortSignal

An AbortSignal that allows the render to be cancelled.

const Component: React.FC = () => null;

const composition = {
  component: Component,
  durationInFrames: 100,
  fps: 30,
  width: 100,
  height: 100,
  id: 'my-composition',
};

// ---cut---
import {renderMediaOnWeb} from '@remotion/web-renderer';

const controller = new AbortController();

// Cancel after 10 seconds
setTimeout(() => controller.abort(), 10000);

const {getBlob} = await renderMediaOnWeb({
  signal: controller.signal,
  composition,
});

See Cancelling renders for more details and error handling patterns.

mediaCacheSizeInBytes?

number | null

onArtifact?

function <TsType type="WebRendererOnArtifact" source="@remotion/web-renderer" href="/docs/web-renderer/types#webrendereronartifact" />

Handle an artifact that was emitted by the <Artifact> component.

onFrame?

function <TsType type="OnFrameCallback" source="@remotion/web-renderer" href="/docs/web-renderer/types#onframecallback" />

A callback that receives each VideoFrame before it is encoded. This allows you to process or modify frames. The callback must return the same VideoFrame or a new VideoFrame with the same dimensions and timestamp.

import type {OnFrameCallback} from '@remotion/web-renderer';

const onFrame: OnFrameCallback = (frame) => {
  // Process the frame...
  return frame;
};

outputTarget?

string <TsType type="WebRendererOutputTarget" source="@remotion/web-renderer" href="/docs/web-renderer/types#webrendereroutputtarget" />

Controls how the output is stored:

• "arraybuffer": Store the output in memory as an ArrayBuffer
• "web-fs": Use the Origin Private File System for better memory efficiency with large files

By default, Remotion will automatically choose "web-fs" if available, otherwise "arraybuffer".

schema?

Zod v4 schema <TsType type="$ZodObject" source="zod/v4/core" />

A Zod v4 schema to validate the input props. See Schemas for more information.

licenseKey?

string

A license key to use for this render.
See Telemetry in client-side rendering for more information.

isProduction?<AvailableFrom v="4.0.409"/>

default true

allowHtmlInCanvas?<AvailableFrom v="4.0.447" />

boolean

Return value

Returns a promise resolving to an object with the following properties:

getBlob()

A function that returns a Promise<Blob> containing the rendered video. Call this function to retrieve the final video file.

const Component: React.FC = () => null;
const composition = {
  component: Component,
  durationInFrames: 100,
  fps: 30,
  width: 100,
  height: 100,
  id: 'my-composition',
};

// ---cut---

import {renderMediaOnWeb} from '@remotion/web-renderer';

const result = await renderMediaOnWeb({
  composition,
});

const blob = await result.getBlob();

// Download the video
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'video.mp4';
a.click();

See also

• Source code for this function
• Client-side rendering
• renderStillOnWeb()
• renderMedia()
• renderMediaOnLambda()