@remotion/skia
此软件包提供了一些有用的工具,可用于将React Native Skia与 Remotion 集成。
EXPERIMENTAL
此软件包目前仅用作技术验证。
在次要版本更新中可能会发生更改。升级时,请监视此文档页面以查看重大更改。
安装
安装 @remotion/skia
以及 @shopify/react-native-skia
。
- npm
- yarn
- pnpm
bash
npm i @remotion/skia @shopify/react-native-skia
bash
npm i @remotion/skia @shopify/react-native-skia
bash
yarn add @remotion/skia @shopify/react-native-skia
bash
yarn add @remotion/skia @shopify/react-native-skia
bash
pnpm i @remotion/skia @shopify/react-native-skia
bash
pnpm 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.tsts
import {Config } from "@remotion/cli/config";import {enableSkia } from "@remotion/skia/enable";Config .overrideWebpackConfig ((currentConfiguration ) => {returnenableSkia (currentConfiguration );});
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableSkia } from "@remotion/skia/enable";Config .overrideWebpackConfig ((currentConfiguration ) => {returnenableSkia (currentConfiguration );});
note
在 v3.3.39
之前,该选项称为 Config.Bundling.overrideWebpackConfig()
。
接下来,您需要重构入口点文件,以在调用 registerRoot() 之前首先加载 Skia WebAssembly 二进制文件:
src/index.tsts
import {LoadSkia } from "@shopify/react-native-skia/src/web";import {registerRoot } from "remotion";(async () => {awaitLoadSkia ();const {RemotionRoot } = await import("./Root");registerRoot (RemotionRoot );})();
src/index.tsts
import {LoadSkia } from "@shopify/react-native-skia/src/web";import {registerRoot } from "remotion";(async () => {awaitLoadSkia ();const {RemotionRoot } = await import("./Root");registerRoot (RemotionRoot );})();
现在,您可以在 Remotion 项目中开始使用 <SkiaCanvas>
。
模板
您可以在此处找到起始模板,或者使用以下命令进行安装:
- npm
- bun
- pnpm
- yarn
bash
npx create-video --skia
bash
npx create-video --skia
bash
bun create video --skia
bash
bun create video --skia
bash
yarn create video --skia
bash
yarn create video --skia
bash
pnpm create video --skia
bash
pnpm 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