Etro

用于浏览器的 Typescript 视频编辑框架。「Typescript video-editing framework for the browser」

Etro


Build Status

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.

Join our Discord

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.

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

Contributing

See the contributing guide

License

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

Main metrics

Overview
Name With Owneretro-js/etro
Primary LanguageTypeScript
Program languageJavaScript (Language Count: 4)
Platform
License:GNU General Public License v3.0
所有者活动
Created At2018-10-05 19:49:51
Pushed At2024-10-30 05:40:51
Last Commit At2024-08-27 00:26:34
Release Count20
Last Release Namev0.12.1 (Posted on 2024-02-19 17:07:15)
First Release Namev0.1 (Posted on )
用户参与
Stargazers Count1k
Watchers Count13
Fork Count89
Commits Count791
Has Issues Enabled
Issues Count183
Issue Open Count73
Pull Requests Count62
Pull Requests Open Count7
Pull Requests Close Count35
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private