Rasberry Pi Image Streamer
By Nicklas, 08 October, 2014

For a while now I’ve been curious about a new kind of of mini computers that have become quite popular and only runs on a single chip. And all the possibilities that such a small form factor opened. To most of them you could easily attach a small size camera, so this got me thinking, what if I could turn this mini computer into a small live camera that could stream live footage from any location with an internet connection. So that was my plan when I set out to start this project.


So first of all, the hardware. I choose to go with a Raspberry Pi model B+, which is the latest model from the Raspberry Pi company with 512mb of memory just to be a little future prof. This is not a requirement for this project. You could easily get away with a simpler model.

I also bought the default camera module for the Raspberry Pi and a small case to mount everything in.

The software and OS setup

For the Raspberry Pi there is many operating systems to choose from, I went with the most common and recommended by the developers of the Raspberry which is Raspbian. Raspbian is a version of Debian Linux specifically configured to run on the Raspberry Pi. If you are new to the Raspberry Pi system I recommend you to follow this guide to get you started: https://www.andrewmunsell.com/blog/getting-started-raspberry-pi-install-raspbian

So when we have our OS running we now need to setup node.js on the machine. To do this we need to run a few simple commands from the terminal.

Setup (as root):

apt-get install curl
curl -sL https://deb.nodesource.com/setup | bash -

Then install (as root):

apt-get install -y nodejs

To compile and install native addons from npm you may also need to install build tools

apt-get install -y build-essential

So there we have it. Now we are ready to start writing some code.

The code

So we are ready to start writing our node.js application. We can start by create a package.json file and add these lines to it:

  "name": "RaspbianCamera",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "author": "Author-name",
  "dependencies": {
    "raspicam": "^0.2.13",
    "express": "~4.9.5"

As you can tell from this config we require a couple of dependencies from the npm library. Save the file and run:

npm install

This will download and install all dependencies that we need and put them in a folder called “node_modules”.

Now to really get started with some coding we can create a new file called app.js.
In this file we will do all the coding for our camera app. So let’s get to it:

var express = require('express');
var app 	= express();
var http 	= require('http').Server(app);

app.use(express.static(__dirname + '/images'));
http.listen(8888, function(){

var cameraOptions = {
	width		: 600,
	height 		: 338,
	mode 		: "timelapse",
	awb 		: 'cloud',
	output 		: 'images/camera.jpg',
	q 			: 50,
	rot 		: 270,
	nopreview 	: true,
	timeout 	: 1000,
	timelapse 	: 9999,
	th			: "0:0:0"

var camera = new require("raspicam")(cameraOptions);

app.get('/', function(req, res)
	res.sendFile(__dirname + '/images/camera.jpg');

This code will enable to access our image directly by typing (raspberry-ip):8888.
And by using res.sendFile method we don’t have to worry about file headers since that will be taken care of by the express framework.

Now if you dig in a little deeper in this code you will see that the raspicam library takes in a option called timelapse, which will determine for how long the timelapse should be running, this means that the camera will stop taking pictures after 9999ms, so to keep it going forever we need to tell it to restart again after the timelapse ends. To do so we can listen for the exit event on the camera object and then tell the camera to stop and then restart again.

camera.on("exit", function()
	console.log('Restarting camera...')

So now that we have everything setup we can start our application by going back to the terminal and run:

node app

If everything is working you should see the camera process working in the terminal. Now you should be able to use your browser and go to (raspberry-ip):8888 to view your image, refresh the page and you should see that your image changed.

So to implement a live feed you could setup a simple javascript on a html page that would fetch a new image with a interval. I also use a variable on the end of each image request to ensure that the browser does not use a old image from the cache.

var imageId = 0;

}, 5000);

function updateImage(){
	var image = new Image();
	image.onload = function()
		// Show image in browser here
	image.src = ‘(raspberry-ip):8888?id=' + imageId;

Further reading:

WaterFX - A much faster solution

Realistic water - Showing off DisplacementMapFilter

Experiment with Kinect and Flash

Football game