Revideo - 用代码创建视频

Revideo 是一个开源的程序化视频编辑框架。它是从优秀的 Motion Canvas 编辑器分支而来，旨在将其从独立应用转变为开发者可用于构建完整视频编辑应用的库。

Revideo 让你可以用 TypeScript 创建视频模板，并部署 API 端点以使用动态输入渲染它们。它还提供了一个 React 播放器组件，可以在浏览器中实时预览更改。如果你想了解更多，可以查看我们的文档、我们的示例仓库，并加入我们的 Discord 服务器。

新闻 🔥

[2024/05/21] 我们发布了一个示例，展示如何使用 Google Cloud Functions 并行化渲染作业
[2024/05/20] 我们有了新网站！

开始使用

要创建示例项目，运行以下命令：

npm init @revideo@latest

示例项目将包含以下代码，定义了下面显示的视频。

import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';

export default makeScene2D(function* (view) {
  const logoRef = createRef<Img>();

  yield view.add(
    <>
      <Video
        src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
        size={['100%', '100%']}
        play={true}
      />
      <Audio
        src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
        play={true}
        time={17.0}
      />
    </>,
  );

  yield* waitFor(1);

  view.add(
    <Img
      width={'1%'}
      ref={logoRef}
      src={
        'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
      }
    />,
  );

  yield* chain(
    all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
    logoRef().scale(60, 1),
  );
});

https://github.com/havenhq/revideo/assets/122226645/4d4e56ba-5143-4e4b-9acf-d8a04330d162

Revideo 与 Motion Canvas 的区别

Motion Canvas 旨在成为一个独立的动画编辑器。虽然它恰好以 npm 包的形式分发，但维护者并不打算将其作为库使用。

我们最初是 Motion Canvas 的用户，但在想要在其基础上构建视频编辑应用时遇到了这些限制。在使用 Motion Canvas 的插件系统构建我们的初始版本后，我们意识到我们想要对代码库进行更根本的更改，这些更改在保持与现有 Motion Canvas API 兼容的同时很难实现。

这就是为什么我们决定分支该项目并将其转变为 Revideo。我们在我们的博客上写了更多相关内容。

具体来说，与 Motion Canvas 的一些区别如下：

无头渲染： Motion Canvas 目前需要你在其 UI 中按下按钮来渲染视频。我们已将此功能公开为函数调用，并使其可以部署渲染 API 到 Google Cloud Run 等服务（示例），或使用我们的 CLI 从你的 Revideo 项目公开渲染端点（文档）
更快的渲染： 在构建应用而不是为自己创建视频时，渲染速度非常重要。我们通过启用并行渲染并用我们基于 ffmpeg 的视频帧提取器替换 HTML 视频的 seek() 操作来提高渲染速度
更好的音频支持： 我们在渲染期间启用了 <Video/> 标签的音频导出，还添加了一个 <Audio/> 标签，使音频与动画同步变得容易