https://github.com/etro-js/etro
Typescript video-editing framework for the browser
https://github.com/etro-js/etro
api-driven audio blob browser etro hacktoberfest javascript javascript-framework javascript-frameworks nodejs typescript video video-editing video-editor video-manipulation
Last synced: 2 months ago
JSON representation
Typescript video-editing framework for the browser
- Host: GitHub
- URL: https://github.com/etro-js/etro
- Owner: etro-js
- License: gpl-3.0
- Created: 2018-10-05T19:49:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-24T12:14:44.000Z (over 1 year ago)
- Last Synced: 2024-04-14T07:42:23.345Z (about 1 year ago)
- Topics: api-driven, audio, blob, browser, etro, hacktoberfest, javascript, javascript-framework, javascript-frameworks, nodejs, typescript, video, video-editing, video-editor, video-manipulation
- Language: TypeScript
- Homepage: https://etrojs.dev
- Size: 34.3 MB
- Stars: 759
- Watchers: 15
- Forks: 83
- Open Issues: 70
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Etro
[](https://www.npmjs.com/package/etro)
[](https://actions-badge.atrox.dev/etro-js/etro/goto)
[](https://discord.gg/myrBsQ8Cht)
Etro is a typescript framework for programmatically editing videos. It lets you
composite layers and add filters (effects). Etro comes shipped with text, video,
audio and image layers, along with a bunch of GLSL effects. You can also define
your own layers and effects with javascript and GLSL.
## Features
- Composite video and audio layers
- Use built-in hardware accelerated effects
- Write your own effects in JavaScript and GLSL
- Manipulate audio with the web audio API *(audio effects coming soon)*
- Define layer and effect parameters as keyframes or custom functions
- Render to a blob in realtime *(offline rendering coming soon)*
## Installation
```
npm i etro
```
### System Dependencies
- `node-canvas`
_If you have problems while installing `etro` you may need to manually install additional dependencies. See: [compiling node-canvas](https://github.com/Automattic/node-canvas?tab=readme-ov-file#compiling)_
## Basic Usage
Let's look at an example:
```js
import etro from 'etro'
var movie = new etro.Movie({ canvas: outputCanvas })
var layer = new etro.layer.Video({ startTime: 0, source: videoElement }) // the layer starts at 0s
movie.addLayer(layer)
movie.record({ frameRate: 24 }) // or just `play` if you don't need to save it
.then(blob => ...)
```
The blob could then be downloaded as a video file or displayed using a ``
element.
See the [documentation](https://etrojs.dev/docs/category/layers) for a list of
all built-in layers.
## Effects
Effects can transform the output of a layer or movie:
```js
var layer = new etro.layer.Video({ startTime: 0, source: videoElement })
.addEffect(new etro.effect.Brightness({ brightness: +100) }))
```
See the [documentation](https://etrojs.dev/docs/category/effects) for a list of
all built-in effects.
## Dynamic Properties
Most properties also support keyframes and functions:
```js
// Keyframes
layer.effects[0].brightness = new etro.KeyFrame(
[0, -75], // brightness == -75 at 0 seconds
[2, +75] // +75 at 2 seconds
)
// Function
layer.effects[0].brightness = () => 100 * Math.random() - 50
```
See the [documentation](https://etrojs.dev/docs/reference/dynamic-properties)
for more info.
## Using in Node
To use Etro in Node, see the [wrapper](https://github.com/etro-js/etro-node):
## Running the Examples
Start the development server (only used for convenience while developing; you
don't need a server to use Etro):
```
npm i
npm run build
npm start
```
Now you can open any example (such as
http://127.0.0.1:8080/examples/introduction/hello-world1.html).
## Further Reading
- [Documentation](https://etrojs.dev/docs/intro)
## Contributing
See the [contributing guide](CONTRIBUTING.md)
## License
Distributed under GNU General Public License v3. See [LICENSE](LICENSE) for more
information.