开源视频创建及编辑框架Revideo

作者

项目简介

Revideo 是一个用于程序化视频编辑的开源框架。它是从令人惊叹的 Motion Canvas 编辑器分叉出来的，目标是将其从独立的应用程序转变为开发人员可以用来构建整个视频编辑应用程序的库。


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


入门

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

npm init @revideo@latest

该示例项目将具有以下代码，它定义了如下所示的视频。

import {Audio, Img, Video, makeScene2D} from '@revideo/2d';import {all, chain, createRef, waitFor} from '@revideo/core';
export default makeScene2D('scene', 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),  );});


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/> 标签，可以轻松将音频与动画同步。


遥测

为了了解人们如何使用 Revideo，我们匿名跟踪使用开源工具 Posthog 渲染的视频数量。您可以在这里找到我们实现 Posthog 的代码。

If you want to disable telemetry, just set the following environment variable:
如果要禁用遥测，只需设置以下环境变量：

DISABLE_TELEMETRY=true

项目链接

https://github.com/redotvideo/revideo

扫码加入技术交流群，备注「开发语言-城市-昵称」

（文：GitHubStore）

发表评论