Alan Buckman
 
I've had a number of requests over the past few years to explain how the camera and web interface works, so here goes - hopefully the documentation below may help others create something similar.

For the purpose of simplicity, I will assume the camera is already setup, following the manufacturers own instructions and is working on the home network correctly. The below details how to setup your router to open an incoming port to the camera and setup a script on a page on your own existing web space to display the camera output.

The images below are specifically for a Sky Q router, the principles will be the same, but for router specific instructions you'll need to consult your own providers information.

I am, of course, also assuming that you have a good working knowledge of HTML editing, some experience with incorporating scripts into web content and that you already have and manage an existing website.
   
Firstly, the camera equipment itself The wide area 'Medway Cam' is a Foscam R2, capable of a maximum resolution of 1080p.

The 'Marina Cam' is a Foscam R4 model, capable of a maximum 4 Megapixel resolution

Both cameras are capable of 300° pan, 100° tilt and are equipped with optical zoom - although this is only enabled on the latter model which is focused more tightly on the marina itself.

The cameras are fitted with a standard 1/4" tripod mount and are suspended (upside down) using suction cup mounts with corresponding tripod screws. The internal software is used to mirror and flip the image to the right orientation.

Each camera outputs video in the H.264 standard and are fully controllable and viewable from Foscam's app or directly via a web browser. They support motion detection, cloud recording and infra red night modes, but none of these tools are utilised in this setup.

Most importantly, these cameras have a common gateway interface (cgi) web server built in, which allows each camera to be accessed via a web browser to retrieve many variables, including a static image of their current view - it's this trick that allows you to see the cameras 'stream' on this website - which is not actually a video image, but a rapidly updating series of images.
 
   
Check your browser can login to the camera For most things, you can manage the camera via Foscam's iOS or Android App, but there are one or two settings below that can only be changed via the camera's on-board admin web page.

Foscam require the use of a browser plugin to login to the camera, download-able here, which is getting increasingly hard to get working as modern browser security keeps getting ramped up. At the point of writing this, the plugin above works with Windows 7 and 10 on Edge, Chrome and IE browsers. There is no easy way to get this working on a Mac, short of installing a Windows virtual machine, it just won't work - so, make sure you can login to the camera from your browser before going any further.

You'll need the camera IP address to type into your browser search bar. Get this from the Foscam app or from your router's 'connected devices' summary.
 
   
Setting up your camera port For normal home use, the camera will have been assigned an IP address by your router (DHCP allocation) when you set it up.

The camera will be ship with a default port which you you change. This is to make sure that, once this port is opened on your router, only web traffic for the camera can routed to it and nothing else is 'exposed' to the outside world.

Login to the camera admin tools via a browser or their app and find the network settings configuration area.

The Network > Configuration should have 'Obtain IP From DHCP' ticked. It's OK to leave this set as it is, we will reserve this IP address on your router later on.

Go to Network > Port and change the port to 8090. Save this setting.

Note, do this in the Foscam app if you can as it will save you having to re-add the camera to the app again.

You'll need a unique port for each camera you are setting up, (i.e. use 8091,8092 etc. if you have more than one camera.

Note: once the port has been changed from the default, to open the camera interface in a browser, you'll need to specify the port:

e.g. 192.168.0.66:8090  
 
 
       
Setup an Operator user account By default, you will currently be using an 'Administrator' level account to access and control your camera. This combination of username and password allows you to do anything with the camera so we don't want to be using this beyond personal use.

You'll therefore need to add a second user account - but only with 'Operator' level privileges. This will allow the web page script to obtain camera images, move and zoom the camera etc., but nothing that could allow someone to take full control or change any settings.

Note: You can only do this in the camera web interface, there's no way of setting up user accounts in the Foscam apps.

Navigate to Basic Settings > User Accounts and click on the blank line below your Admin account. Set a username and password, set 'Privilege' to 'Operator' and save the new user account
 
   
Reserve the cameras IP address on your router As you will need to open up the port you've just setup on your router to allow the camera to be accessed from outside, it's good practice to reserve the IP address of the camera to ensure the address it is using will never change.

Login to your router, normally this will just be a case of typing 192.168.0.1 into the address bar of your browser. Login using the default username and password for your router (unless you've changed it)

Locate the 'Address Reservation' section in the router setup screens (on a Sky Q router it is in the Advanced > LAN IP Setup tab).

Click on 'Add', select the IP Address of your camera from the list provided, give it a name and click 'Add', then 'Apply'. You'll most likely be prompted to reboot the router at this point.
 
   
Allowing the outside world to connect to the camera The web page script we will be using will access your camera via a specific port (as set above on the camera itself).

This port needs to be opened on your router firewall (creating a 'Service') and then all traffic to it needs to be routed to the IP address of the camera (setting a 'Port Forwarding' rule).

On a Sky Q router go to the Security > Services screen to create the service.

Add a new TCP service, name it and set the start and end port to that to which you have set the camera (e.g. 8090 as above).

On a Sky Q router go to the Security > Firewall Rules screen to add an inbound service rule.

Specify the service that you have just created and forward this open port to the IP address of the camera.      

 


   
Setting up dynamic DNS

Your Internet Service Provider (ISP) will lease (temporarily allocate) a wide area network (WAN) IP address to your router. This can be addressed by anyone on the Internet. Your ISP will also typically change this IP address frequently.

In order to implement a way of accessing the camera on via Internet, such as the script I am using on this website, we always need to know what WAN IP address is currently allocated to your router. To do this, you need to sign up to a Dynamic DNS (DDNS) service.

The DDNS service is essentially a database that your router updates with it's current IP address frequently. This allows you to access your home network by using a fixed name.

You'll need to create an account with a DDNS provider, noip.com or DynDNS.org for example. No-IP offer a free service, albeit you do need to acknowledge their monthly email to confirm it is still used.

Once you have an DDNS service setup, you can setup your router to update the service each time it's WAN IP address changes.

On a Sky Q router, this is done on the Advanced > DDNS page. Choose the DDNS service provider you have setup, enter your username and password for the service and save the settings.

 



   
Testing this works so far If all of this works, you should now be able to access your camera's login page from an Internet connection that is outside your home network.

The easiest way to test this is to use your smartphone, remembering to turn off Wi-Fi so that it is forced to use the phone provider's cellular data network.

Open the phone's web browser and navigate to the DDNS address you setup in the previous step + ':' + the port number you setup on the camera. This will depend on the DDNS provider you chose to use, but should look something like: http://myddnsname.net:8090

If all is well, you should be presented with the login page for your camera.
 
   
Web page script           I am using a heavily stripped down version of a script created by Don Kennedy, aka TheUberOverLord.

Don's scripts no longer seems to be being supported (Searching Foscam forums in April 2020) but I have included local copies of his full original code that I downloaded from his site back in 2015 via the links below.

There are three elements you'll need to incorporate into the web page:

1/ Include this script within the header (i.e. somewhere between the <head> and </head> tags) of your page. Once pasted into your header, edit the camera URL (e.g. myddnsname.net) to that of your own camera as you setup with your DDNS provider above.

Edit the Operator account username and Password that you setup on the camera.

Edit the 'camResolution ' value to the width of the image you want displayed (in pixels).

Edit all other Y/N options to turn off/on various camera controls as required.



2/ Make sure your <body> tag includes an instruction to load the script:

<body onLoad="load()">

3/ Include this html within the body (i.e. somewhere between the <body> and </body> tags) of your page. You'll need to place it in your body code accordingly, depending where the camera image and controls need to be on your page design.
  Other tips:

Whilst not essential, unused <div> sections of the body HTML can be edited out to match what controls you are displaying for page visitors to use (i.e. if they are set to "N" in the script settings, why have the HTML there if its not used).

If you are using the preset controls (as I do on this site) the HTML code is expecting camera presets to be numbered '1' through '10'. You will need to setup these preset positions on your camera accordingly.

Note that you can only name camera presets using the FoscamVMS application or by logging into the camera via a browser. this cannot be done in the iOS app. Move the camera to where you want to set a preset position, click on the '+' button and name the preset, 1,2,3... 10.