Sunday 15 February 2009

Webcam Manipulation with Javascript

I purchased an IcamView web server, and megapixel webcam, which I have waterproofed, and placed in the garden.

The IcamView web server has a low power processor, and is unable to manipulate the images at all. When you use the ActiveX or Java video viewer, the viewer manipulates the image for you (on the client PC).

If you access still frames, you have no such tool, and the frames come straight from the camera, warts and all. The most obvious issue is when images are flipped by the camera, and it expects the software to flip the images back.

I have created a Javascript file (webcam.js), which can post-process images from webcams. It is intended for people who don't know or want to know how to perform any Javascript programming.

Adding the Code in your HTML File

All you need to do is use your favorite web editor, and include the Javascript, a webcam tag, and a normal img tag for backwards comatibility with non-Javascript capable browsers.
<script language="javascript" src="webcam.js"></script>

<webcam src=""
graceful="yes" errsrc="" alt="Tomy Cam" showdate="yes" bgc="black" fgc="white" refresh="310" />

<noscript><img class="webcam" src='' alt="Tomy Cam" /></noscript>
The Code all belongs in the <body> section of the web page.
  • The <script> tag loads the Javascript file.
  • The <webcam> tag is interpreted by the script, and loads / edits the image.
  • The <noscript> tag is ignored by browsers that can process Javascript, and handled by any other ones - the images displayed on these browsers will not be flipped / rotated or labelled.
More Information

More information, including the source code, can be found here.


  1. Hi, Nice .js file - thanks. Any luck working out the IE bugs for width/height and text? Thanks - very useful :)


  2. Hi, i want to use .js script but file is missing for download, please upload again or send me the URL. Thanks! Birdie.