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

Version 0.8 is out! Check out this guide for migrating.

Etro is a JavaScript framework for programmatically editing videos. Similar to GUI-based video-editing software, it lets you layer media and other content on a timeline. Audio, image, video and other tracks are supported, along with powerful video effectts for existing tracks. Being very flexible and extendable, you can choose to only use the core components or define your own.

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
Define layer and effect properties as keyframes and functions
Export to a blob or file

Installation

npm i etro

Usage

You can use CommonJS syntax:

import etro from 'etro'

Or include it as a global etro:

<script src="node_modules/etro/dist/etro-iife.js"></script>

Let's look at an example:

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 => ...)

This renders videoElement to a blob at 24 fps. This blob can then be downloaded as a video file.

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

Using in Node

To use Etro in Node, use the wrapper:

npm i etro-node

var etroNode = require('etro-node')

etroNode(() => {
  // You can access inputs as html elements and pass them to Etro as usual.
  var image = document.getElementById('input1') // <img> element

  // Use etro normally ...

  movie
    .exportRaw()
    .then(window.done)
// Tell Etro Node what inputs to load with { id: path }
}, { input1: 'image.png' }, 'output.mp4')

etroNode() takes an optional Puppeteer page argument, so you can run multiple Etro scripts on the same movie (useful for servers). See the docs.

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

TypeScript

Etro is written in TypeScript, so it should work out of the box with TypeScript projects. However, it is also compatible with projects that do not use TypeScript.

Contributing

See the contributing guide

License

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

etro