Creating a Remote Webcam using NodeJS, Android, Opera Mobile, Web Sockets and HTML5

Recently I’ve been experimenting with using webcams in the browser with Javascript, while I was browsing Google on related topics I came across an interesting video on youtube. As I couldn’t find any code for how the demo had been created I decided to create my own (see below). The idea of streaming video from a phone to a server via a websocket had occurred to me before I viewed this video but I dismissed it as impractical, an opinion which has only been reinforced after testing it myself.

This is the video that gave me the inspiration (my code replicates this exactly so I didn’t see the need to recreate the video too), the only difference is I used linux all round rather than windows:

Read more ▼

Enabling web sockets on Opera Mobile

A little project I’m working on requires the use or websockets in Opera Mobile, I’d read they were supported but when I tried it just threw an exception, then I discovered you have to enable them in the config:

  1. Browse to opera:config in opera mobile
  2. Open the User Prefs section
  3. Check the enable websockets box
  4. Scroll right to the bottom of the page and select save
  5. Enjoy much websockety goodness

Easy Menu Formatting in Codeigniter

Formatting menus with appropriate CSS classes to define their state is messy and cumbersome at best, especially when not using a CMS, but something that is very much required to make websites usable. As a regular user of codeigniter it’s something I’ve been searching for a solution for (before bothering to roll my own) and fortunately I found a great solution: Steal the menu library from FuelCMS, full documentation here.

In this post I will give a simple example of generating the menu below using the FuelCMS Menu Class in Codeigniter.

Before (Plain HTML):

Basic Tabbed Menu

<nav id="main">
    <ul class="clearfix">
        <li><a href="/">home</a></li>
        <li><a href="/customers">customers</a></li>
        <li><a href="/jobs">jobs / orders</a></li>
        <li><a href="/basket">basket</a></li>
    </ul>
</nav>

After (Generated):

Tabular menu with CSS classes generated by Codeigniter

<nav id="main">
<ul>
    <li class="first active">
        <a href="/" title="Home">Home</a>
    </li>
    <li>
        <a href="/customers" title="Customers">Customers</a>
    </li>
    <li>
        <a href="/jobs" title="Jobs">Jobs</a>
    </li>
    <li class="last">
        <a href="/basket" title="Basket">Basket</a>
    </li>
</ul>
</nav>

Read more ▼

getUserMedia(), the device API and the state of the webcam in browser using javascript and html5 video

Since first considering web camera applications during my MSc thesis I’ve be fascinated by different uses and application of webcams on the web. I believe outside of skype they are a very under utilised tool for both communication and interaction and despite their long existence I believe there is still a very long way to go in what they can do.

Android camera live view in a webpage getUserMedia

In this post I intend to summarise recent developments surrounding using a webcam within web applications and go on to discuss current implementations available for using a webcam with javascript.

Read more ▼

Customising Netbeans for better performance and ease of use as a PHP IDE

For all my day to day development work, be it in php, html, js and even when I branch out into Java or C/C++, I use Netbeans as my IDE of choice. I first got into it when coding Java at university but since then I’ve moved into mainly working on PHP web apps and it has proved to be, in my opinion, the best PHP IDE available. In this post I’m going to highlight a couple of customisations I’ve made to make it’s use easier.

For the past couple of years I’ve used Netbeans on Ubuntu, previously I used Visual Studio on Windows but then I was developing C++ Applications. When I moved to Ubuntu I looked for a new IDE to patronise, I’ve never really got on with VIM or emacs.

Read more ▼

Oggcamp 2011

Casting aside my fears of writing ‘just another blog post about Oggcamp’ in this post I’ll give my thoughts on what was my first Oggcamp.

Read more ▼

Backing up my world – Online back ups for work and play

For a good while I’ve been meaning to get around to backing up my data properly. I’ve always had an external hard disk on which I backed up my important data periodically but that only covers the most basic of situations. If my house burnt down, or more likely somebody broke into my house,even just a power surge, I could conceivably loose both my real copy and the backup. From this I decided the only sensible way was to explore an offsite backup solution to use in addition to local backups. I’ve also been spurred on after buying an SSD and being unconvinced about their reliability. Indeed since starting to write this post my new SSD was recalled by corsair…

Daily backup drives

In this post I’ll describe what I backup and the online services and software I used.

Read more ▼

10 things I’ve learnt my first year as a web developer (Advice to new web developers)

As a bit of background I work in a small specialist printing company in Sheffield, UK. My projects have ranged from basic design and implementation of static html sites to eCommerce systems incorporating custom image generation and internal systems which integrate with production software. Most of my work is in PHP, Mysql and javascript, although I always try to use the best tools for the project at the time.

Me when I started
Me when I started

I don’t normally write posts about myself as usually they’d not be very profound, however I feel that after my one year anniversary of my getting my first real job as a web developer after leaving university (though not my first job) I have some worthwhile experiences to share. Some of them are just good practice that any decent developer will alredy follow and some are more general observations:

At this point there was going to be a paragraph for each…then half way through writing it I realised nobody would read it all so I’ve summarised it (even now I’ll be lucky!):

Read more ▼

Websocket URL routing (specifying MQTT subscription topic by URL)

My previous example Node.js, MQTT and Websockets showed the use of a websocket to broadcast messages from a subscribed MQTT topic, however the topic was hard coded and the messages broadcast to all who connected. The example below uses the same client side script to connect but allows the MQTT topic to be specified in the URL and only broadcasts to the individual client. Now to subscribe to a topic “test” the websocket address would be ws://<ip>/test.
Read more ▼

Node.js, MQTT and Websockets

For a while I’ve been looking at how to bridge the MQTT protocol and websockets to make it easier to build web applications using data broadcast in MQTT streams. In the past I used python and mod_pywebsocket along with mosquitto python libraries however this was cumbersome and difficult to install.  Here I present a simple solution using node.js to interact with mosquitto MQTT clients. Node.js lends itself to working well with messaging systems like MQTT and websockets due to its event driven nature. I’m also in love with node.js at the moment!

This is much simpler than previous attempts and I put the initial test together in less than ten minutes.

Prerequisites

Obviously you’ll need to have node.js and mosquitto installed and also the node library node-websocket-server (which can easily be installed using npm). All my work was tested under ubuntu but there is no reason why it wouldn’t work on OSX or even cygwin. To test you’ll need a websocket compatible browser such as recent versions of chrome.

System Structure

mosquitto_pub and mosquitto_sub are command line MQTT clients supplied with the mosquitto MQTT broker, here mosquitto_sub will be called using node.js as child processes, events are generated on output from the process. The data is then captured and broadcast over a websocket. In this case a simple jquery page is used to display the broadcast messages but in a real application there would be more client side processing to make a useful application.

Read more ▼