Package Exports

etro
etro/dist/etro-cjs.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (etro) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Etro

Etro was previously known as Vidar, but it had to be renamed to avoid confusion with an existing software product.

Etro is a typescript framework for programmatically editing videos. Similar to GUI-based video-editing software, it lets you composite layers and add 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

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.

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

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

Using in Node

To use Etro in Node, see the wrapper:

Running the Examples

First, download the assets for the examples:

npm run assets

Then, start the development server (only used for convience while developing; you don't need a server to use Etro):

npm start

Now you can open any example (such as http://127.0.0.1:8080/examples/introduction/hello-world1.html).

Contributing

See the contributing guide

License

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

etro