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.
- 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)
npm i etro
Let's look at an example:
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 <video>
element.
Effects can transform the output of a layer or movie:
var layer = new etro.layer.Video({ startTime: 0, source: videoElement })
.addEffect(new etro.effect.Brightness({ brightness: +100) }))Most properties also support keyframes and functions:
// 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() - 50To use Etro in Node, see the wrapper:
Start the development server (only used for convenience while developing; you don't need a server to use Etro):
npm i
npm start
Now you can open any example (such as http://127.0.0.1:8080/examples/introduction/hello-world1.html).
See the contributing guide
Distributed under GNU General Public License v3. See LICENSE for more
information.