Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/redotvideo/revideo
Create Videos with Code
https://github.com/redotvideo/revideo
Last synced: 28 days ago
JSON representation
Create Videos with Code
- Host: GitHub
- URL: https://github.com/redotvideo/revideo
- Owner: redotvideo
- License: mit
- Created: 2024-03-11T10:04:04.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-07-29T12:25:18.000Z (4 months ago)
- Last Synced: 2024-07-30T09:40:00.827Z (3 months ago)
- Language: TypeScript
- Homepage: https://re.video
- Size: 12.3 MB
- Stars: 1,790
- Watchers: 9
- Forks: 50
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-github-repos - redotvideo/revideo - Create Videos with Code (TypeScript)
- awesome-video - Revideo - A Typescript framework for programmatic video creation & editing. (Language and platform specific libraries / Javascript)
README
# Revideo - Create Videos with Code
Revideo is an open source framework for programmatic video editing. It is forked
from the amazing [Motion Canvas](https://motioncanvas.io/) editor, with the goal
of turning it from a standalone application into a library that developers can
use to build entire video editing apps.
Revideo lets you create video templates in Typescript and deploy an API endpoint
to render them with dynamic inputs. It also provides a React player component to
preview changes in the browser in real-time. If you want to learn more, you can
check out our [docs](https://docs.re.video/), our
[examples repository](https://github.com/redotvideo/revideo-examples), and join
our [Discord server](https://discord.com/invite/MVJsrqjy3j).
#### News 🔥
- [05/21/2024] We released an
[example](https://github.com/redotvideo/revideo-examples/tree/main/google-cloud-run-parallelized)
on how to parallelize rendering jobs with Google Cloud Functions
- [05/20/2024] We have a [new website](https://re.video/)!
## Getting Started
To create an example project, run the following command:
```bash
npm init @revideo@latest
```
The example project will have the following code, which defines the video shown
below.
```tsx
import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';
export default makeScene2D(function* (view) {
const logoRef = createRef![]()
();
yield view.add(
<>
>,
);
yield* waitFor(1);
view.add(
,
);
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
## Differences between Revideo and Motion Canvas
Motion Canvas aims to be a
[standalone editor](https://github.com/orgs/motion-canvas/discussions/1015) for
animations. While it happens to be distributed as an npm package, the
maintainers don't intend for it to be used as a library.
We started out as users of Motion Canvas ourselves but ran into these
limitations when we wanted to build a video editing app on top of it. After
building our initial version using Motion Canvas' plugin system, we realized
that we wanted to make more fundamental changes to the codebase that would be
difficult to implement while keeping compatibility with the existing Motion
Canvas API.
That's why we decided to fork the project and turn it into Revideo. We wrote a
bit more about it on our [blog](https://re.video/blog/fork).
Concretely, some of the differences to Motion Canvas are the following ones:
- **Headless Rendering:** Motion Canvas currently requires you to press a button
in its UI to render a video. We have exposed this functionality as a
[function call](https://docs.re.video/renderer/renderVideo/) and are making it
possible to deploy a rendering API to services like Google Cloud Run
([example](https://github.com/redotvideo/revideo-examples/tree/main/google-cloud-run),
or to use our CLI to expose a rendering endpoint from your Revideo project
([docs](https://docs.re.video/render-endpoint))
- **Faster Rendering:** When building an app rather than creating videos for
yourself, rendering speeds are quite important. We have sped up rendering
speeds by enabling
[parallelized rendering](https://github.com/redotvideo/revideo/pull/74) and
replacing the `seek()` operation for HTML video with our ffmpeg-based
[video frame extractor](https://github.com/redotvideo/revideo/pull/33)
- **Better Audio Support:** We have enabled audio export from `` tags
during rendering, and have also added an `` tag that makes it easy to
synchronize audio with your animations.
## Telemetry
To understand how people use Revideo, we **anonymously** track how many videos
are rendered using the open-source tool
[Posthog](https://github.com/PostHog/posthog). You can find our code
implementing Posthog
[here](https://github.com/redotvideo/revideo/tree/main/packages/telemetry).
If you want to disable telemetry, just set the following environment variable:
```bash
DISABLE_TELEMETRY=true
```
## Learn More
To learn more about Revideo, feel free to check out our
[documentation](http://docs.re.video/) or join our
[Discord server](https://discord.gg/hexYBZGBY8).