Embedding CCTV streams in web pages

 

Foscam FI8918W wireless IP camera
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 privileges for the display function or operator privileges for control.  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 privilege publicly 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 alt="" src="[your camera URL]/snapshot.cgi?user=guest&amp;pwd=">

or to produce self refreshing stills…

<script>
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 id="refresh" alt="" src="[your camera URL]/snapshot.cgi?user=guest&pwd=&t=" name="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" height="1" width="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.



  25 Responses to “Embedding CCTV streams in web pages”

  1. Here are secure methods to display an IP Camera and many imaging devices in web pages and in websites as well as emails, forums, blogs, social media sites using IMG tags so that your images in those posts when viewed are real-time images of your IP Camera:

    http://foscam.us/forum/post42139.html#p42139

  2. It’s not easy to display live video stream from an IP camera on a web page because you need wide internet bandwidth and a great video player that is compatible with the major browsers.

    But fortunately there are some cloud based services that can do this job for us. One of the best is IPCamLive. This service can receive RTSP/H264 video stream from an IP Camera and can broadcast it to the viewers. IPCamLive has Flash/HTML5 video player component that will display the video on PC, MAC, tablet or mobile. The greatest thing is that this site generates the needed HTML snippet for embedding the live video like this:

    So we just need to copy paste it into our HTML file without any modification.

  3. Yes there are now cloud based services which make things a lot easier. They don’t make any difference to the broadband upstream requirements though.

  4. There is nice new solution how to connect Axis IP camera to those cloud services.

    CamStreamer connects the camera to YouTube Live or other RTMP streaming services. Everything is running inside the camera. No need for computer, public IP, port forward…

  5. > Everything is running inside the camera.

    Actually this isn’t the case with cloud based solutions – you are dependent on the manufacturers server for the device to continue working. The only real advantage with a cloud based camera over a more traditional IP camera which this page is about is that there is no need to open a port on your router so they can still function on a 3G connection which is invariably NATed at the moment.

 Leave a Reply

(required)

(required)