Arduino AJAX IP Webcam

DSC_0173wp2

With a fair bit of JavaScript, you can make an Arduino do some amazing tricks. This project in particular pushes all the boundaries of Arduino computing by serving up a dynamic, interactive webpage along with a multitude of features.

You can even have it monitor and control your 3D printer!

wpi

In this project, we have the Arduino serving up, from a MicroSD card, a carefully crafted HTML file with loads of embedded JavaScript goodness. Once the document is finished loading, the JS takes over and carefully polls the 0.016GHz server looking for freshly crafted XML data.

This data includes everything from the server’s local temperature, to its uptime, to the filename and time of the last picture taken, and more. From there, the JS will determine if it should load a new picture, or continue polling data. It is also careful not to pile up a boatload of poll requests that would otherwise bog down the server. A new picture will come through if it detects a filename mismatch between the XML data and the previously loaded image.

Features:


Camera control gives the user a few really cool options. For one, the image size/resolution of the camera can be set as desired. Larger pictures however take exceptionally longer to save and transmit.

A client can also turn off the automatic XML polling. This prevents the image feed from being updated with new pictures if a new client connects and takes pictures elsewhere later on.

Finally, There are two ways to take pictures. A client can either press the “Take new picture” button, or they can start an automatic interval or timelapse feature. This timelapse feature is the same as clicking the button every “x” seconds and waiting for a new image to come through. The JS is also careful not to pile up these image requests as that would bog down the server. A notification text will appear after “Camera control:” stating the exact status of the server.

shwp1

Through all this, the JS is again very careful to ensure the health and reliability of the Arduino camera server while also ensuring the client is aware of what’s happening. Notifications are always accurately displayed after the title in each of the three main control windows.

XML status lists additional XML data send by the Arduino. This includes local temperature, uptime, server load, a hit counter, most recent image size, and the maximum pictures allowed on the SD card before being overwritten.

Finally, the Root file index portion is built to display a list of the files in the root directory of the MicroSD card. Generating this data could take some time, so the server is limited in the amount of pictures it keeps on its card. This variable is known as “maxpics” and is configurable in the project’s code along with  many other system variables.

If that’s not enough, the entire webpage is chalk full of tool tips that explain everything you need to know. Just hover your mouse over any element you want to know more about.

Build one!


To build this, you will need an Arduino micro controller, an Ethernet Shield, and a serial TTL JPEG Camera. This code was built strictly with the VC0706 TTL JPEG camera in mind.

The Adafruit Serial JPEG Camera (VC0706) should have the its TX wire connected to pin 2 on the Arduino, and its RX wire to pin 3 on the Arduino using a voltage divider (for 3.3v logic; see Adafruit tutorials).

An optional LED can be added to pin 9 that shows data flow in and out of the SD card.

Also, a temperature sensor, like the LM34 or LM35 can be
attached directly to A0. The math for it is configurable on the “xml_output” page in the sketch below.

It should be effortless to add more AJAX request options and have the Arduino do even more cool things. The arduino code itself is also carefully commented so you know how everything works inside and out.

Download:

You can download both the Arduino code and the original JavaScript-laden HTML files here:
arduino_ipcam_main_v089b

You can also 3D print your own case for the VC0706 with these files here:
http://www.thingiverse.com/thing:591121

Feel free to share your results with us and the rest of the community.

Additional media:


DSC_0157wp3
You can quickly build a compact little IP camera module by stacking shields.

 

awcs232wp
Photo sample.

 

A shutout goes to the entire Arduino community for providing thousands of example sketches and projects like this one for the world to see and build upon. Thank you.

 

8 thoughts on “Arduino AJAX IP Webcam”

  1. Hello!

    This is so cool IPcam and the code is good to know how it works.
    If you do not mind, could I post it in wiznetmuseum.com for other makers?

    thank you,

    lawrence

  2. I’m looking for authentication code for esp8266 in which it asks for username and password before giving access to any client.

    1. Sometimes interfacing with SD cards with an Arduino can be quite finicky depending on their size, format, or even source. Try uploading a basic read/wright/format SD card sketch to your Arduino to test the SD card. Both the standard Arduino SD and SDfat libraries can be used to test or format your card your card.

    1. I’m sure it can, but I don’t have any experience using an esp8266. Try asking around some esp8266 forums to see if anyone has any libraries for a serial JPEG camera.

Leave a Reply

Your email address will not be published. Required fields are marked *