v4.0 迁移

在从 Remotion 3 升级到 Remotion 4 时，请注意以下更改并将其应用到您的项目中。

如何升级

查看变更日志以找到最新版本。将 remotion 和所有以 @remotion 开头的包升级到最新版本，例如 4.0.0：

diff
- "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"

diff
- "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。

系统要求

最低 Node 版本现在为 16.0.0。

仅支持以下平台：Windows（仅限 x64）、macOS、Linux。

具有 glibc 的 Linux 发行版需要至少版本 2.35。在此处查看更多信息。

配置文件更改

CLI 配置文件已从核心 Remotion 包移动到 @remotion/cli/config。更新您的导入如下：

diff
- import {Config} from 'remotion';
+ import {Config} from '@remotion/cli/config';

diff
- import {Config} from 'remotion';
+ import {Config} from '@remotion/cli/config';

选项已被展平。例如，不再使用 Config.Bundling.overrideWebpackConfig，而是现在使用 Config.overrideWebpackConfig。

diff
- Config.Bundling.overrideWebpackConfig()
+ Config.overrideWebpackConfig()
- Config.Output.setOverwriteOutput(true);
+ Config.setOverwriteOutput(true);

diff
- Config.Bundling.overrideWebpackConfig()
+ Config.overrideWebpackConfig()
- Config.Output.setOverwriteOutput(true);
+ Config.setOverwriteOutput(true);

将此应用于所有配置调用。

分离 `ImageFormat`

以前，imageFormat 选项将用于静态图像和视频。虽然对于静态图像，PNG 通常更可取，但对于视频来说，默认情况下使用 JPEG 整体速度更快。在 Remotion 4.0 中，图像格式被分开，因此您可以分别为视频和静态图像设置默认值。

Config.setImageFormat 被 Config.setVideoImageFormat() 和 Config.setStillImageFormat() 替换。

diff
- Config.setImageFormat('jpeg');
+ Config.setVideoImageFormat('jpeg');

diff
- Config.setImageFormat('jpeg');
+ Config.setVideoImageFormat('jpeg');

所有命令的 CLI 选项仍为 --image-format。
Node.JS API 名称仍为 imageFormat。
TypeScript 类型 ImageFormat 已分为 StillImageFormat 和 VideoImageFormat。
StillImageFormat 现在还支持 webp 和 pdf！

简化的日志记录

对于getCompositions(), renderMedia(), renderStill(), getCompositionsOnLambda(), renderMediaOnLambda() 和 renderStillOnLambda():

verbose 和 dumpBrowserLogs 已被弃用，推荐使用 "logLevel": "verbose"。这使得选项等同于 CLI 选项。

不再支持 Lambda `architecture`

在部署 Lambda 时，您以前可以在 arm64 和 x86_64 架构之间进行选择。
从 v4.0 开始，仅支持 arm64。这应该更快、更便宜，并且不会有任何与 x86_64 不同的行为。

升级方法:

从 estimatePrice() 和 deployFunction() 中移除 architecture 选项。

移除了丰富的时间轴

由于性能问题，使用 "丰富的时间轴" 选项已被移除。
现在时间轴始终处于简单模式，但支持同时显示更多时间轴层。

ProRes 视频现在默认导出未压缩音频

以前，ProRes 导出的默认音频编解码器是 aac。现在默认是 pcm_s16le，代表未压缩的 16 位低端 PCM 音频。
这一变更是因为用户主要导出 ProRes 以获取高质量素材，以便在视频编辑程序中进一步使用。

将 `quality` 选项重命名为 `jpegQuality`

为了澄清此选项的含义，现在通用称为 "JPEG 质量"。调整以下选项：

npx remotion render: 使用 --jpeg-quality 替代 --quality
npx remotion still: 使用 --jpeg-quality 替代 --quality
npx remotion benchmark: 使用 --jpeg-quality 替代 --quality
npx remotion lambda render: 使用 --jpeg-quality 替代 --quality
npx remotion lambda still: 使用 --jpeg-quality 替代 --quality
renderFrames(): 使用 jpegQuality 替代 quality
renderMedia(): 使用 jpegQuality 替代 quality
renderStill(): 使用 jpegQuality 替代 quality
renderMediaOnLambda(): 使用 jpegQuality 替代 quality
renderStillOnLambda(): 使用 jpegQuality 替代 quality

不再需要安装FFmpeg，`ffmpegExecutable` 选项已移除

FFmpeg 现在已经内置到 @remotion/renderer 包中。因此，ffmpegExecutable 和 ffprobeExecutable 选项已被移除。

此外，npx remotion install ffmpeg 和 npx remotion install ffprobe 命令也不再存在。

升级方法：

从 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`

由于不再需要安装 FFmpeg 和 FFprobe，你的环境中可能也不再有 ffmpeg 和 ffprobe 命令。为了仍然能够使用一些有用的 FFmpeg 命令，我们引入了 npx remotion ffmpeg 和 npx remotion ffprobe。请注意，为了保持二进制文件的大小，这些 FFmpeg 二进制文件只支持 Remotion 本身支持的编解码器：H.264、H.265、VP8、VP9 和 ProRes。

移动了 `onSlowestFrames` API

在 V3 中，onSlowestFrames 是一个回调函数，你可以将其传递给 renderMedia()。
在 V4 中，这些数据已经移动到返回值中。

ImageFormat 已移除

@remotion/renderer 中的 ImageFormat 类型已被更具体的类型 VideoImageFormat 和 StillImageFormat 替换。

移除了已弃用的 API

Config.setOutputFormat() 在 v1.4 中已弃用，现已移除。请改用 setImageSequence()、setVideoImageFormat() 和 setCodec() 的组合。
downloadVideo() 别名已移除，请改用相同 API 的 downloadMedia()。
<MotionBlur> 已移除，请改用 <Trail>。
getParts() 已移除，请改用 getSubpaths()：

paths.ts
tsx
import {
  getLength,
  getPointAtLength,
  getSubpaths,
  getTangentAtLength,
} from "@remotion/paths";
 
const path = "M 0 0 L 100 100";
const parts = getSubpaths(path[0]);
const length = getLength(parts[0]);
const start = getPointAtLength(parts[0], 0);
const end = getPointAtLength(parts[0], length);
const tangent = getTangentAtLength(parts[0], length / 2);

paths.ts
tsx
import {
  getLength,
  getPointAtLength,
  getSubpaths,
  getTangentAtLength,
} from "@remotion/paths";
 
const path = "M 0 0 L 100 100";
const parts = getSubpaths(path[0]);
const length = getLength(parts[0]);
const start = getPointAtLength(parts[0], 0);
const end = getPointAtLength(parts[0], length);
const tangent = getTangentAtLength(parts[0], length / 2);

webpackBundle 已从 renderFrames() 和 renderMedia() 中移除 - 请改为使用 serveUrl。
parallelism 已从 renderFrames() 和 renderMedia() 中移除 - 请改为使用 concurrency。
config 已从 renderFrames() 中移除 - 请改为使用 composition。

移除了 `onBucketEnsured` 选项

getOrCreateBucket() 的 onBucketEnsured() 选项已移除，因为创建存储桶是 getOrCreateBucket() 的唯一操作。因此，你可以直接等待函数本身。

从 `<OffthreadVideo>` 中移除了 `imageFormat`

到目前为止，你可以选择将 imageFormat 属性传递给 <OffthreadVideo>。这个选项是为了实现透明视频。

现在，你可以改为使用可选的 transparent 属性。

由于这个更改，OffthreadVideoImageFormat 类型不再需要，因此已被移除。

移除了 `OffthreadVideoImageFormat`

`<Img>` 如果无法加载图像，将取消渲染

以前，<Img> 只会在无法加载图像时记录到控制台，并最终导致超时，如果错误未被处理。

如果现在发生这种情况且错误未被处理，渲染将被中止并报告错误。

GIF 不再允许使用 `crf`

以前，您可以在渲染 GIF 时为 crf 设置一个值。这是一个错误，因为 GIF 不支持它们。

`staticFile()` 处理 URI 不安全字符

以前，staticFile() 没有处理提供的路径中包含的 URI 不安全字符：

v4 之前
tsx
staticFile("my-image#portrait.png"); //输出: "my-image#portrait.png"

v4 之前
tsx
staticFile("my-image#portrait.png"); //输出: "my-image#portrait.png"

当不安全字符如 #、? 和 & 是文件名的一部分时，可能会导致问题。

现在，staticFile() 使用 encodeURIComponent 对文件名进行编码：

v4.0.0 起
tsx
staticFile("my-image#portrait.png"); // "my-image%23portrait.png"

v4.0.0 起
tsx
staticFile("my-image#portrait.png"); // "my-image%23portrait.png"

类型 `WebpackOverrideFn` 移动

用于在配置文件和 bundle() 中覆盖 Webpack 配置的 WebpackOverrideFn 类型已从 remotion 移动到 @remotion/bundler 包中。

如何升级：

如果您到目前为止自己对路径进行编码，请不要再这样做，以避免双重编码。

`react-native` 不再自动别名为 `react-native-web`

Remotion 不再自动将 react-native 别名为 react-native-web。
如果您正在使用 react-native-web，请像这样覆盖 Webpack 配置以恢复先前的行为：

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        "react-native$": "react-native-web",
      },
    },
  };
});

remotion.config.ts
ts
import { 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。

`TComposition` 类型现在包含一个 Zod 模式

TComposition 类型现在有两个泛型参数：

ts
export type TComposition<Schema extends AnyZodObject, Props> = {};

ts
export type TComposition<Schema extends AnyZodObject, Props> = {};

如果您需要一个通用组合的类型，可以使用新的 AnyComposition 类型：

ts
import { AnyComposition } from "remotion";
const composition: AnyComposition = {
  width: 1920,
  height: 1080,
  // ...
};

ts
import { AnyComposition } from "remotion";
const composition: AnyComposition = {
  width: 1920,
  height: 1080,
  // ...
};

`getCanExtractFramesFast()` 函数已被移除

getCanExtractFramesFast() 函数已被移除，因为现在可以始终快速提取帧，使用 <OffthreadVideo>。

升级方法：

您现在可以移除重新编码逻辑！

输入属性必须是对象

由于输入属性被传递给一个 React 组件，它们不能明确地是对象 ({})。您仍然可以使用其他数据结构，比如数组，但它们必须包装在一个对象中。

不能为属性使用 `interface`

以下代码现在会产生类型错误：

tsx
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}
/>;

tsx
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}
/>;

这是因为属性现在必须是一个对象，并满足形状 Record<string, unknown>。interface 不满足这种形状，因此您必须使用 type：

tsx
type MyProps = {
  title: string;
};

tsx
type MyProps = {
  title: string;
};

另请参阅：输入属性必须是对象

如果组件具有属性，则 `defaultProps` 是必需的

如果您注册一个需要一些属性的组件的组合，现在您必须提供一个 defaultProps 对象。

`renderMedia()` 的 `inputProps` 选项现在工作方式不同

renderMedia() 现在接受一个 VideoConfig 对象作为 composition 选项，该对象现在有一个 props 字段：

tsx
await renderMedia({
  ...options,
  composition: {
    ...composition,
    props: {
      title: "Hello world",
    },
  },
  inputProps: {
    title: "Hi there",
  },
});

tsx
await renderMedia({
  ...options,
  composition: {
    ...composition,
    props: {
      title: "Hello world",
    },
  },
  inputProps: {
    title: "Hi there",
  },
});

composition.props 现在是传递给组件的有效属性，而 inputProps 是可以使用 getInputProps() 检索的属性。

以前，inputProps 会覆盖默认属性并传递给组件。

推荐的方法是使用 selectComposition() 或 getCompositions() 获取 composition 对象。但是，为了更快地开始渲染，可以手动构造 composition 对象。

更新日志

remotion：如果组件接受属性，则 <Composition> 的 defaultProps 现在是必需的
remotion：<Composition> 现在接受一个模式
remotion：<Composition> 现在接受一个 calculateMetadata 属性
remotion：OffthreadVideoImageFormat 类型已被移除。
remotion：<OffthreadVideo> 中已移除 imageFormat
remotion：在 <OffthreadVideo> 中已添加 transparent
remotion：如果无法加载图像，<Img> 将取消渲染
remotion：如果无法加载 <Audio> 标签，将取消渲染。
remotion：TComposition 类型现在要求一个 Zod 模式作为泛型。
remotion：WebpackOverrideFn 类型已从 remotion 移动到 @remotion/bundler
remotion：staticFile() 现在默认支持 URI 不安全字符
remotion：类型：<Img> 标签现在需要 src
@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 编辑器允许使用模式编辑属性
@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 预览" 现已更名为 "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 Layer 中移除了 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：在 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 中显示失败的代码
新的 Google TTS 模板！
推荐的 Docker 文件不再安装 ffmpeg。

Please paste the Markdown content you'd like me to translate into Chinese.

如何升级​

系统要求​

配置文件更改​

分离 ImageFormat​

简化的日志记录​

不再支持 Lambda architecture​

移除了丰富的时间轴​

ProRes 视频现在默认导出未压缩音频​

将 quality 选项重命名为 jpegQuality​

不再需要安装FFmpeg，ffmpegExecutable 选项已移除​

新增 npx remotion ffmpeg 和 npx remotion ffprobe​

移动了 onSlowestFrames API​

ImageFormat 已移除​

移除了已弃用的 API​

移除了 onBucketEnsured 选项​

从 <OffthreadVideo> 中移除了 imageFormat​

移除了 OffthreadVideoImageFormat​

<Img> 如果无法加载图像，将取消渲染​

GIF 不再允许使用 crf​

staticFile() 处理 URI 不安全字符​

类型 WebpackOverrideFn 移动​

react-native 不再自动别名为 react-native-web​

TComposition 类型现在包含一个 Zod 模式​

getCanExtractFramesFast() 函数已被移除​

输入属性必须是对象​

不能为属性使用 interface​

如果组件具有属性，则 defaultProps 是必需的​

renderMedia() 的 inputProps 选项现在工作方式不同​

更新日志​