Embedding Foscam IP camera video in your own webpage
 

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 src="[your camera URL]/videostream.cgi?user=guest&pwd=">

The user specified in the query string requires at least guest priviledge.

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 640x480 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&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 now access the camera through php scripts that do not work when accessed directly from the address bar and do not disclose the camera url. Hopefully this will discourage casual hacking and allows me to log accesses and monitor abuse.

    Bookmark this page
    Bookmark to: Blogmarks Bookmark to: Del.icio.us Bookmark to: Digg Bookmark to: Facebook Bookmark to: Google Bookmark to: StumbleUpon Bookmark to: Windows Live Bookmark to: Yahoo

    Electrical Engineers do it with less resistance.

    Get Cashback
    TopCashBack really is the closest you'll get to Free Money. Read how.


    © Copyright www.DigitalHam.co.uk 2005 - 2012