|
Getting it Live! How to refresh the image...
Once you've decided which kind of WebCam are you going to set up, you need to know how to make it refresh the image...
Refreshing the image
To get the latest shot captured by the WebCam, users connecting to your page will have to Reload it, unless you
add some extra HTML, Javascript code or Java applets which will autoreload the picture after a user-definable period (this
does not apply to the Server push method, since it is continously streaming a video feed).
META tag command: The oldest method (still in use though) of refreshing a WebCam image on a Web page is made via a set of HTML commands.
There is an HTML tag than can make a web page to auto reload after a period of time (in seconds) is reached.
The syntax for this tag is as follows:
<HEAD>
...
<META HTTP-EQUIV=REFRESH CONTENT="seconds">
...
...
</HEAD>
Where seconds is the number of seconds it will take the browser to Reload the current page.
The most significant disadvantage of this method is that the whole page is reloaded, so a heavy graphics
site will be a pain to reload on slow connections and will result on high bandwith (Internet connection) usage.
Alternatively, you can use this method if you fit the image into a FRAMESET tag, that is, compose a web page
with FRAMES, so a very little frame is used to store the HTML code for both the image and the META tag.
Later on this tutorial you'll visit some samples of this method.
If, however, you don't like frames, then you'll need to switch to the use of Java Applets.
Tip: There are some old browsers with a small bug which doesn't allow to refresh an image after some
reloads. This is not our intention (we want the pic updated all the time), so Jason Millers gives us some input on this issue:
"I had the cache bug annoying me in my WebCam page. I added the following to the header and it works now:"
<META HTTP-EQUIV="Expires" CONTENT="Tue, 01 Jan 1980 1:00:00 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
JavaScript Refresh: The natural evolution to HTML tags is the JavaScript language, which will make JUST the image to refresh.
By inserting a small set of JavaScript instructions into the HTML page, you'll be able to refresh JUST the image, without the aid
of any other third party component (program). Note that the visitor to your WebCam page will have to enable JavaScript in order to see the image changing
(nowadays, 90% of the audience does have JavaScript enabled). You'll find more about JavaScript later on this tutorial. This method is probably the hardest
to set up if you're new to WebCams and HTML.
Java Applets: Small programs embeded inside a Web page, executed in realtime, which will load the WebCam images freeing the browser form that job.
There are tons of Java Applets built by the users itself or by third party companies. All of them have
one thing in common: you can put them anywhere (almost! ;) in your WebCam page and they'll refresh the image
for you, without refreshing the whole page; just the image.
The main idea is to put the HTML codes to call the applet where you want the image displayed and configure its parameters.
May be, one of the most spreaded Java Applets in the Net (and easy to set up too) is the
JavaCam Applet (its usage is well explained in the next sections of this tutorial).
We also recommend to take a look at AnfyTeam's AnfyCam Java Applet, part of a collection of Java applets
for your Web pages. The good point of this applet is that has a nice graphical interface where you enter the parameters and it does generate the necessary HTML and Java
files, ready to be uploaded to your server.
OK, now let's decide which is the best Cam hardware that will fit your needs.
| 
