Skip to main content

@remotion/skia

此软件包提供了一些有用的工具,可用于将React Native Skia与 Remotion 集成。

EXPERIMENTAL

此软件包目前仅用作技术验证。

在次要版本更新中可能会发生更改。升级时,请监视此文档页面以查看重大更改。

安装

安装 @remotion/skia 以及 @shopify/react-native-skia

bash
npm i @remotion/skia @shopify/react-native-skia
bash
npm i @remotion/skia @shopify/react-native-skia
note

自 Remotion v3.3.93 和 React Native Skia 0.1.191 起,react-native-web 不再是一个依赖项。您可以从项目中删除它。

还要更新所有其他 Remotion 软件包,使它们具有相同的版本:remotion@remotion/cli 和其他软件包。

note

请确保没有软件包版本号前面有 ^ 字符,因为这可能导致版本冲突。

覆盖 Webpack 配置 通过使用 enableSkia()

remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableSkia } from "@remotion/skia/enable";
 
Config.overrideWebpackConfig((currentConfiguration) => {
return enableSkia(currentConfiguration);
});
remotion.config.ts
ts
import { Config } from "@remotion/cli/config";
import { enableSkia } from "@remotion/skia/enable";
 
Config.overrideWebpackConfig((currentConfiguration) => {
return enableSkia(currentConfiguration);
});
note

v3.3.39 之前,该选项称为 Config.Bundling.overrideWebpackConfig()

接下来,您需要重构入口点文件,以在调用 registerRoot() 之前首先加载 Skia WebAssembly 二进制文件:

src/index.ts
ts
import { LoadSkia } from "@shopify/react-native-skia/src/web";
import { registerRoot } from "remotion";
 
(async () => {
await LoadSkia();
const { RemotionRoot } = await import("./Root");
registerRoot(RemotionRoot);
})();
src/index.ts
ts
import { LoadSkia } from "@shopify/react-native-skia/src/web";
import { registerRoot } from "remotion";
 
(async () => {
await LoadSkia();
const { RemotionRoot } = await import("./Root");
registerRoot(RemotionRoot);
})();

现在,您可以在 Remotion 项目中开始使用 <SkiaCanvas>

模板

您可以在此处找到起始模板,或者使用以下命令进行安装:

bash
npx create-video --skia
bash
npx create-video --skia

渲染

默认情况下,Remotion 渲染是在 CPU 上完成的。一些 Skia 特效依赖于高级 GPU 功能,这可能会导致在 CPU 上运行速度较慢,具体取决于您使用的特效类型。如果您的 Skia 导出速度非常慢,我们发现通过 --gl=angle 选项启用 GPU 可显著改善情况。请查看关于GPU 渲染的文档。

sh
remotion render Main out/video.mp4 --gl=angle
sh
remotion render Main out/video.mp4 --gl=angle

资源

API