We have several IP camera’s in the building for security purposes. They all have internal IP addresses and can be viewed separately with their own web interface which is Chinese by default Laughing out loud and does not remember the language setting.

wanscam webinterface

It has 3 options: download an active X component and only work in internet explorer. Or use server push or a version build with JavaScript.

It refreshes the url by adding a new random number to the image source:

new Date().getTime() + Math.random();

This inspired me to make an overview webpage of all the webcams in our LAN.

Since it might be accessed through a mobile device, I have used the responsive version of the twitter bootstrap. For the small source and the caching of browsers, I have used the jQuery library and the twitter one from CDN’s.

I have used jQuery 1.9.1 and bootstrap 2.3.1 and that is all there is. Please let me know if you have any suggestions to make it even better. For demo purposes I have not changed the logins of the Wanscams and used the factory settings.

You can fork this code on GitHub. or view the code of the single HTML page on this url: https://github.com/jphellemons/WebcamMonitor/blob/master/index.html

kick it on DotNetKicks.com Shout it
Pin on pinterest Plus on Googleplus Post on LinkedIn