Skip to main content

在现有项目中安装 Remotion

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

npm i --save-exact remotion@4.0.206 @remotion/cli@4.0.206
npm i --save-exact remotion@4.0.206 @remotion/cli@4.0.206
This assumes you are currently using v4.0.206 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。

设置文件夹结构​

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

remotion/Composition.tsx
tsx
export const MyComposition = () => {
  return null;
};
remotion/Composition.tsx
tsx
export const MyComposition = () => {
  return null;
};
remotion/Root.tsx
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/Root.tsx
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
ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
 
registerRoot(RemotionRoot);
remotion/index.ts
ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
 
registerRoot(RemotionRoot);

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

note

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

启动 Studio​

使用以下命令启动 Remotion Studio：

npx remotion studio remotion/index.ts
npx remotion studio remotion/index.ts

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

渲染视频​

渲染视频

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

替换入口点、组合名称和输出文件名为与您的用例相对应的值。

安装 ESLint 插件​

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

bash
npm i @remotion/eslint-plugin
bash
npm i @remotion/eslint-plugin

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

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

在 React 应用中嵌入 Remotion 视频​

您可以使用 <Player> 组件在 React 项目中显示 Remotion 视频。阅读有关此操作的单独页面获取说明。