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​