Ok, I will admit it. I had recently fallen in love with Javascript. So much so, that I went back and refactored a whole bunch of code and made it all pretty, and easy for others to read, learn and use.

As part of my love for javascript, today I would like to share some of the things I have done – with hope that in the future, it might be useful for you.

1) Encoder.js – A simple webcam encoder / browser-based stream publisher

Encoder.js is a simple JS API that configures a simple lightweight AS3 Flash application and streams your webcam to a streaming server of your choice. Below’s an example of how easy it is to get started with just a few lines of code:

<script type="text/javascript" src="http://encoder.orcadigital.com/js/encoder.js"></script>
<script type="text/javascript">
			// The div to insert the webcam preview
			container: '#holder',			
			// Setting the preview width
			previewWidth: 800,			
			// Setting the preview height
			previewHeight: 480,					
			// Setting the Encoder configuration
			config: {							
				streamServer: "rtmp://your.streamserver.com/live",
				streamName: "example",
				bitrate: 800,
				videoWidth: 640,
				videoHeight: 360,
				fps: 15,
				keyFrameInterval: 30
			// Setting up event listeners
			events: {
				onReady: function() {			
					// Auto-start

There is still room for improvement (like a full documentation of the JS API) but you can start and have a play with it by adding

<script type="text/javascript" src="http://encoder.orcadigital.com/js/encoder.js"></script>

to your html file.

2) Log.js – Simple Javascript Logger / Debugger

Log.js is a simple lightweight ‘library’ that I find very useful, and that should be included in any javascript enabled web-based project. This is not as full-featured the Log4X libraries i.e. Log4JS but it does the job. Note that this logger relies on the ‘console’ object being present – hence it works on modern browsers like Chrome, Safari as well as plugins like Firebug for Firefox.

// How to configure the logging level
Log.configure("info"); // Logging Levels [VERBOSE, DEBUG, INFO, WARN, ERROR]

// How to log to console
Log.verbose("tag", "This is the verbose log"); // This won't be displayed
Log.debug("tag", "This is the debug log"); // This won't be displayed
Log.info("tag", "This is the info log"); // Prints "This is the info log"
Log.warn("tag", "This is the warn log"); // Prints "This is the warn log"
Log.error("tag", "This is the error log"); // Prints "This is the error log"

// How to filter the logs for a specific TAG

Download the source code of the library here. (Only 120 lines non-minified)

3) Data.js – Data / Storage Helper Library

Data.js is another simple and lightweight ‘library’ that could be useful if you would like to store key-JSON (an extension of plain text key-value) pairs either temporarily or permanently for your web-application. It provides two different types of data store: ‘TempStore’ and ‘PermStore’. The TempStore stores your JSON data (with your key of choice) temporarily – i.e. if the user refreshes the page, the data is lost. This is useful to store temporary information from AJAX calls to be referenced later. The PermStore stores your JSON data ”permanently – using HTML5′s localstorage. Data is only lost if the user ‘resets’ their browser or clear any browser data and cache.

Another neat thing about this library is that it provides a ‘expiry’ feature, where by if you would like, you could expire the stored data after X period of time.

Let’s have a look at how to use it:

// Store a response from an ajax call (using jQuery)
	url: "webservice.php",
	dataType: "json",
	success: function(data) {

		// Store the response JSON object Temporarily
		Data.TempStore.set("response", data);

// Store your own JSON data object

var data = {
	"name" : "mun",
	"age" : 26,
	"location" : "london"

// Store the data in the PermStore 'forever'
Data.PermStore.set("myself", data, Data.EXPIRES_NEVER);

// Read the data from the PermStore
Data.PermStore.get("myself");		// prints {"name" : "mun","age" : 26,"location" : "london"}

// Store the data in the PermStore until 30 mins later (i.e. 1800000 millis)
Data.PermStore.set("myself", data, Data.EXPIRES_(1800000));

// Read the data from the TempStore
Data.TempStore.get("myself");		// prints undefined - since 'myself is stored in the PermStore instead of the TempStore

Download the source code of the library here.

So hopefully you will find these simple libraries useful to you as well. Enjoy and as always, feel free to leave a comment of what you think about these libraries.