Embedding CCTV streams in web pages

Supported Cameras
I only know with certainty that these techniques will work with the Foscam FI8918W and an unbranded dome webcam I bought on eBay which produces web pages that look very similar to the Foscam GUI but I expect it should work with any Foscam IP camera plus at least some of the clones.

To use either of the techniques below you need to set up a user with at least guest priviledge to view the stream or snapshot and operator to control the camera in any way. My examples assume a user named guest with a blank password has been set up with guest or operator priviledges. As the camera URL is visible in the page source along with the user and password I recommend that you do not make a user with admin priviledge publically available or jokers will mess up your camera for sure.

Video stream in FireFox and Chrome browsers
This also seems to work with Safari running under Windows.

This is the mechanism used by the GUI pages produced by the webserver built into the camera.

Embed this in your webpage html…
<img alt=”" src=”[your camera URL]/videostream.cgi?user=guest&pwd=”>
The user specified in the query string requires at least guest privilege.

Video stream in any browser
Unfortunately the video stream method shown above will not work with all web browsers and certainly doesn’t with Internet Explorer. To get video of sorts with IE all that can be done without forcing the viewer to download an ActiveX controls which any security conscious visitor would decline is to show refreshing snapshots from the camera which will certainly be at a slower frame rate than the 15fps at 640×480 the videostream method produces. Of course for some purposes a non-refreshing still would be perfectly adequate and a slowly refreshing series of stills will use less of your upstream bandwidth which on many services is quite limited.

To show a still snapshot from the camera…

<img src=”[your camera URL]/snapshot.cgi?user=guest&amp;pwd=”>

or to produce self refreshing stills…

<script language=”JavaScript” type=”text/javascript”>
function reload() {setTimeout(‘reloadImg(“refresh”)’,1000)}; // 1000 = 1 second. I’d suggest a reasonable minumum of 350
function reloadImg(id)
{
var obj = document.getElementById(id);
var rand = Math.random();
obj.src = “[your camera URL]/snapshot.cgi?user=guest&pwd=&t=”+rand;
}
</script>
<img src=”[your camera URL]/snapshot.cgi?user=guest&pwd=&t=” name=”refresh” id=”refresh” onload=’reload()’>

Embedding camera controls
It is possible to embed any control supported by the camera into your webpage either with a link or by means of a form. These are the more common operator control command codes…

• 0 up
• 1  Stop up
• 2  down
• 3  Stop down
• 4  left
• 5  Stop left
• 6  right
• 7  Stop right

• 25  center
• 26  Vertical patrol
• 27  Stop vertical patrol
• 28  Horizontal patrol
• 29  Stop horizontal patrol

These two are used to control the LEDs in later firmwares

• 94  IO output high
• 95  IO output low

The camera responds to a command with a text string which you can hide in an iframe used as the target for the form or link used to issue the command. An example command using a link…

<a href=”[your camera URL]/decoder_control.cgi?command=nn&onestep=5&user=guest&pwd=” TARGET=”control”>[command description]</a>

<iframe name=”control” border=0 width=1 height=1></iframe>

Here is the complete IP camera SDK which I found.

Protecting your bandwidth
To avoid problems with the googlebot accessing your camera you should exclude your pages containing the video camera url from bot access in robots.txt. Unfortunately some clown decided to access my cellar cam directly rather than through the time limited demo and left the page open for several days on their computer. I initially thought that there was a problem with my internet when I found it was slower than normal until I investigated. I have since reverted to my old Buffalo router with Tomato firmware which gives very good upstream bandwidth control through its QoS routines.

Since converting DigitalHam to use WordPress I’ve added some emails as comments.

Before they invented drawing boards, what did they go back to?