A stalker of IP cameras
What is this?
A high performance web proxy for serving MJPG streams to the masses.
IPCamera (1) <-> (1) Paparazzo.js (1) <-> (N) Users
IP cameras can't handle web traffic
IP cameras are slow devices that can't handle a regular amount of web traffic. So if you plan to go public with an IP camera you have the following options:
- The naive approach - Embed the camera service directly in your site, e.g. http://201.166.63.44/axis-cgi/jpg/image.cgi?resolution=CIF.
- Ye olde approach - Serve images as static files in your server. I've found that several sites use this approach through messy PHP background jobs that update this files at slow intervals, generating excessive (and unnecessary) disk accesses.
- Plug n' pray approach - Embed a flash or Java-based player, such as the Cambozola player. This requires plugins.
- MJPG proxy - Serve the MJPG stream directly if you are targeting only grade A browsers, (sorry IE).
- Paparazzo.js: A web service of dynamic images - Build a MJPG proxy server which parses the stream, updates images in memory, and delivers new images on demand. I've found that this approach is scalable, elegant, blazing fast and doesn't require disk access.
Server side
# Initialize
# Basic auth http://en.wikipedia.org/wiki/Basic_access_authentication
auth = 'Basic ' + new Buffer('user:secret').toString('base64')
# Same parameters as http.get http://nodejs.org/docs/v0.6.0/api/http.html#http.get
paparazzo = new Paparazzo
host: 'camera.dyndns.org'
port: 1881
path: '/mjpg/video.mjpg'
headers: { 'Authorization': auth }
paparazzo.on "update", (image) =>
console.log "Downloaded #{image.length} bytes"
paparazzo.on 'error', (error) =>
console.log "Error: #{error.message}"
paparazzo.start()
# Serve image
# Take a look at server.coffee
Client side
You can simulate MJPG streaming by requesting new images on a specific interval. Appending a random parameter avoids caching.
// JavaScript example using jQuery
// Active camera will refresh every 2 seconds
var TIMEOUT = 2000;
var refreshInterval = setInterval(function() {
var random = Math.floor(Math.random() * Math.pow(2, 31));
$('img#camera').attr('src', 'http://localhost:3000/camera?i=' + random);
}, TIMEOUT);
<!-- In your HTML output -->
<img src='' id='camera' />
$ make run
For a list of tested cameras check "List of tested cameras" in the wiki section.
- Websockets implementation to get more FPS
- More tests
- Find more public cameras to test
Copyright (c) 2014 Rodolfo Wilhelmy <rod@wilhel.me>