How to add iCatcher feeds to your web site

Java-powered embedded live feeds

Many people wish to include a "live" webcam on their website, but don't want to provide a link to the entire iCatcher system. iCatcher's web interface is flexible to allow many different ways of presenting live feeds in a webpage on another site.

IP Addresses

In order to set up a live feed link, you will need to know your internet connection's IP address. If you have a broadband router (e.g. cable or DSL) the area of IP addresses may cause some confusion, so we will briefly explain how such systems are set up.

An IP address is an identifier of sorts, and allows other systems on the internet to find you. It its through this mechanism that the internet is able to send data from a website back to your browser for viewing. Unfortunately, there is a limit of roughly 4 billion IP addresses on the internet, and there less and less of these available. For this reason, most broadband routers operate in a "Network Address Translation" (NAT) mode.

NAT operates by "channelling" all your systems through a single internet IP address. On your internal network (including wireless networks), your systems will have "private" IP addresses, i.e. addresses that by specification can not be on the internet. These are usually in the range of 192.168.0.0 through to 192.168.255.255.

Your router will take outgoing data requests from these private IP addresses, and "translate" them to look like they are coming from your single non-private address. When the data arrives back the router translates the address back to the private address, and sends the data onto the network.

For iCatcher, this means you need to know two IP addresses: The private IP address on the machine running iCatcher itself, and the public IP address of your internet connection. The latter can be found out by visiting http://www.whatismyip.com. For the private IP address, you can start a command prompt, and type "ipconfig" followed by the enter key. The Command Prompt can usually be found on the accessories menu of the Start Menu.

Because of this translation mechanism, the router has your internet connection rather than any PC on your network. Thus any incoming connections (e.g. to iCatcher) need to be "forwarded" - i.e. the router needs to be told that the connection should be passed on. While the router is intelligent enough to spot returning data for a connection originated by a PC, it can not automatically determine where internet-originated connections should go to.

Setting up port forwarding varies between routers, and is sometimes known as virtual servers, or as part of the router's NAT configuration. You will need to consult your router's docuentation on how to set up port forwarding. Alternatively, the PortForward web site has step-by-step instructions for most of the popular internet routers. Select "Guides" then "Port Forwarding Guides by Router", then select your router model, followed by the "HTTP" service.

In additional to the private IP address above, you will need to specify a protocol of "TCP", and any port numbers should be set to 80. If you have any other options, then should be left at their defaults.

Dynamic IP Addresses

Home internet connections often have dynamic IP addresses which change every time the connection to the internet is made. This makes it difficult to find your iCatcher system if your IP address is different to the one you have remembered. The easiest way around this is to arrange with your ISP to have your connection converted to use a static IP address (i.e. one that does not ever change). This can however be costly (price varies between ISPs), and depending on your connection can also take a long time to arrange and set up.

The alternative is to use a dynamic DNS service, which provides a hostname which always points to your home IP address. This is kept up to date by a small monitor program running on a computer on your network (such as the iCatcher System), which checks your IP address, and updates the hostname when it changes. Then you simply need to remember the hostname to connect to your iCatcher system, or to put in a webpage to refer to your iCatcher system. DynDNS.org provides such a service for free (subject to a pre-chosen list of hostname suffixes), or customised hostnames for a small fee.

Setting up the page

For a live video stream, it is preferable to get the best performance out of the limited bandwidth of a home internet connection. The Java applet provded in the iCatcher web interface provides the best performance, however there is a security issue with using it on another site.

The Java security restrictions mean that a Java applet can ONLY access content on the website from which the applet came from, and in turn, the applet can only come from the same site as the web page that holds it.

Since your website is a different site to that of the images (i.e. the iCatcher System), the Java interpreter will not permit the applet to connect, and you will see no images as a result.

We have therefore developed the "simple" html page. This is a page which can be embedded in a web page on another site as an IFRAME, and provides just the MotionJPEG Java applet. To use this page, you will need to include the following in your web page:

<iframe src="http://10.1.3.29/simple.htm?feed=Office%202"
	width="384" height="288" frameborder="1" scrolling="no"></iframe>
					

In our example, we have used the IP address of 10.1.3.29, which is a private IP address, making this IFRAME definition suitable for internal use. For your website, you would instead use the public IP address (or hostname if you have one) of your internet connection. The IFRAME source also specifies a feed name after the ?feed= part. This is the feed name of the camera you wish to embed, which in our example is "Office 2". Note that the space has been replaced by %20 - this is a required of HTTP so that certain characters are correctly sent to iCatcher's web server.

You can use this IFRAME code multiple times on a web page, but be aware that multiple connections to a single iCatcher system may slow the connection down considerably.

For iCatcher Console, the simple.htm page automatically detects and utilises Java. If Java is not supported in the web browser, then it will operate in a JavaScript-only mode instead.

For i-Catcher Sentry/Wildlife, simple.htm attempts to use Java by default, requiring Java support in your visitor's browser. In order to provide a compatible feed, you will need to implement the code below instead of the IFRAME method above.

JavaScript feeds

For all iCatcher Console-based embedded feeds, the IFRAME method above should be used, as it automatically detects and utilises Java support where available. The code below should only be used for older iCatcher feeds.

The basic method behind the feed page is a simple piece of JavaScript that loads an image in the background, and displays it on screen when ready. The source code for a simple web page is shown below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
   
<script language="JavaScript" type="text/javascript">
<!--
	Preload=new Image();

	function Delay() {
	  setTimeout("loadimg()",40);
	}

	function loadimg() {
	  now=new Date();

	  document.images[0].src=Preload.src;

	  Preload.src='http://10.1.3.29/image.jpg?uniq='+now.getTime();
	  Preload.onload=Delay;
	}

	function loadfirst() {
	  now=new Date();

	  Preload.src='http://10.1.3.29/image.jpg?uniq='+now.getTime();
	  Preload.onload=Delay;

	  document.images[0].onload="";
	}
// -->
</script>

<img src="http://10.1.3.29/image.jpg" onload="loadfirst();">
</body>
</html>
					

Again, you will need to adjust the IP addresses and feed names appropriately for your iCatcher system. The ?uniq= part of the image src is necessary to ensure the browser cache operates as expected.

You will need to repeat this for each of the URL entries in the code (there are 3). Once this is done, you will have a very simple web page providing a live updating webcam image.

Multiple JavaScript Webcams on a page

It is possible to extend this web page to include multiple cameras. Doing so will require a little HTML knowledge to ensure the image loads correctly. Firstly, you'll need to give each image a unique name, by changing <img to <img name="imagename". Then in the JavaScript itself, replace images[0] with the name of your image. The code will need to be duplicated, with each function (Delay, loadimg and loadfirst) having unique names (such as Delay1, loadimg2, loadfirst3, etc). The changes that need to be made to allow multiple webcams should be obvious by reading through the code.