Download How to integrate the IP camera into your website

How to integrate the IP camera into your website
This document will explain how to capture images from your LN-400/401 IP Camera and
display them on your own webpage. Please note, this manual does require some working
knowledge of network configurations and HTML.
This manual assumes the following network configuration in which the IP camera is
situated:
 1 router with port forwarding capabilities connected to the Internet.
 1 IP camera connected to the router.
1. Configuring the camera







Open the IP camera configuration page (default is 192.168.0.20, this IP will be
referred to as the CameraIP for the rest of this manual)
Open the Configuration tab.
For security reasons we need to set up a Administrator user account and
password. You can configuring this option under Admin. Be sure to remember this
username and password!
Also make sure that the camera’s gateway is correctly configured (this would
typically be your router’s IP-address).
Once this is done, enable the Open Second Port option and set the additional port
number to a number of your choosing (for example 81). This port number will be
referred to as the CameraPort for the rest of this manual.
Click Save and close the configuration page.
The camera is now ready.
2. Configuring your router



Open your router configuration page.
Now open the router’s port forwarding configuration (for Sitecom routers this can
usually be found in Advanced->Virtual Servers).
Configure the router to forward all incoming traffic (TCP and UDP) on the
CameraPort to the CameraIP.
Example
This screenshot shows an example configuration when using the
Sitecom DC-202 router.

Save this configuration and close the configuration page.
3. Integrating the IP camera’s Java applet into your webpage
To connect to the IP camera from a webpage you have to add a piece of code to your
webpage. This code will tell the visitor of your webpage how to connect to the your
camera. It uses the very often used Java™ technology but you should realize that on
some operating systems there is no native support for Java™, which means that visitors
to your webpage will not be able to view the camera’s images.
Visitors without Java™ support should then follow this link: http://java.sun.com/ and
downloading and installing the “J2SE JRE” package.
The code
<APPLET name="cvcs" CODEBASE="http://InternetIPAddress:CameraPort/" CODE="xplug.class" WIDTH=320 HEIGHT=240>
<param name="RemotePort" value=CameraPort>
<param name="Timeout" value=5000>
<param name="RotateAngle" value=0>
<param name="PreviewFrameRate" value=20>
<param name="DeviceSerialNo" value="">
</APPLET>
You can copy the code directly into your webpage’s source code however there are four
items (printed in bold) which you much adjust according to your situation.




InternetIPAddress: You should replace this phrase with your public IPaddress as it is known on the Internet. So do not use in the CameraIP here.
Your public IP-address (or sometimes called WAN IP-address) can usually be
found in the Status page of your router.
CameraPort: As mentioned above this is the additional port you configured in
the camera.
WIDTH: This is width of the camera image as configured in the IP camera (default
320).
HEIGHT: This is width of the camera image as configured in the IP camera
default 240).
Once this code has been inserted into your webpage’s source and the code has been
adjusted accordingly, the images of the IP camera should be visible on your webpage.
This concludes the manual.