Skip to main content

@remotion/skia

此包提供用于将 React Native Skia 与 Remotion 集成的实用工具。

🌐 This package provides utilities useful for integrating React Native Skia with Remotion.

安装​

🌐 Installation

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

🌐 Install, @remotion/skia as well as @shopify/react-native-skia.

npm i --save-exact @remotion/skia@4.0.431 @shopify/react-native-skia
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.
note

自从 Remotion v3.3.93 和 React Native Skia 0.1.191 之后，react-native-web 不再是依赖。你可以将其从项目中移除。

同时更新所有其他 Remotion 包到相同版本：remotion、@remotion/cli 等。

🌐 Also update all the other Remotion packages to have the same version: remotion, @remotion/cli and others.

note

确保没有包的版本号前面带有 ^ 字符，因为这可能导致版本冲突。

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

remotion.config.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()。

接下来，你需要重构入口点文件，先加载 Skia WebAssembly 二进制文件，然后再调用 registerRoot()：

🌐 Next, you need to refactor the entry point file to first load the Skia WebAssembly binary before calling registerRoot():

src/index.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>。

🌐 You can now start using the <SkiaCanvas> in your Remotion project.

模板​

🌐 Templates

你可以在此找到 入门模板 或使用以下方式安装：

🌐 You can find the starter template here or install it using:

npx create-video --skia

渲染​

🌐 Rendering

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

🌐 By default Remotion rendering are done on the CPU. Some Skia effects rely on advanced GPU features, which may be slow to run on the CPU depending on the kind of effect you are using. If your Skia export is extremely slow, we found that enabling the GPU via the --gl=angle option improves things substantially. Please check out the documentation on GPU rendering.

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

资源​

🌐 Resources

应用接口​

🌐 APIs

Last updated on