v4.0 迁移
在从 Remotion 3 升级到 Remotion 4 时,请注意以下更改并将其应用到你的项目中。
🌐 When upgrading from Remotion 3 to Remotion 4, note the following changes and apply them to your project.
如何升级
🌐 How to upgrade
查看 changelog 以找到最新版本。
将 remotion 和所有以 @remotion 开头的包升级到最新版本,例如 4.0.0:
🌐 See the changelog to find the latest version.
Upgrade remotion and all packages starting with @remotion to the latest version, e.g. 4.0.0:
- "remotion": "^3.3.43"
- "@remotion/bundler": "^3.3.43"
- "@remotion/eslint-config": "^3.3.43"
- "@remotion/eslint-plugin": "^3.3.43"
- "@remotion/cli": "^3.3.43"
- "@remotion/renderer": "^3.3.43"
+ "remotion": "4.0.0"
+ "@remotion/bundler": "4.0.0"
+ "@remotion/eslint-config": "4.0.0"
+ "@remotion/eslint-plugin": "4.0.0"
+ "@remotion/cli": "4.0.0"
+ "@remotion/renderer": "4.0.0"随后分别运行 npm i 、yarn 或 pnpm i。
🌐 Run npm i , yarn or pnpm i respectively afterwards.
系统要求
🌐 System requirements
最低的 Node 版本现在是 16.0.0。
🌐 The minimum Node version is now 16.0.0.
仅支持以下平台:Windows(仅限 x64)、macOS、Linux。
🌐 Only the following platforms are supported: Windows (x64 only), macOS, Linux.
使用 glibc 的 Linux 发行版至少需要 2.35 版本。更多信息请参见 这里。
🌐 Linux distros with glibc need to have at least version 2.35. See here for more information.
配置文件更改
🌐 Config file changes
CLI 配置文件已从核心 Remotion 包中移出到 @remotion/cli/config。请像这样更新你的导入:
🌐 The CLI configuration file has been moved out from the core Remotion package to @remotion/cli/config. Update your imports like this:
- import {Config} from 'remotion';
+ import {Config} from '@remotion/cli/config';选项已经被简化。例如,不再使用 Config.Bundling.overrideWebpackConfig,现在使用 Config.overrideWebpackConfig。
🌐 The options have been flattened. For example, instead of Config.Bundling.overrideWebpackConfig, you now use Config.overrideWebpackConfig.
- Config.Bundling.overrideWebpackConfig()
+ Config.overrideWebpackConfig()
- Config.Output.setOverwriteOutput(true);
+ Config.setOverwriteOutput(true);将此应用于所有配置调用。
🌐 Apply this to all configuration calls.
分离 ImageFormat
🌐 Separating ImageFormat
以前,imageFormat 选项会同时用于静态图片和视频。对于静态图片来说,通常更偏好使用 PNG,而对于视频来说,使用 JPEG 作为默认格式总的来说更快。在 Remotion 4.0 中,图片格式将被分开,以便你可以分别为视频和静态图片设置默认值。
🌐 Previously, the imageFormat option would be used for both stills and videos. While for stills, PNG is often preferrable, for videos it is overall faster to use JPEG as a default. In Remotion 4.0, the image formats are being separated so you can set defaults for videos and stills separately.
Config.setImageFormat被Config.setVideoImageFormat()和Config.setStillImageFormat()取代。
- Config.setImageFormat('jpeg');
+ Config.setVideoImageFormat('jpeg');- 所有命令的 CLI 选项仍然是
--image-format。 - Node.JS API 的名称仍然是
imageFormat。 - TypeScript 类型
ImageFormat已被拆分为StillImageFormat和VideoImageFormat。 StillImageFormat现在也支持webp和pdf!
简化日志记录
🌐 Streamlined logging
对于 getCompositions()、renderMedia()、renderStill()、getCompositionsOnLambda()、renderMediaOnLambda() 和 renderStillOnLambda() :
🌐 For getCompositions(), renderMedia(), renderStill(), getCompositionsOnLambda(), renderMediaOnLambda() and renderStillOnLambda():
verbose 和 dumpBrowserLogs 已被弃用,建议使用 "logLevel": "verbose"。这使得这些选项与 CLI 选项等效。
已停止支持 Lambda architecture
🌐 Dropped support for Lambda architecture
在部署 Lambda 时,你以前可以在 arm64 和 x86_64 架构之间进行选择。
从 v4.0 开始,仅支持 arm64。它应该更快、更便宜,并且与 x86_64 的行为没有任何不同。
🌐 When deploying a Lambda, you were previously able to choose between the arm64 and x86_64 architecture.
From v4.0 on, only arm64 is supported. It should be faster, cheaper and not have any different behavior than x86_64.
如何升级:
- 从
estimatePrice()和deployFunction()中移除architecture选项。
丰富的时间轴已删除
🌐 Rich timeline removed
由于性能问题,“丰富时间轴”选项已被移除。
时间轴现在始终处于简单模式,但可以一次支持更多的时间轴层。
🌐 The option to use the "Rich timeline" has been removed due to performance problems.
The timeline is now always in simple mode, but supports more timeline layers at once.
ProRes 视频现在默认导出未压缩音频
🌐 ProRes videos now export uncompressed audio by default
以前,aac 音频编解码器是 ProRes 导出的默认选项。现在默认的是 pcm_s16le,它代表未压缩的 16 位低字节序 PCM 音频。
之所以做出此更改,是因为用户导出 ProRes 主要是为了获得高质量素材,以便在视频编辑程序中进一步使用。
🌐 Previously, the aac audio codec was the default for ProRes exports. The default is now pcm_s16le which stands for uncompressed 16-bit low-endian PCM audio.
This change was made since users export ProRes mainly for getting high-quality footage to be further used in video editing programs.
已将 quality 选项重命名为 jpegQuality
🌐 Renamed quality option to jpegQuality
为了澄清此选项的含义,它现在被普遍称为“JPEG 质量”。调整以下选项:
🌐 To clarify the meaning of this option, it is now universally called "JPEG Quality". Adjust the following options:
npx remotion render:使用--jpeg-quality替代--qualitynpx remotion still:使用--jpeg-quality替代--qualitynpx remotion benchmark:使用--jpeg-quality替代--qualitynpx remotion lambda render:使用--jpeg-quality替代--qualitynpx remotion lambda still:使用--jpeg-quality替代--qualityrenderFrames():使用jpegQuality替代qualityrenderMedia():使用jpegQuality替代qualityrenderStill():使用jpegQuality替代qualityrenderMediaOnLambda():使用jpegQuality替代qualityrenderStillOnLambda():使用jpegQuality替代quality
不再安装 FFmpeg,已移除 ffmpegExecutable 选项
🌐 No more FFmpeg install, ffmpegExecutable option removed
FFmpeg 现在已经集成到 @remotion/renderer 包中。因此,ffmpegExecutable 和 ffprobeExecutable 选项已被移除。
🌐 FFmpeg is now baked into the @remotion/renderer package. Therefore, the ffmpegExecutable and ffprobeExecutable options have been removed.
此外,npx remotion install ffmpeg 和 npx remotion install ffprobe 命令不再存在。
🌐 Furthermore, the npx remotion install ffmpeg and npx remotion install ffprobe commands no longer exist.
如何升级:
- 从
renderMedia()、renderStill()、getCompositions()、renderFrames()和stitchFramesToVideo()调用中移除ffmpegExecutable选项。 - 从
renderMedia()、renderStill()、getCompositions()、renderFrames()和stitchFramesToVideo()调用中移除ffprobeExecutable选项。 - 删除对
ensureFfmpeg()的所有调用。 - 删除对
ensureFfprobe()的所有调用。 - 从
npx remotion render、npx remotion still和npx remotion benchmark中移除--ffmpeg-executable标志 - 从
npx remotion render、npx remotion still和npx remotion benchmark中移除--ffprobe-executable标志 - 不要再使用
npx remotion install命令了
添加了 npx remotion ffmpeg 和 npx remotion ffprobe
🌐 Added npx remotion ffmpeg and npx remotion ffprobe
由于不再需要安装 FFmpeg 和 FFprobe,ffmpeg 和 ffprobe 命令可能在你的环境中也不再存在。为了仍然能够使用一些 FFmpeg 的实用命令,我们引入了 npx remotion ffmpeg 和 npx remotion ffprobe。
请注意,为了保持二进制文件的体积较小,这些 FFmpeg 二进制文件只支持 Remotion 本身支持的编解码器:H.264、H.265、VP8、VP9 和 ProRes。
🌐 Since FFmpeg and FFprobe no longer have to be installed, the ffmpeg and ffprobe commands might also not be in your environment anymore. In order to still be able to use some of FFmpeg's handy commands, we introduced npx remotion ffmpeg and npx remotion ffprobe.
Note that in order to keep the binary size small, those FFmpeg binaries only understand the codecs that Remotion itself supports: H.264, H.265, VP8, VP9 and ProRes.
使用了来自 FFmpeg 6.0 版本分支的二进制文件。
🌐 A binary from the 6.0 release line of FFmpeg is used.
已移动 onSlowestFrames API
🌐 Moved onSlowestFrames API
在 V3 中,onSlowestFrames 是一个回调函数,你可以将其传递给 renderMedia()。
在 V4 中,这些数据已被移到 返回值 中。
🌐 In V3, onSlowestFrames has been a callback function that you could pass to renderMedia().
In V4, this data has been moved to the return value.
图片格式已移除
🌐 ImageFormat removed
@remotion/renderer 的 ImageFormat 类型已被更具体的类型 VideoImageFormat 和 StillImageFormat 取代。
🌐 The @remotion/renderer ImageFormat Type got replaced by the more specific Types VideoImageFormat and StillImageFormat.
已弃用 API 的移除
🌐 Removal of deprecated APIs
Config.setOutputFormat()在 v1.4 中已被弃用,现在已被移除。请改为组合使用setImageSequence()、setVideoImageFormat()和setCodec()。downloadVideo()别名已被移除,请改用具有相同 API 的downloadMedia()。<MotionBlur>已被移除。请改用<Trail>。getParts()已被移除。请改用getSubpaths():
paths.tsimport {getLength ,getPointAtLength ,getSubpaths ,getTangentAtLength } from '@remotion/paths'; constpath = 'M 0 0 L 100 100'; constparts =getSubpaths (path [0]); constlength =getLength (parts [0]); conststart =getPointAtLength (parts [0], 0); constend =getPointAtLength (parts [0],length ); consttangent =getTangentAtLength (parts [0],length / 2);
webpackBundle已从renderFrames()和renderMedia()中移除 - 请改名为serveUrlparallelism已从renderFrames()和renderMedia()中移除 - 改为重命名为concurrency。config已从renderFrames()中移除 - 请改名为composition。
onBucketEnsured 选项已被移除
🌐 onBucketEnsured option has been removed
[getOrCreateBucket()](/docs/lambda/getorcreatebucket) 的 onBucketEnsured() 选项已被移除,因为创建桶是 getOrCreateBucket() 唯一的操作。因此,你可以直接等待该函数本身。
🌐 The onBucketEnsured() option of getOrCreateBucket() has been removed because creating the bucket is the only operation of getOrCreateBucket(). Therefore, you can just await the function itself.
imageFormat 已从 <OffthreadVideo> 中移除
🌐 imageFormat removed from <OffthreadVideo>
直到现在,你可以选择将 imageFormat 属性传递给 <OffthreadVideo>。引入此选项是为了使透明视频成为可能。
🌐 Until now, you could optionally pass the imageFormat prop into <OffthreadVideo>. This option was introduced in order to make transparent videos possible.
现在,你可以改用可选的 transparent 属性。
🌐 Now, you can instead use the optional transparent prop.
由于这一变化,OffthreadVideoImageFormat 类型不再必要,因此已被移除。
🌐 Due to this this change, the OffthreadVideoImageFormat type is no longer neccessary and has therefore been removed.
OffthreadVideoImageFormat 已移除
🌐 OffthreadVideoImageFormat removed
<Img> 如果无法加载图片将取消渲染
🌐 <Img> will cancel the render if the image cannot be loaded
以前,<Img> 只有在图片无法加载时才会记录到控制台,如果错误未被处理,最终会导致超时。
🌐 Before, <Img> would only log to the console if an image cannot be loaded and inevitably lead to a timeout if the error is not handled.
如果现在发生这种情况且错误未被处理,渲染将被中止并报告该错误。
🌐 If this happens now and the error is not handled, the render will be aborted and the error reported.
crf 现在不再允许用于 GIF
🌐 crf is not allowed for GIFs anymore
以前你可以在渲染 GIF 时为 crf 设置一个值。这是一个错误,GIF 不支持它们。
🌐 Previously you were able to set a value for crf when rendering a GIF. This was a mistake and GIF does not support them.
staticFile() URI 不安全字符处理
🌐 staticFile() URI-unsafe characters handling
之前,staticFile() 不处理提供路径中包含的 URI 不安全字符:
🌐 Previously, staticFile() did not handle URI-unsafe characters contained in the provided path:
Before v4staticFile('my-image#portrait.png'); //output: "my-image#portrait.png"
当不安全的字符如 #、? 和 & 出现在文件名中时,这可能会导致问题。
🌐 This could lead to problems, when unsafe characters such as #, ? and & were part of the filename.
现在,staticFile() 使用 encodeURIComponent 编码文件名:
🌐 Now, staticFile() encodes the filename using encodeURIComponent:
Since v4.0.0staticFile('my-image#portrait.png'); // "my-image%23portrait.png"
类型 WebpackOverrideFn 已移动
🌐 Type WebpackOverrideFn moved
WebpackOverrideFn 类型用于在配置文件和 bundle() 中覆盖 Webpack 配置,已从 remotion 包移至 @remotion/bundler 包。
🌐 The WebpackOverrideFn type useful for overriding the Webpack config in the config file and in bundle() has moved from the remotion to the @remotion/bundler package.
如何升级:
如果你直到现在都是自己编码路径,请不要再这样做,以避免双重编码。
🌐 If you encoded the path by yourself until now, don't do so anymore to avoid double encoding.
react-native 不再是 react-native-web 的别名
🌐 react-native no longer aliases to react-native-web
Remotion 不再自动将 react-native 别名为 react-native-web。
如果你正在使用 react-native-web,请像这样覆盖 Webpack 配置以恢复以前的行为:
🌐 Remotion no longer aliases react-native automatically to react-native-web.
If you are using react-native-web, override the Webpack config like this to restore the previous behavior:
remotion.config.tsimport {Config } from '@remotion/cli/config';Config .overrideWebpackConfig ((config ) => { return { ...config ,resolve : { ...config .resolve ,alias : { ...config .resolve ?.alias , 'react-native$': 'react-native-web', }, }, }; });
@remotion/skia 包不再需要 react-native 或 react-native-web。
🌐 The @remotion/skia package does not require react-native or react-native-web anymore.
TComposition 类型现在包括一个 Zod 模式
🌐 The TComposition type now includes a Zod schema
TComposition 类型现在有两个泛型参数:
🌐 The TComposition type now has two generic arguments:
export type TComposition<Schema extends AnyZodObject, Props> = {};如果你需要一个用于通用组合的类型,你可以使用新的 AnyComposition 类型:
🌐 If you need a type for a generic composition, you can use the new AnyComposition type:
import {AnyComposition} from 'remotion';
const composition: AnyComposition = {
width: 1920,
height: 1080,
// ...
};getCanExtractFramesFast() 功能已被移除
🌐 getCanExtractFramesFast() function has been removed
由于现在可以始终使用 <OffthreadVideo> 快速提取帧,getCanExtractFramesFast() 函数已被移除。
🌐 The getCanExtractFramesFast() function has been removed, since frames can always be extracted fast now using <OffthreadVideo>.
如何升级:
你现在可以移除你的重新编码逻辑了!
🌐 You can now remove your re-encoding logic!
输入属性必须是对象
🌐 Input props must be an object
由于输入的 props 是传递给 React 组件的,它们不能明确是对象({})。你仍然可以使用其他数据结构,例如数组,但它们必须封装在一个对象中。
🌐 Since the input props are passed to a React component, they must not explicitly be objects ({}). You can still use other data structures such as arrays, but they must be wrapped in an object.
不能为属性使用 interface
🌐 Cannot use an interface for props
以下代码现在会产生类型错误:
🌐 The following code now gives a type error:
interface MyProps {
title: string;
}
const Hi = (props: MyProps) => {
return <div>{props.title}</div>;
};
<Still component={Hi} id="interface-props" defaultProps={{title: 'hi'}} height={1080} width={1080} />;这是因为 props 现在必须是一个对象并满足 Record<string, unknown> 的结构。
interface 不满足此结构,因此你必须改用 type:
🌐 This is because props must now be an object and satisfy the shape Record<string, unknown>.
interface's do not satisfy this shape, so you must use a type instead:
type MyProps = {
title: string;
};另见:输入属性必须是对象
🌐 See also: Input props must be an object
如果组件有 props,则需要 defaultProps
🌐 defaultProps is required if the component has props
如果你用一个需要一些 props 的组件注册一个组合,现在你必须提供一个 defaultProps 对象。
🌐 If you register a composition with a component that requires some props, you now are required to provide a defaultProps object.
renderMedia() 的 inputProps 选项现在工作方式不同
🌐 inputProps option of renderMedia() now works differently
renderMedia() 接受一个用于 composition 选项的 VideoConfig 对象,该对象现在有一个 props 字段:
await renderMedia ({
...options ,
composition : {
...composition ,
props : {
title : 'Hello world',
},
},
inputProps : {
title : 'Hi there',
},
});composition.props 现在是传递给组件的有效属性,而 inputProps 则是可以通过 getInputProps() 获取的内容。
🌐 The composition.props are now the effective props that get passed to the component, while inputProps are what can be retrieved using getInputProps().
以前,inputProps 会覆盖默认属性并传递给组件。
🌐 Previously, inputProps would override the default props and be passed to the component.
推荐的方法是使用 selectComposition() 或 getCompositions() 获取 composition 对象。但是,为了更快地启动渲染,可以手动构建 composition 对象。
🌐 The recommended way is to get the composition object using selectComposition() or getCompositions(). However, for the purpose of starting renders faster, the composition object may be constructed manually.
更新日志
🌐 Changelog
- remotion:如果组件接受 props,现在
<Composition>的defaultProps是必需的 - remotion:
<Composition>现在接受一个模式 - remotion:
<Composition>现在接受一个calculateMetadata属性 - remotion:
OffthreadVideoImageFormat类型已被移除。 - 移除:
imageFormat已从<OffthreadVideo>中移除 - remotion:
transparent已被添加到<OffthreadVideo>。 - remotion:
<Img>如果图片无法加载,将取消渲染 - remotion:如果无法加载
<Html5Audio>标签,它将取消渲染。 - remotion:
TComposition类型现在需要一个 Zod 模式作为泛型。 - remotion:类型
WebpackOverrideFn已从remotion移动到@remotion/bundler - remotion:
staticFile()现在默认支持 URI 不安全字符 - remotion: 类型:
src是<Img>标签所必需的 - @remotion/bundler:如果设置
--bundle-cache=false,开发 Webpack 缓存将不再被移除。 - @remotion/bundler:
react-native不再别名为react-native-web - @remotion/bundler: Webpack 已升级到
5.83.1 - @remotion/cli:
npx remotion preview已不推荐使用,取而代之的是npx remotion studio - @remotion/cli:新的 Props 编辑器 允许通过 schema 编辑 props
- @remotion/cli:新的渲染按钮允许通过 CLI 进行渲染
- @remotion/cli: 新的
npx remotion ffmpeg命令 - @remotion/cli: 新的
npx remotion ffprobe命令 - @remotion/cli:配置逻辑已移至
@remotion/cli/config - @remotion/cli: 丰富时间轴已被移除。
- @remotion/cli:
Config.*.setOption()语法已被移除。 - @remotion/cli:
Config.setOutputFormat()已被删除。 - @remotion/cli:Studio 现在有自定义暗色滚动条
- @remotion/cli:用于详细模式的新记录器:日志和进度条之间不再交错
- @remotion/cli:新增指示器,显示文件是已被覆盖(
○)还是新创建(+) - @remotion/cli:如果所有 Studio 实例都已关闭,再次将服务器 URL 打印到控制台
- @remotion/cli:在 Remotion Studio 中减少 React 的重新渲染
- @remotion/cli:下拉菜单不再会溢出
- @remotion/cli:折叠左侧边栏的新快捷键:
Cmd/Ctrl+B - @remotion/cli 允许从 Remotion Studio 在编辑器中打开项目
- @remotion/cli:
Date对象现在可以在defaultProps中正常工作 - @remotion/cli:Remotion Studio 已经测试可以很好地离线使用。
- @remotion/cli:"Remotion Preview" 已重命名为 "Remotion Studio"
- @remotion/eslint-config:
eslint-plugin-react已更新为7.32.2 - @remotion/eslint-config:
eslint-plugin-react-hooks已更新为4.6.0 - @remotion/eslint-plugin:新的 ESLint 规则:在配置文件中使用正确的导入
- @remotion/lambda:Lambda 不再支持 x86 架构
- @remotion/lambda:Lambda 上的 Chrome 已更新到 114
- @remotion/lambda:
downloadVideo()别名已被移除。 - @remotion/lambda:
estimatePrice()不再接受architecture。 - @remotion/lambda:已从 Lambda 层中移除 FFmpeg。
- @remotion/motion-blur:
<MotionBlur>已被移除 - @remotion/paths:
getParts()已被移除 - @remotion/renderer: 新的
selectComposition()API - @remotion/renderer:
getCanExtractFramesFast()已被移除 - @remotion/renderer:FFmpeg现在已包含在Remotion(v6.0)中,无需再安装它
- @remotion/renderer:ProRes现在默认导出无损音频。
- @remotion/renderer:
onSlowestFrames已被移除 - @remotion/renderer:
renderMedia()现在返回一个对象,而不是Buffer。 - @remotion/renderer:
ImageFormat类型已被移除,取而代之的是StillImageFormat和VideoImageFormat - @remotion/renderer:你现在可以将静态图片导出为 PDF 或 WebP
- @remotion/renderer:
quality现在是jpegQuality - @remotion/renderer:已移除
ensureFfmpeg()和ensureFfprobe() - @remotion/renderer:
<OffthreadVideo>现在使用基于 Rust 的帧提取器 - @remotion/renderer:嘈杂的 Chrome 消息已被过滤。
- @remotion/renderer:你在 React 应用中的
console.log语句现在以整洁的格式打印,包含位置,使用颜色,并且对象预览也会被打印出来。 - @remotion/zod-types:新包!
- 目前,Remotion 仅支持以下平台:macOS(x64 和 arm64)、Windows(x64)、Linux(x64 和 ARM,GNU Libc 和 MUSL)
- 所有包:最低 Node 版本现在是 16.0.0
- 所有包:ESLint 已升级到
8.42.0 - 所有包:TypeScript ESLint 已升级到
5.59.9 - 所有包:ESBuild 已更新到
0.18.6 - 对于贡献者:已将
pnpm更新为8.5.1 - 对于贡献者:文档片段类型检查失败时,现在会在 CI 中显示失败的代码
- 推荐的 Docker 文件 不再安装
ffmpeg