Miraiclip: an open-source engine for building video editors in the browser
I've been building Miraiclip, an open-source (MIT) engine for video editors that run in the browser. It isn't an editor app. It's the part underneath: project state, a microsecond timeline, undo/redo, a WebGL renderer and export. You build the UI in React, Vue, Svelte or plain JS. Here's a 90-second demo of an editor built on it: https://comaniacs.github.io/miraiclip/#demo A project is a store,…
Miraiclip is an open-source (MIT) engine for creating video editors that operate in web browsers. This engine provides the underlying components, such as project state, a microsecond timeline, undo/redo functionality, a WebGL renderer, and export capabilities. Users can build the user interface with technologies like React, Vue, Svelte, or plain JavaScript.
To create a new project, developers can use the `createProject` function from the `@miraiclip/core` package. For example, the following code snippet creates a project with a width of 1920 pixels, a height of 1080 pixels, and a frame rate of 30 frames per second:
```javascript
const project = createProject({
width: 1920,
height: 1080,
fps: 30
});
```
Next, commands can be dispatched to modify the project. These commands include adding assets, tracks, and clips, as well as performing various edits like splitting or moving clips. For instance, adding a video asset and a video track, and creating a clip from the asset:
```javascript
project.dispatch({
type: 'asset/add',
payload: {
id: 'intro',
kind: 'video',
src: '/intro.mp4',
durationUs: 12_000_000
}
});
project.dispatch({
type: 'track/add',
payload: {
id: 'v1',
kind: 'video'
}
});
project.dispatch({
type: 'clip/add',
payload: {
kind: 'video',
id: 'c1',
trackId: 'v1',
assetId: 'intro',
startUs: 0,
durationUs: 5_000_000
}
});
```
Edits can be made to clips, such as splitting or moving them. The `undo` method allows for undoing the last change, and every change is represented as JSON patches for synchronization and collaboration. The preview and export processes utilize the same compositor, ensuring consistency between the preview and the exported file. The export process uses WebCodecs for decoding, WebGL (PixiJS) for compositing, and reuses the preview's compositor. The exported file can be saved as an MP4 with high quality.
Other features include overlays created with HTML and CSS, which can function as form fields. The editor demo also allows for template hydration, enabling personalized video creation. Multiple videos can be personalized using a single template. Finally, Miraiclip can import data from various sources, such as JSON, NDJSON, or CSV files, and can also be utilized by machine learning models for automated editing tasks.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
