Webcam Source
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="http://www.trumpton.org.uk/webcam/garden0.jpg" graceful="yes" errsrc="http://www.trumpton.org.uk/webcam/offline-320x200.jpg" alt="Tomy Cam" showdate="yes" bgc="black" fgc="white" refresh="310" /> <noscript><img class="webcam" src='http://www.trumpton.org.uk/webcam/garden0.jpg' 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.
Magic Parameters
All of the 'magic' happens in the <webcam> section, and this section has several parameters it can take. These are discussed in the following section:
- src - Source URL of the webcam image (jpg / png etc...)
- errsrc - URL of an image to display if the src image cannot be loaded.
- rotate - Angle to rotate the image (90, 180, 270)
- flip - Direction to flip the image (vertical, horizontal)
- width - Width of the final image on the screen
- height - Height of the final image on the screen
- bgc - Background colour of the title (white, black, yellow, gray, blue, green)
- fgc - Foreground colour of the title (white, black, yellow, gray, blue, green)
- refresh - Refresh interval in seconds (Minimum of 2)
- graceful - Be kind to the network, and slow down refreshes after a period of time (yes)
- alt - Alternatve Text / Title
- showdate - Display the date / time in the title (yes)
Compatability
| Version | Rotate | Flip | Title |
| HTML4 | Yes | Yes | No |
| HTML4, Mozilla | Yes | Yes | Yes |
| HTML4, Internet Explorer | Yes | Yes | No |
| HTML5 | Yes | Yes | Yes |
Known Bugs and Compatiblity
This is currently a work-in-progress, and these bugs will be fixed in the near future:
- HTML5 text printing not working correctly.
- width and height not working correctly.
Files and Links
The source is made available for general use, and is covered by the GPL License with the specific requirement that to acknowledge the author, the following html is added to any page that uses the source, or a derrivative of the source:
| <p style="font-size: 40%">Webcam display source from <a href="http://www.trumpton.org.uk/webcamjs">trumpton</a></p> |
The source can be downloaded here
Webcam display source from trumpton and trumpton blog