/projector.js

Inter- and Audioactive VJ Software for Chrome 23+

Primary LanguageJavaScript

projector.js

projector.js or PJS is an inter- and audioactive VJ software running in a browser. It supports shows in HD resolution with 30/60 fps. Timeblend and timedelay effects let you manipulate live the 4th dimension. A built-in dynamic parameter control system synchronizes video efects to audio in real time. PJS exploits latest web technologies and opens door to collaborative vjay-ing over the Internet. Open Source and JavaScript.

Features

  • Compatible with Linux, Mac and Windows
  • Arbitrary resolutions up to screen size (max: 2048x2048)
  • GPU support for 2D Matrix operations (scale, rotate and transform) and alpha channel
  • Filter graph to combine and/or cascade effects
  • Dynamic Parameter Control System (volume, beat, dynamic, fft, sine, time, random, mouse)
  • Smooth effect switching via time blend effect
  • Mp3 playlist support (local files + Internet radio)
  • Multi core support (compositing + video decoding)
  • Open Source & JavaScript (develop and share your effects)

Effects

  • Time Blend
  • Webcam
  • Waveform and FFT (256 bands)
  • Video (mp4, ogg)
  • Graphics (jpg, png, gif)
  • Pattern (jpg, png, gif)
  • Pixastic filters (invert, edge detection, colors, glow, etc.)
  • Text
  • Delay
  • Mouse
  • Clock
  • Write your own...

Manual Installation

1 download & install Chrome for your system: https://www.google.com/intl/en/chrome/browser/ 2 download & unzip projector.js: https://github.com/noiv/projector.js/archive/master.zip 3 duplicate chrome icon, new target: "chrome(.exe) --allow-file-access-from-files /pathTo/projector.html"

Running with a local web server

Python

$ cd pathTo/projector.js $ python -m SimpleHTTPServer http://localhost:8000/projector.html

Other

Apache, nginx, App Engine, Flask, Bottle, etc.

Performance & Tuning

Make sure to get audio input and GPU support for compositing and video decoding. Check out chrome://gpu and enable these features:

  • GPU compositing on all pages
  • Threaded compositing
  • Media Source API on
  • Hardware-accelerated video decode
  • Web Audio Input
  • (Override software rendering list - only for older graphics cards)

Also keep an eye on Chrome's task manager and its internals: chrome://chrome-urls

Keyboard Shortcuts

Sequences group keyboard actions and help to remember them. Just press given keys shortly one after the other.

rendering

  • r r: Master switch, toggles basically everything
  • r a: toggles the animations loop, essentially a freeze
  • r d: toggles the debug/performace overlay
  • r k: toggles main shortkeys info
  • r c: toggles clear-screen before rendering (visual result depends on compo)
  • r f: switches to fullscreen mode (F11 as alternative / ESC to leave)
  • r m: toggles mousepointer
  • r s s: creates a screenshot

compositions

  • backspace: quick blend to background color of current show
  •     0: overview of compositions in active show

  •   1-9: switches immediately to a composition
  • ctrl+1-9: switches temporarily to a composition (a short blend in)

shows (planned)

  • s s: overview of available shows (planned)

mouse input (planned)

  • m d: mouse disconnect (parameter freeze)
  • m a: mouse connect
  • m h: toggles system mouse pointer
  • m p: toggles effect mouse pointer

audio

  • a a: toggles the audio source dialog
  • a n: steps to next random track, if in playlist mode.
  • a 0: 0% Volume (no dynamic audio controls)
  • a 1: 11% Volume
  • a 2-8: 22-88% Volume
  • a 9: 100% Volume (full dynamic audio controls)

editing (planned)

  • e e: toggles editor window
  • e c: load editor with current composition
  • e s: saves current show in repository

debug

  • x i: outputs filter info to console
  • x h: shows sources, if loaded with dom:true

Tips & Tricks

Mp3 Playlists

Due to security reasons the browser will not tell any web application anything about your file system. To circumvent this restriction you can create a simple list of mp3 files you like to import and drop this list onto the AudioSelector. The list should contain the complete paths ending with a line break.

Encoding Videos

It depends on your footage which quality will run on the wall. As a rule of thumb the faster the video content changes the lower the resolution might be. Think twice before encoding hectic flicker techno style Video at full HD. Generally base profiles are less demanding. It is a good idea to just drop the video file into your browser and watch CPU consumption. Also the distance between I-frames impacts seeking, which gives you all freedom if a video runs as loop only

In Development

  • better playlists
  • more dynamics
  • inline text editor
  • Remote Webcams

Roadmap (no particular order)

  • Remote VJaying
  • 3D Objects with WebGL
  • Visual graph editor
  • MIDI input controller
  • Live Lyrics

PJS is based on these Open Source Technologies

Further information