Seriously.js es un prometedor proyecto, apoyado por la fundación Mozilla, para la composición de vídeos en tiempo real, inspirado en populares programas de edición como por ejemplo After Effects y Nuke.
Este fantástico proyecto se encuentra optimizado para funcionar en navegadores modernos, con un total soporte tanto para Firefox como para Google Chrome, logrando un excelente rendimiento llegando a los 60 FPS utilizando la aceleración GPU.
Acepta tanto imágenes como vídeos en los formatos más populares, haciendo un increíble uso de Canvas. Ademas permite realizar transformaciones en 2D del tipo traslación, rotación, escala y deforma según sea requerido.
La lista de efectos disponibles es increíble, pido desde ya disculpas por colocarlos directamente en ingles, pero lo cierto es que muchas veces conocemos mejor un determinado efecto por su nombre en ingles que por su traducción.
Efectos disponibles:
- Ascii Text
- Bleach Bypass
- Blend
- Channel Mapping
- Chroma Key
- Color generator
- Color Cube
- Edge Detect
- Emboss
- Exposure Adjust
- Fader
- Hex Tiles
- Hue/Saturation Adjust
- Invert
- Luma Key
- Night Vision
- Ripple
- Scanlines
- Sepia tone
- Sketch
- Split
- Tone Adjust
- TV Glitch
- Vignette
Utilizar Seriously.js no es muy distinto a emplear un plugin diseñado con jQuery. Por ejemplo la forma de instalar el proyecto es la siguiente:
<!DOCTYPE html>
<html>
<head><title>Seriously.js Tutorial</title></head>
<body>
<!-- page content goes here -->
<script src="seriously.js"></script>
<script src="effects/seriously.vignette.js"></script>
<script src="effects/seriously.hue-saturation.js"></script>
<script src="effects/seriously.split.js"></script>
<script>
//main code goes here
</script>
</body>
</html>
Luego debemos realizar la configuración de este recurso, algo que tampoco es complicado, para que se den una idea, una vez que cumplimos con los requerimientos de este proyecto, inicializamos el script, aplicar un efecto pasa por escribir una sola linea, por ejemplo:
// declare our variables
var seriously, // the main object that holds the entire composition
colorbars, // a wrapper object for our source image
vignette, // a vignette effect
target; // a wrapper object for our target canvas
seriously = new Seriously();
colorbars = seriously.source('#colorbars');
target = seriously.target('#canvas');
vignette = seriously.effect('vignette');
// connect all our nodes in the right order
vignette.source = colorbars;
target.source = vignette;
seriously.go();
No olviden visitar la documentación, que es realmente completa, tampoco dejen de pasar por la demostración online.
Seriously.js es un proyecto liberado bajo licencia MIT.
Web: Seriously.js
