Etro

Etro is a framework-agnostic TypeScript library for programmatically editing videos. It lets you composite layers and add filters. Etro includes text, video, audio and image layers, along with a variety of GLSL filters. You can also define your own layers and filters with TypeScript 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)
• Serialize session to JSON and deserialize it back
• UI framework agnostic

Installation

npm i etro

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 (used for convenience during development; Etro does not require a server):

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.