January 27th 2012
Seriously.js is a real-time, node-based video compositor for the web. Inspired by professional software such as After Effects and Nuke, Seriously.js renders high-quality video effects, but allows them to be dynamic and interactive.
It features an optimized rendering path that is built with WebGL making it entirely hardware accelerated at 60 frames per second. You can use videos, images, canvases and pixel arrays as input sources to the compositor and then apply various video effects to the resulting image, and apply 2d transforms to any layer (3d is coming). The available effects are numerous ranging from chroma key and night vision to edge detection and other common effects. Additionally, and perhaps the best feature of the library is that you can add your own effects as plugins and use them just as you would the built in effects… In fact, the built in effects are actually just plugins themselves!
The demo combines a number of different effects and sources. The video is chroma-keyed so that you can actually change the background as it’s playing in real time, and then various effects are applied on top of everything changing the feel of the music video dramatically. There is a underwater scene, a night vision scene, and a creepy black one. I think this idea of user modifiable music videos is a very neat one indeed!
var seriously = new Seriously(), video = seriously.source('#myvideo'), // get video element by CSS selector target = seriously.target('#canvas'), // output canvas vignette = seriously.effect('vignette'); // connect all our nodes in the right order vignette.source = video; target.source = vignette; seriously.go();
Obviously you can connect multiple nodes together in a chain-like fashion, adjust effect parameters and more, so check out the tutorial for all of that!