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
發布數20
最新版本名稱v0.12.1 (發布於 2024-02-19 17:07:15)
第一版名稱v0.1 (發布於 )
創建於2018-10-05 19:49:51
推送於2024-05-02 02:17:20
最后一次提交2024-03-04 19:58:24
星數777
關注者數15
派生數84
提交數782
已啟用問題?
問題數173
打開的問題數66
拉請求數57
打開的拉請求數5
關閉的拉請求數31
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?
去到頂部