Skip to main content

在现有项目中安装 Remotion

Remotion 可以安装到现有项目中，例如 Next.JS、React Router、Vite 或 Create React App，也可以安装到仅在 Node.JS 上运行的服务器项目中。通过添加以下包即可开始使用：

🌐 Remotion can be installed into existing projects, such as Next.JS, React Router, Vite or Create React App, as well as server-only projects that run on Node.JS. Get started by adding the following packages:

npm i --save-exact remotion@4.0.431 @remotion/cli@4.0.431
This assumes you are currently using v4.0.431 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.
  • 如果你想在现有的 React 应用中嵌入 Remotion 视频，也请安装 @remotion/player。
  • 如果你想使用 Node.JS API 渲染视频，也请安装 @remotion/renderer。
  • 如果你想在 Remotion Lambda 上触发渲染，也请安装 @remotion/lambda 。

设置文件夹结构​

🌐 Setting up the folder structure

为 Remotion 文件创建一个新文件夹。它可以放在任何地方，名称可以随意，在此示例中我们将其命名为 remotion 并放在项目的根目录下。在你创建的文件夹内，创建 3 个文件：

🌐 Create a new folder for the Remotion files. It can be anywhere and assume any name, in this example we name it remotion and put it in the root of our project. Inside the folder you created, create 3 files:

remotion/Composition.tsx
export const MyComposition = () => {
  return null;
};
remotion/Root.tsx
import React from 'react';
import {Composition} from 'remotion';
import {MyComposition} from './Composition';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="Empty"
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};
remotion/index.ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";

registerRoot(RemotionRoot);

调用 registerRoot() 的文件现在是你的 Remotion 入口点。

🌐 The file that calls registerRoot() is now your Remotion entry point.

note

注意你在 tsconfig.json 中的导入别名，它们会将 import {...} from "remotion" 解析到 remotion 文件夹。我们建议不要在没有前缀的情况下使用 paths。

启动工作室​

🌐 Starting the Studio

使用以下命令启动 Remotion Studio：

🌐 Start the Remotion Studio using the following command:

npx remotion studio remotion/index.ts

如有必要，将 remotion/index.ts 替换为你的入口点。

🌐 Replace remotion/index.ts with your entrypoint if necessary.

渲染视频​

🌐 Render a video

使用渲染我们的视频

🌐 Render our a video using

npx remotion render remotion/index.ts MyComp out.mp4

将入口点、合成名称和输出文件名替换为与你的使用情况相对应的值。

🌐 Replace the entrypoint, composition name and output filename with the values that correspond to your usecase.

安装 ESLint 插件​

🌐 Install the ESLint Plugin

Remotion 有一个 ESLint 插件，用于警告不当使用 Remotion API 的情况。要将其添加到现有项目中，请安装它：

🌐 Remotion has an ESLint plugin that warns about improper usage of Remotion APIs. To add it to your existing project, install it:

npm i -D @remotion/eslint-plugin

此代码片段将仅为 Remotion 文件启用推荐规则：

🌐 This snippet will enable the recommended rules only for the Remotion files:

.eslintrc
{
  "plugins": ["@remotion"],
  "overrides": [
    {
      "files": ["remotion/*.{ts,tsx}"],
      "extends": ["plugin:@remotion/recommended"]
    }
  ]
}

将 Remotion 视频嵌入到你的 React 应用中​

🌐 Embed a Remotion video into your React app

你可以使用 <Player> 组件在你的 React 项目中显示 Remotion 视频。阅读关于它的独立页面以获取说明。

🌐 You can use the <Player> component to display a Remotion video in your React project. Read the separate page about it for instructions.

Last updated on