etro-js / etro

Typescript video-editing framework for the browser

Etro

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

Basic Usage

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.

See the documentation for a list of all built-in layers.

Effects

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) }))

See the documentation for a list of all built-in effects.

Dynamic Properties

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() - 50

See the documentation for more info.

Using in Node

To use Etro in Node, see the wrapper:

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

Contributing

See the contributing guide

License

Distributed under GNU General Public License v3. See LICENSE for more information.