BraveSirRobbin
Moderator
How to Use WebCamXP with Homeseer's Webserver
by Brave Sir Robbin
If you are like most people you want to incorporate video into your Homeseer's web server.
This document will describe how to use WebCamXP with Homeseer’s web page. The end result will have a webcameras.html file associated with the Homeseer main web page. This webcameras.html will show a live video feed plus have the ability to view thumbnail images of images captured with the web camera (clicking on the thumbnail will bring up the full size image).
When this How-to is completed your webcameras.html file will give you the following example screen shots.
"Live Video Feed" with Links to Thumbnail Capture Directory and Homeseer Main Automation Page:
"Thumbnail Directory Screen"
"and Thumbnail Images (Clicking on Thumbnail Enables Full Size Image)"
The trigger for the image captures is a “motion capture†that “senses†when the video image has changed. This setting is adjustable as a percent of video change that will enable a capture.
This document will assume that you have your web camera operating properly with your video capture card in your computer, you have an “always on†internet connection, you are using Homeseer, and you have a Linksys firewall between your internet connection and your computer.
Section 1. Enabling the Homeseer Web Page
Start Homeseer and go to the “Viewâ€, then “Options†Menu:
Click on the "Web Server" tab:
Check the “Enable Server†box and enter a “Server Port:†number. For security reasons do not enter a common HTTP port number such as 80 or 8080, for this demo we will refer to this port number as “3000â€. Also enter a Web Username and Web Password. You may want to check the “No password needed for the following subnets:†box if you are using other computers in your home to view this web page. Enter the first three internet address fields that you are using for the “LAN†side of your firewall (this will be explained later).
Close this page by clicking on OK. You may have to restart Homeseer for these changes to take effect.
Test to see if you can see your Web Server’s Home page by clicking on the blue globe icon in the top toolbar of Homeseer (or type http://localhost:3000 in Internet Explorer). Your Web Page should look similar to the one below.
Section 2. Setting Up The Linksys Firewall/Router
The Linksys Firewall/Router enables the internal “LAN†side of the network to be isolated/protected from the external “WAN†side of the internet. Thus your home will only have one external IP address which is shared by all the internal computers in your home. The Linksys box should already be connected between your cable or DSL box and your computers.
You will need to setup "port forwarding" to view your web pages from an "external" internet connection. For this example you need to port forward the 3000 port request to go to the computer in your "LAN" that Homeseer and WebCameraXP are running on.
Please see the "How-to" document on "Setting Up Port Forwarding For Your Linksys Router" for details on how to do this.
Section 3. Setting Up No-IP.com for Dynamic Web Presence
You probably have your internet IP automatically assigned to you using DHCP by your internet provider. The problem is that this can change (i.e. it is not static). Using a utility called No-IP will let you keep a static presence on the web.
You should set up No-IP for your Homeseer web server if you plan on viewing your webserver outside your home. Please refer to this "How-to" in the How-to's section.
Section 4. Setting Up WebCamXP Software
Now it is time to download and setup your WebCamXP software. Download the WebCamXP software from http://webcamxp.com/download.html (select the “Pro†version 21 day free trial). This way you will not have to purchase the software if you decide not to use it (price is around $35). Choose the default directory to install it to.
Start the WebCamXP software. Select “source1â€, “directx video sourcesâ€, and then select your camera video card (in this case it is the “ati tv wonder conexant capture†card). You should see the following menus below when this is completed:
For the ATI TV Wonder capture card select the "composite" video input as shown below:
Go to the "web server" selection from the top menu as shown below:
For this example select the HTTP client type as java client and enable the HTTP server.
Go to the "options" selection from the top menu as shown below:
Select the following options: start on windows startup, start http server on startup, minimize on startup, detect WAN ip on startup, show notifications in trayicon, play sound on new visitor, and play sound on chat message.
Select the "site/gallery" tab as shown below:
Select a site title (in this example "Front Door Camera"). Select (check) the following options: show nav. links, show chatbox, show online gallery.
In the text box under the "enable file sharing" option enter "C:\Program Files\Homeseer\html\gallery. This is where the image capture files will be kept. (Note: Create the directory if needed).
Click on the "gallery options" button as shown below:
You can elect to have a picture automatically grabbed for a specific time interval if you would like (in this example we will grab an image for each motion detected). Enter how many pictures you would like displayed in the "captured images" directory screen (in this example its 500 pics).
Click on the "back to design" button, then click on the "generate HTML" button.
Click on the "overlay/fx" tab as shown below:
If you purchase the pro version you can elect not to display the webcamxp logo. Click on the "overlay editor" button as shown below:
Here is where you can add text overlays to your camera image. In this example the caption "Front Door" and the date and time were added.
Click on the "ok" button when you are finished with the overlay editor.
Now we will set up the motion detector settings.
Click on the "motion detector" tab as shown below:
The "interval[ms]" is the amount of time needed between storing image captures to the picture gallery. In this example 2000 milliseconds (2 seconds) is needed after the first capture, before another capture is recorded. The "detect on:" selection will let you select the type of video change needed before a capture is recorded. This example will use both (optimal setting for day and night). The "tolerance" setting is the percent of change that has to occur in the video before an image is recorded. In this example 15% video change is needed. You can see the real time video change in the "motion:" display on the right.
Select the "start detector" button to start the image motion detection.
If your tolerance number is close to the motion number only a small change in the video will enable an image capture. Be careful with this setting. To small a number will have you capturing images when a bird flys into a picture, to large will not capture when a person enters the video image. Experiment as needed (in day and night times) for optimal settings.
Click on the "alert manager" button as shown below:
Select the "add to gallery" and "save to web[jpeg]" options. Close this window (x in the upper right).
Go to the "web server" options in the top menu and select "HTTP settings...". You should see the screen below:
Select a port for your WebCamXP server to run on, in this case port 4000 was selected. Note that this can not be the same port number as your Homeseer software and this port must also be "port forwarded" in your firewall/router also.
Select the root directory of "C:\Program Files\HomeSeer\html as shown. Click on the "start server" button then click on the "search WAN ip" button. Also select the "verify WAN ip each" box and enter 30 minutes for this interval as shown.
This is one of WebCamXP's strengths in the fact that it will automatically search for your WAN IP (in this case every 30 minutes).
Go to the "options" selction in the top menu. You should see the screen below:
This will determine the streming options for your video. This example uses around 4 frames per second with a 100 percent (uncompressed) quality.
Enter the following under the "archives directory" text box: "C:\Program Files\HomeSeer\html\gallery\archives"
Click on the "file" selection on the top menu and save your settings.
That is all of the settings needed for WebCamXP. Closing this screen (x on the top right) should minimize the program in the system tray.
Section 5. Setting Up the webcameras.html file and links to the Homeseer Main Web Page
Remember in the No-IP How-to where we used a dynamic host name for the Homeseer web server? Well, we need to use that name in the webcameras.html file. Also, remeber to set up your local "Hosts" files on each computer in your home so you can view this webcameras.html file on computers on the LAN side of your firewall (Refer to How-to on Setting Up Your Computer With No-IP)
Open "Notepad" on your PC and copy and paste the following:
---------------------start of copy----------------------
---------------------end of copy----------------------
Notice where we had to use the dynamic host name "http://myautomation.zapto.org" that was created using the No-IP example. Port 3000 was used for the Homeseer Web Page and Port 4000 was used for the WebCamXP Page. For this webcameras.html file we need to use the "http://myautomation.zapto.org:4000" to refer to the WebCamXP webserver.
Save this page as "webcameras.html" in the "C:\Program Files\homeseer\html" directory.
You should now be able to open this file under your Homeseer Web Server and see the web camera image and links to the image captures page and the main homeseer web server page.
If you were following the examples in the three "how-to" series open the following in your internet explorer:
"http://myautomation.zapto.org:3000/webcameras.html"
You can also create a link to this file in your main Homeseer web page by editing the "links.htm" file (in C:\Program Files\homeseer\html directory).
Open this file using Notepad and add the following to the current links:
This will create links to the live image stream and the thumbnail image directory.
Well thats it. You should now be set. If you have any problems (there were a lot of settings to get right between this post and the other two "How-to" posts) let us know. :unsure:
BSR
by Brave Sir Robbin
If you are like most people you want to incorporate video into your Homeseer's web server.
This document will describe how to use WebCamXP with Homeseer’s web page. The end result will have a webcameras.html file associated with the Homeseer main web page. This webcameras.html will show a live video feed plus have the ability to view thumbnail images of images captured with the web camera (clicking on the thumbnail will bring up the full size image).
When this How-to is completed your webcameras.html file will give you the following example screen shots.
"Live Video Feed" with Links to Thumbnail Capture Directory and Homeseer Main Automation Page:
"Thumbnail Directory Screen"
"and Thumbnail Images (Clicking on Thumbnail Enables Full Size Image)"
The trigger for the image captures is a “motion capture†that “senses†when the video image has changed. This setting is adjustable as a percent of video change that will enable a capture.
This document will assume that you have your web camera operating properly with your video capture card in your computer, you have an “always on†internet connection, you are using Homeseer, and you have a Linksys firewall between your internet connection and your computer.
Section 1. Enabling the Homeseer Web Page
Start Homeseer and go to the “Viewâ€, then “Options†Menu:
Click on the "Web Server" tab:
Check the “Enable Server†box and enter a “Server Port:†number. For security reasons do not enter a common HTTP port number such as 80 or 8080, for this demo we will refer to this port number as “3000â€. Also enter a Web Username and Web Password. You may want to check the “No password needed for the following subnets:†box if you are using other computers in your home to view this web page. Enter the first three internet address fields that you are using for the “LAN†side of your firewall (this will be explained later).
Close this page by clicking on OK. You may have to restart Homeseer for these changes to take effect.
Test to see if you can see your Web Server’s Home page by clicking on the blue globe icon in the top toolbar of Homeseer (or type http://localhost:3000 in Internet Explorer). Your Web Page should look similar to the one below.
Section 2. Setting Up The Linksys Firewall/Router
The Linksys Firewall/Router enables the internal “LAN†side of the network to be isolated/protected from the external “WAN†side of the internet. Thus your home will only have one external IP address which is shared by all the internal computers in your home. The Linksys box should already be connected between your cable or DSL box and your computers.
You will need to setup "port forwarding" to view your web pages from an "external" internet connection. For this example you need to port forward the 3000 port request to go to the computer in your "LAN" that Homeseer and WebCameraXP are running on.
Please see the "How-to" document on "Setting Up Port Forwarding For Your Linksys Router" for details on how to do this.
Section 3. Setting Up No-IP.com for Dynamic Web Presence
You probably have your internet IP automatically assigned to you using DHCP by your internet provider. The problem is that this can change (i.e. it is not static). Using a utility called No-IP will let you keep a static presence on the web.
You should set up No-IP for your Homeseer web server if you plan on viewing your webserver outside your home. Please refer to this "How-to" in the How-to's section.
Section 4. Setting Up WebCamXP Software
Now it is time to download and setup your WebCamXP software. Download the WebCamXP software from http://webcamxp.com/download.html (select the “Pro†version 21 day free trial). This way you will not have to purchase the software if you decide not to use it (price is around $35). Choose the default directory to install it to.
Start the WebCamXP software. Select “source1â€, “directx video sourcesâ€, and then select your camera video card (in this case it is the “ati tv wonder conexant capture†card). You should see the following menus below when this is completed:
For the ATI TV Wonder capture card select the "composite" video input as shown below:
Go to the "web server" selection from the top menu as shown below:
For this example select the HTTP client type as java client and enable the HTTP server.
Go to the "options" selection from the top menu as shown below:
Select the following options: start on windows startup, start http server on startup, minimize on startup, detect WAN ip on startup, show notifications in trayicon, play sound on new visitor, and play sound on chat message.
Select the "site/gallery" tab as shown below:
Select a site title (in this example "Front Door Camera"). Select (check) the following options: show nav. links, show chatbox, show online gallery.
In the text box under the "enable file sharing" option enter "C:\Program Files\Homeseer\html\gallery. This is where the image capture files will be kept. (Note: Create the directory if needed).
Click on the "gallery options" button as shown below:
You can elect to have a picture automatically grabbed for a specific time interval if you would like (in this example we will grab an image for each motion detected). Enter how many pictures you would like displayed in the "captured images" directory screen (in this example its 500 pics).
Click on the "back to design" button, then click on the "generate HTML" button.
Click on the "overlay/fx" tab as shown below:
If you purchase the pro version you can elect not to display the webcamxp logo. Click on the "overlay editor" button as shown below:
Here is where you can add text overlays to your camera image. In this example the caption "Front Door" and the date and time were added.
Click on the "ok" button when you are finished with the overlay editor.
Now we will set up the motion detector settings.
Click on the "motion detector" tab as shown below:
The "interval[ms]" is the amount of time needed between storing image captures to the picture gallery. In this example 2000 milliseconds (2 seconds) is needed after the first capture, before another capture is recorded. The "detect on:" selection will let you select the type of video change needed before a capture is recorded. This example will use both (optimal setting for day and night). The "tolerance" setting is the percent of change that has to occur in the video before an image is recorded. In this example 15% video change is needed. You can see the real time video change in the "motion:" display on the right.
Select the "start detector" button to start the image motion detection.
If your tolerance number is close to the motion number only a small change in the video will enable an image capture. Be careful with this setting. To small a number will have you capturing images when a bird flys into a picture, to large will not capture when a person enters the video image. Experiment as needed (in day and night times) for optimal settings.
Click on the "alert manager" button as shown below:
Select the "add to gallery" and "save to web[jpeg]" options. Close this window (x in the upper right).
Go to the "web server" options in the top menu and select "HTTP settings...". You should see the screen below:
Select a port for your WebCamXP server to run on, in this case port 4000 was selected. Note that this can not be the same port number as your Homeseer software and this port must also be "port forwarded" in your firewall/router also.
Select the root directory of "C:\Program Files\HomeSeer\html as shown. Click on the "start server" button then click on the "search WAN ip" button. Also select the "verify WAN ip each" box and enter 30 minutes for this interval as shown.
This is one of WebCamXP's strengths in the fact that it will automatically search for your WAN IP (in this case every 30 minutes).
Go to the "options" selction in the top menu. You should see the screen below:
This will determine the streming options for your video. This example uses around 4 frames per second with a 100 percent (uncompressed) quality.
Enter the following under the "archives directory" text box: "C:\Program Files\HomeSeer\html\gallery\archives"
Click on the "file" selection on the top menu and save your settings.
That is all of the settings needed for WebCamXP. Closing this screen (x on the top right) should minimize the program in the system tray.
Section 5. Setting Up the webcameras.html file and links to the Homeseer Main Web Page
Remember in the No-IP How-to where we used a dynamic host name for the Homeseer web server? Well, we need to use that name in the webcameras.html file. Also, remeber to set up your local "Hosts" files on each computer in your home so you can view this webcameras.html file on computers on the LAN side of your firewall (Refer to How-to on Setting Up Your Computer With No-IP)
Open "Notepad" on your PC and copy and paste the following:
---------------------start of copy----------------------
Code:
<html>
<head>
<title>
My Web Camera's Running WebCamXP
</title>
</head><body bgcolor="#0080C0" topmargin="0" leftmargin="0"
marginwidth="0" marginheight="0"><center><font face="verdana"
size="5" color="#F3F3F3"><b>My Web Camera</b><br><br>
<table align="center"><tr><td>
<td><a href='/Gallery/index.html'>_CAPTURED IMAGES_</td>
<td><a href='stat'>_AUTOMATION MAIN_</td>
</tr></table>
<table align="center"><tr><td>
<OBJECT
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash
/swflash.cab#version=6,0,0,0" WIDTH="320" HEIGHT="240"
id="webcamXP" ALIGN="">
<PARAM NAME=movie
VALUE="http://myautomation.zapto.org:4000/webcamXP.swf?webcam=
[URL=http://myautomation.zapto.org:4000/cam_1.jpg&refresh=245"><PARAM]http://myautomation.zapto.org:4000/cam_1.j...t;><PARAM[/URL]
NAME=loop VALUE=false> <PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high> <PARAM NAME=scale
VALUE=noscale> <PARAM NAME=salign VALUE=LT> <PARAM
NAME=wmode VALUE=opaque>
<EMBED
src="webcamXP.swf?webcam=http://myautomation.zapto.org:4000/cam
_1.jpg&refresh=245" quality=high WIDTH="320" HEIGHT="240"
NAME="webcamXP" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EM
BED></OBJECT>
</form></font></td></tr></table>
</div>
</body>
</html>Notice where we had to use the dynamic host name "http://myautomation.zapto.org" that was created using the No-IP example. Port 3000 was used for the Homeseer Web Page and Port 4000 was used for the WebCamXP Page. For this webcameras.html file we need to use the "http://myautomation.zapto.org:4000" to refer to the WebCamXP webserver.
Save this page as "webcameras.html" in the "C:\Program Files\homeseer\html" directory.
You should now be able to open this file under your Homeseer Web Server and see the web camera image and links to the image captures page and the main homeseer web server page.
If you were following the examples in the three "how-to" series open the following in your internet explorer:
"http://myautomation.zapto.org:3000/webcameras.html"
You can also create a link to this file in your main Homeseer web page by editing the "links.htm" file (in C:\Program Files\homeseer\html directory).
Open this file using Notepad and add the following to the current links:
Code:
| <a href="webcameras.html">My Web Camera</a>
| <a href="gallery/index.html">Camera Motion Captures</a>This will create links to the live image stream and the thumbnail image directory.
Well thats it. You should now be set. If you have any problems (there were a lot of settings to get right between this post and the other two "How-to" posts) let us know. :unsure:
BSR
