Skip to main content

renderMediaOnWeb()v4.0.397

warning

非常实验性的功能——随时可能出现漏洞和重大更改。 在 GitHub 上跟踪进度 并在 Discord 的 #web-renderer 通道中讨论。

属于 @remotion/web-renderer 包的一部分.

🌐 Part of the @remotion/web-renderer package.

在浏览器中渲染视频或音频。
如果你想将单个帧渲染为图片，请使用 renderStillOnWeb()。

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

Example usage
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：作品的唯一标识符。
  • component：一个渲染视频内容的 React 组件。
  • durationInFrames：视频的帧数时长。
  • fps：视频的帧率。
  • width：视频的像素宽度。
  • height：视频的像素高度。
  • defaultProps?：可传递给组件的可选默认属性。
  • calculateMetadata?：可选功能，用于计算元数据。如果提供此功能，width、height、fps 和 durationInFrames 可以省略，并将动态计算。

inputProps?​

object

传递给组件的输入属性。
你可以使用 calculateMetadata() 转换输入属性。

note

你不能在客户端渲染中使用 getInputProps() 来读取输入属性。

container?​

字符串 WebRendererContainer

🌐 string WebRendererContainer

用于输出视频的容器格式。默认是 mp4。

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

videoCodec?​

字符串 WebRendererVideoCodec

🌐 string WebRendererVideoCodec

应该使用哪种编解码器来编码视频。
默认取决于容器：

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

  • 对于 mp4 容器：h264
  • 对于 webm 容器：vp8

frameRange?​

数字 | [数字, 数字] | [数字, null] FrameRange

🌐 number | [number, number] | [number, null] FrameRange

指定单个帧（传入 number）或帧范围（传入元组 [number, number]）进行渲染。通过传入 null（默认值）将渲染合成的所有帧。传入 [number, null] 可从某一帧渲染到合成的结束。v4.0.421

scale?​

number

Scales the output dimensions by a factor. For example, a 1280x720px frame will become a 1920x1080px frame with a scale factor of 1.5. See Scaling for more details.

onProgress?​

函数 RenderMediaOnWebProgressCallback

🌐 function RenderMediaOnWebProgressCallback

React 渲染进度的响应。回调函数接收一个包含以下属性的对象：

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

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

const onProgress: RenderMediaOnWebProgressCallback = ({renderedFrames, encodedFrames}) => {
  console.log(`Rendered ${renderedFrames} frames`);
  console.log(`Encoded ${encodedFrames} frames`);
};

videoBitrate?​

数字 | 字符串 WebRendererQuality

🌐 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"：文件最小，质量最低
  • "low"：文件小，质量较低
  • "medium"：平衡的文件大小和质量（默认）
  • "high"：文件更大，质量更高
  • "very-high"：最大文件大小，最高质量

hardwareAcceleration?​

"无偏好" | "偏好硬件" | "偏好软件"

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

控制是优先使用硬件编码还是软件编码：

🌐 Controls whether to prefer hardware or software encoding:

  • "no-preference"：让浏览器决定（默认）
  • "prefer-hardware"：为了更好的性能，优先选择基于GPU的编码
  • "prefer-software"：优先使用基于CPU的编码以获得更广泛的兼容性

keyframeIntervalInSeconds?​

number

关键帧之间的时间间隔（以秒为单位）。 较低的值会带来更好的查找性能，但文件大小更大。 默认值是 5。

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

transparent?​

boolean

如果设置为 true，视频将编码带有 alpha 通道，从而允许透明背景。
必须使合成以透明背景渲染，才能使此功能工作。

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

默认是 false。

🌐 Default is false.

muted?​

boolean

如果设置为 true，输出视频将不包含音频。

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

audioCodec?​

字符串 WebRendererAudioCodec

🌐 string WebRendererAudioCodec

应该使用哪种编解码器来编码音频。
默认取决于容器：

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

  • 对于 mp4 容器：aac
  • 对于 webm 容器：opus
note

Firefox 不支持 AAC 编码。如果你没有指定音频编解码器，而浏览器无法编码默认的编解码器，Remotion 将自动回退到支持的编解码器。

如果你明确指定 aac 并在 Firefox 中渲染，渲染将会失败并出现错误。

🌐 If you explicitly specify aac and render in Firefox, the render will fail with an error.

audioBitrate?​

数字 | 字符串 WebRendererQuality

🌐 number | string 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"：文件最小，质量最低
  • "low"：文件小，质量较低
  • "medium"：平衡的文件大小和质量（默认）
  • "high"：文件更大，质量更高
  • "very-high"：最大文件大小，最高质量

delayRenderTimeoutInMilliseconds?​

number

一个数字，用于描述渲染可能需要多长时间来解决所有 delayRender() 调用 在它超时之前。 默认值为 30000。

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

logLevel?​

字符串 LogLevel

确定在渲染过程中记录多少信息。 默认值是 "info"。

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

signal?​

中止信号

🌐 AbortSignal

一个AbortSignal，允许渲染被取消。

🌐 An AbortSignal that allows the render to be cancelled.

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?​

数字 | null

🌐 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?​

函数 WebRendererOnArtifact

🌐 function WebRendererOnArtifact

[处理由 <Artifact> 组件发出的工件](/docs/artifacts#using-rendermedia-renderstill-or-renderframes)。

onFrame?​

函数 OnFrameCallback

🌐 function OnFrameCallback

一个回调函数，在每个 VideoFrame 被编码之前接收它。这允许你处理或修改帧。回调函数必须返回相同的 VideoFrame 或一个具有相同尺寸和时间戳的新 VideoFrame。

🌐 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?​

字符串 WebRendererOutputTarget

🌐 string WebRendererOutputTarget

控制输出的存储方式：

🌐 Controls how the output is stored:

  • "arraybuffer"：将输出存储在内存中作为 ArrayBuffer
  • "web-fs"：使用 Origin Private 文件系统 以更高效地处理大文件的内存

默认情况下，Remotion 会自动选择 "web-fs"（如果可用），否则选择 "arraybuffer"。

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

schema?​

Zod v4 架构 $ZodObject

用于验证输入属性的 Zod v4 模式。请参阅 Schemas 以获取更多信息。

🌐 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?v4.0.409​

默认 true

🌐 default true

Pass false if this a development render to not count it as a billable render on remotion.pro. Only can be used in conjuction with licenseKey.

返回值​

🌐 Return value

返回一个解析为具有以下属性的对象的 Promise：

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

getBlob()​

一个返回包含渲染视频的 Promise<Blob> 的函数。调用此函数以获取最终视频文件。

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

Download the video

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

Last updated on