Skip to main content

renderMediaOnWeb()

warning

Very experimental feature - expect bugs and breaking changes at any time.
Track progress on GitHub and discuss in the #web-renderer channel on Discord.

Available from v4.397 - 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().

Example usage
tsx
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 - optional

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 WebRendererContainer

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

videoCodec?​

string 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] 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.

onProgress?​

function RenderMediaOnWebProgressCallback

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

tsx
import type {RenderMediaOnWebProgressCallback} from '@remotion/web-renderer';
 
const onProgress: RenderMediaOnWebProgressCallback = ({renderedFrames, encodedFrames}) => {
  console.log(`Rendered ${renderedFrames} frames`);
  console.log(`Encoded ${encodedFrames} frames`);
};

videoBitrate?​

number | string 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.

Default is false.

muted?​

boolean

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

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 LogLevel

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

signal?​

AbortSignal

An AbortSignal that allows the render to be cancelled.

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

mediaCacheSizeInBytes?​

number | null

Specify the maximum size of the cache that <Video> and <Audio> from @remotion/media may use combined, in bytes.
The default is half of the available system memory when the render starts.

onArtifact?​

function WebRendererOnArtifact

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

onFrame?​

function 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.

tsx
import type {OnFrameCallback} from '@remotion/web-renderer';
 
const onFrame: OnFrameCallback = (frame) => {
  // Process the frame...
  return frame;
};

outputTarget?​

string 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 schema AnyZodObject

A Zod 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.

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.

Download the video
tsx
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​