Vidar
Version 0.8 is out!
Check out this guide
for migrating.
Vidar 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 vidar
Usage
You can use CommonJS syntax:
import vd from 'vidar'
Or include it as a global vd:
<script src="node_modules/vidar/dist/vidar-iife.js"></script>
Let's look at an example:
var movie = new vd.Movie({ canvas: outputCanvas })
var layer = new vd.layer.Video({ startTime: 0, source: videoElement })
movie.addLayer(layer)
movie.record({ frameRate: 24 })
.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 vd.layer.Video({ startTime: 0, source: videoElement })
.addEffect(new vd.effect.Brightness({ brightness: +100) }))
Using in Node
To use Vidar in Node, use the wrapper:
npm i vidar-node
var vidarNode = require('vidar-node')
vidarNode(() => {
var image = document.getElementById('input1')
movie
.exportRaw()
.then(window.done)
}, { input1: 'image.png' }, 'output.mp4')
vidarNode()
takes an optional Puppeteer page argument, so you can run
multiple Vidar 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 Vidar):
npm start
Now you can open any example (such as
http://127.0.0.1:8080/examples/introduction/hello-world1.html).
TypeScript
Vidar 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.
Further Reading
Contributing
See the contributing guide
License
Distributed under GNU General Public License v3. See LICENSE
for more
information.