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.

主要指标

概览
名称与所有者etro-js/etro
主编程语言TypeScript
编程语言JavaScript (语言数: 4)
平台
许可证GNU General Public License v3.0
所有者活动
创建于2018-10-05 19:49:51
推送于2025-06-07 19:42:08
最后一次提交2025-06-07 12:29:29
发布数20
最新版本名称v0.12.1 (发布于 2024-02-19 17:07:15)
第一版名称v0.1 (发布于 )
用户参与
星数1k
关注者数13
派生数89
提交数792
已启用问题?
问题数183
打开的问题数73
拉请求数62
打开的拉请求数8
关闭的拉请求数35
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?