Muokataan sivua Web-kameran kuva verkkoon

Web-kameran kuvan saaminen esim. kotisivulleen näkyviin on paljon helpompaa kuin voisi luulla. Tässä ohjeessa Linux-kone ottaa kuvan ja lähettää sen FTP:llä jollekin www-palvelimelle. Mukana on myös html, css ja js-tiedostot palvelimelle kuvan näyttämistä ja automaattista päivittämistä varten. Homma sujuu näin:

== Ohjeet ==
# laita [[Web-kamera|web-kamerasi]] käyttökuntoon
# asenna camE. Löytynee jakeluversiosi pakettivarastoista tms tai [http://linuxbrit.co.uk/camE/|ohjelman kotisivuilta] lähdekoodimuodossa.
# kopioi alla esitetty .camErc -asetustiedosto kotikansioosi ja muokkaa sen asetukset sopiviksi itsellesi kommenttien opastamalla tavalla
# luo palvelimelle kansio johon kuva tullaan julkaisemaan, esimerkiksi nimellä cam
# luo palvelimelle ftp-tunnus camEa varten 
# kopioi index.html, cam.js sekä style.css palvelimen cam-kansioon
# käynnistä camE komennolla camE. Se menee taustalle ja täytyy lopettaa tappamalla prosessi. Jos et halua sen menevän taustalle, käynnistä komennolla camE -f

== .camErc -asetustiedosto ==
Kopioi tämä tiedostoksi .camErc kotikansioosi
<pre>
#nämä asetukset ottavat kuvan kerran sekunnissa, lähettävät sen ftp:llä palvelimelle kansioon cam sekä tallentaa joka 100. kuvan paikallisen koneen kansioon /var/www/cam/archive

[ftp]
host = ftp.domain.fi
user = kamera
pass = salasana
dir  = cam

# where should the file end up? Also, this extension determines the file
# type the image is saved as. Try image.png for a png.
file = webcam.jpg

# camE uploads to a temp file, and moves it across when done
# this way people don't view half-uploaded images
tmp  = uploading.jpg

# keep the connection open (1) or reopen it for each shot (0)
keepalive = 0

# do passive ftp?
passive = 0

#an interface to use for non-passive ftp.  use "-" to let libcurl choose, or
#use a real interface name.  (libcurl often chooses incorrectly)
interface = -

# ftp debugging? (noisy)
debug = 1

# Actually do the upload? If do = 0, just take and archive pics.
do = 1

# Some servers require us to explicitly delete the previous image
# In that case, enable this option
delete_first = 0

# Determines how many shots are taken before an image is uploaded.
# (1 == every picture is uploaded, 10 would be every 10th image)
# (Defaults to 1 if not present)
upload_every = 1

[scp]
# you can set ftp->do to 0 above and use scp instead - you still need
# the dir, file and tmp settings in the ftp section for this to work.
# scp also honors the upload_every setting from the ftp section, and
# will also default to a value of 1 if not present.

#target = user@ssh.domain.fi

[grab]
device = /dev/video0

# store temp image on local machine
temp_file = /tmp/webcam.jpg

# lag reduction, takes 5 shots, discards the first 4, thus clearing mmap
# buffers
lag_reduce = 5

# This goes at the bottom left, with the message from "infofile" appended.
# It is run through strftime, so date vars are expanded.
text   = %d/%m/%Y %H:%M:%S %Z
width  = 352
height = 288

# delay between uploading one shot and starting the next
delay  = 2

# do we want to correct the delay for a slow connect?
# (keeps the perpetually updating clients in sync)
correct = 1

# scale image resolution dynamically based on bandwidth?
# percentage of the delay to spend uploading the image,
# 100 disables, useful values are < 40
percent = 100

# where to log activity. comment out this line to disable logging
logfile = /home/user/Temp/.camlog

# gets the message text from here. one line allowed only. means you can do
# stuff like echo "sleeping and stuff" > ~/.caminfo
#infofile = /home/user/.caminfo

# directory to archive pics in. They are datestamped and saved in here.
archive = /var/www/cam/archive

# archive pics in datestamped subdirs
# (1 == with subdirs, 0 == without subdirs)
archive_subdirs = 0

# extension (determines type) of archived images.
archive_ext = jpg

# determines how many shots are taken before a pic is archived
# (1 == every pic, 0 == don't archive)
archive_shot_every = 100

# create archive thumbnails enable/disable flag and give width/height
archive_thumbnails_dir    = /opt/images/webcam/thumbnails
archive_thumbnails_create = 0
archive_thumbnails_width  = 120
archive_thumbnails_height = 90

# jpeg quality (you can save as png etc too, but then quality does squat)
quality = 85
input  = 0

# 0 for PAL, 1 for NTSC
norm   = 0

# Goes in the top right. strftime() is run on this too, so put date stuff in
# if you like
title_text = Weppikamera

# color/transparency of title text
title_r = 255
title_g = 255
title_b = 0
title_a = 255

# font for title text. fontname/size
title_font = arial/8

# fancy font styles
# title_style = /path/to/title.style
# color/transparency of message text
text_r = 255
text_g = 255
text_b = 0
text_a = 255

# font for message text. fontname/size
text_font = arial/8

# fancy font styles
# text_style = /path/to/text.style
# color/transparency of rectangle behind text
# make it 0,0,0,0 to disable.
bg_a = 0
bg_b = 0
bg_g = 0
bg_a = 100

# directory to look for ttf fonts in
ttf_dir = /usr/share/fonts/truetype/msttcorefonts

# file to check for before shooting. while this file exists, no shots will be taken.
blockfile = /home/user/BLOCKCAM

# image to upload when blockfile is first put in place
# offline_image = /home/gilbertt/.block.jpg

# File to check before shotting, while this file exists, shots will be taken.
# but not uploaded. blockimage will not be uploaded if you set this.
uploadblockfile = /home/user/BLOCKUPLOAD

# Shots will only be taken/uploaded if the specified interface is active.  
#watch_interface = ppp0

# image to overlay
overlay_image = /home/user/.lb.png
overlay_x = 5
overlay_y = 5

# do things. like play sounds or whatever. Each is a shell command.
#action_pre_shot
#action_post_shot
#action_post_upload
# image processing
# crop = 1
# crop_width = 320
# crop_height = 240
# crop_x = 20
# crop_y = 20
#
# scaling is applied after cropping, so you can
# remove borders then stretch up the result
# scale = 1
# scale_width = 640
# scale_height = 480
#
# Flip the image horizontally or vertically.
# Horizontal flipping is useful for some Philips cams
# which give a mirrored image when used with the pwc module.
# flip_horizontal = 1
# flip_vertical = 1
#
# Change the orientation of the image.
# Useful if your camera is on its side (for whatever reason).
# 1 rotates clockwise by 90 degrees, 2, rotates clockwise by 180 degrees, 
# 3 rotates clockwise by 270 degrees.
# orientation = 1;

########################################################
# PWC specific features (only for philps cams right now)

# framerate of cam capture, lower fps -> less grainy image, more chance or
# blurred motion
framerate = 5

# image settings (0-100)
colour = 50
brightness = 50
contrast = 50
hue = 50
whiteness = 50

# White balance mode
# can be "auto", "indoor", "outdoor", "fluorescent" or "manual"
pwc_wb_mode = auto
# if _mode is set to manual, these two controls affect the balance
# (0-100)
pwc_wb_red = 50
pwc_wb_blue = 50
########################################################

</pre>

== index.html ==
Kopioi tämä tiedostoksi index.html palvelimelle ylläluotuun cam-kansioon
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>OmaKamera</title>
		<link rel="stylesheet" href="style.css">
	</head>

	<body onload='refreshcam();'>
		<div id="page">
			<div id="upper">
				<img id="feed" src="webcam.jpg" alt="live feed" style="width:640px; height: 480;">

				<p>Minun Oma Weppikamera.
				</p>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="cam.js"></script>
</html>
</pre>

== cam.js ==
Kopioi tämä tiedostoksi cam.js palvelimelle ylläluotuun cam-kansioon
<pre>
var refreshrate = 2000;
var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);
var loadingimage = new Image();
var e = kGetElement('feed');

function kGetElement(id) {
	if (ns4) return document.layers[id];
	else if (ie4) return document.all[id];
	else if (ie5 || ns6) return document.getElementById(id);
	else return false;
}

function loaded() {
	if (!e) e = kGetElement('feed');
	if (e) e.src = this.src;
}

function refreshcam() {
	if (loadingimage.complete || ie4 || ie5) {
		var now = new Date();
		loadingimage = new Image();
		loadingimage.onload = loaded;
		loadingimage.src = 'webcam.jpg?' + now.getTime();
	}
	setTimeout('refreshcam()', refreshrate);
}
</pre>

== style.css ==
Kopioi tämä tiedostoksi style.css palvelimelle ylläluotuun cam-kansioon
<pre>
body {
	background-color: #1e1e1e;
	color: #E0E0E0;
	text-align: center;
	font-family: verdana;
	font-size: 11px;
	padding: 0px;
	margin: 12px;
}

h1 {
	font-size: 30px;
}

a {
	color: #3551FB;
	text-decoration: none;
	background-color: transparent;
}

a:hover {
	color: #5671FC;
	text-decoration: underline;
	background-color: transparent;
}

#page {
	margin: auto;
	background-color: black;
	width: 660px;
	height: 570px;
	border: 1px solid #353535;
	text-align: center;
}

#upper {
	width: 800px;
	margin: auto;
	margin-top:10px;
	margin-left:10px;
	margin-right:10px;
	text-align: left;
	padding-top: 0px;
}
</pre>
@@ Rivi 1: / Rivi 1: @@
-{{Historiallinen}}
+Web-kameran kuvan saaminen esim. kotisivulleen näkyviin on paljon helpompaa kuin voisi luulla. Tässä ohjeessa Linux-kone ottaa kuvan ja lähettää sen FTP:llä jollekin www-palvelimelle. Mukana on myös html, css ja js-tiedostot palvelimelle kuvan näyttämistä ja automaattista päivittämistä varten. Homma sujuu näin:
-[[Web-kamera]]n kuvan saaminen www-sivulle on paljon helpompaa kuin voisi luulla. Tässä ohjeessa Linux-kone ottaa kuvan ja lähettää sen FTP:llä jollekin www-palvelimelle. Homma sujuu näin:
-'''HUOM! CAME on ilmeisesti kadonnut verkosta eikä ole tarjolla esim. Ubuntun pakettivarastoissa.'''
+== Ohjeet ==
+# laita [[Web-kamera|web-kamerasi]] käyttökuntoon
+# asenna camE. Löytynee jakeluversiosi pakettivarastoista tms tai [http://linuxbrit.co.uk/camE/|ohjelman kotisivuilta] lähdekoodimuodossa.
+# kopioi alla esitetty .camErc -asetustiedosto kotikansioosi ja muokkaa sen asetukset sopiviksi itsellesi kommenttien opastamalla tavalla
+# luo palvelimelle kansio johon kuva tullaan julkaisemaan, esimerkiksi nimellä cam
+# luo palvelimelle ftp-tunnus camEa varten
+# kopioi index.html, cam.js sekä style.css palvelimen cam-kansioon
+# käynnistä camE komennolla camE. Se menee taustalle ja täytyy lopettaa tappamalla prosessi. Jos et halua sen menevän taustalle, käynnistä komennolla camE -f
-* Laita web-kamerasi käyttökuntoon.
+== .camErc -asetustiedosto ==
-* Asenna camE. Löytynee jakelusi [[paketinhallinta|paketinhallinnasta]] tai [http://linuxbrit.co.uk/camE/ ohjelman kotisivuilta] [[lähdekoodi]]muodossa.
+Kopioi tämä tiedostoksi .camErc kotikansioosi
-* Kopioi alla esitetty .camErc -asetustiedosto kotihakemistoosi ja muokkaa sen asetukset itsellesi sopiviksi kommenttien opastamalla tavalla.
-* Luo palvelimelle esimerkiksi cam-niminen hakemisto kuvan julkaisua varten.
-* Luo palvelimelle ftp-tunnus camE:a varten.
-* Käynnistä camE komennolla <tt>camE</tt>. CamE menee automaattisesti taustalle ja täytyy lopettaa [[kill|tappamalla]] prosessi. Jos et halua sen menevän taustalle, käynnistä ohjelma komennolla <tt>camE -f</tt>.
-* Nyt palvelimelle ilmestyy kuvatiedosto jota päivitetään camErc:ssä määritellyin aikavälein.
-== .camErc-asetustiedosto ==
-Kopioi seuraava [[asetustiedosto]] nimellä .camErc kotihakemistoosi.
 <pre>
-#nämä asetukset ottavat kuvan kerran sekunnissa
+#nämä asetukset ottavat kuvan kerran sekunnissa, lähettävät sen ftp:llä palvelimelle kansioon cam sekä tallentaa joka 100. kuvan paikallisen koneen kansioon /var/www/cam/archive
-#kuva lähetetään ftp:llä www-palvelimelle kansioon cam
-#joka 100. kuva tallennetaan paikallisen koneen kansioon /var/www/cam/archive
-#tarkasta erityisesti yhteysasetukset, tallennuskansiot sekä fonttien kansio!
 [ftp]
-#ftp-tilin tiedot
 host = ftp.domain.fi
 user = kamera
 pass = salasana
-#kansio ftp-palvelimella johon kuvat ladataan.
-#Jos ftp ottaa yhteyden hakemistoon public_html, tulee cam-hakemiston olla tämän alla.
 dir  = cam
-# Tiedoston nimi ja tyyppi (jpg tai png)
+# where should the file end up? Also, this extension determines the file
-# tiedostonnimi.jpg tai tiedostonnimi.png
+# type the image is saved as. Try image.png for a png.
 file = webcam.jpg
-# tilapäistiedosto, joka luodaan ja vasta sitten siirretään verkkoon.
+# camE uploads to a temp file, and moves it across when done
-# näin käyttäjät näkevät vain ehjiä kuvia
+# this way people don't view half-uploaded images
 tmp  = uploading.jpg
-# pidetänkö yhteys avoinna (1) vai avataanko uusi joka kerta (0)
+# keep the connection open (1) or reopen it for each shot (0)
 keepalive = 0
-# passiivinen ftp (1/0)
+# do passive ftp?
 passive = 0
-# aktiivista ftp-yhteyttä käytettäessä käytettävä käyttöliittymä
+#an interface to use for non-passive ftp.  use "-" to let libcurl choose, or
-# oletusarvo "-" on hyvä (libcurl tekee päätöksen)
+#use a real interface name.  (libcurl often chooses incorrectly)
 interface = -
-# ftp-viestien tulostaminen (paljon tavaraa!) (1/0)
+# ftp debugging? (noisy)
-debug = 0
+debug = 1
-# Lähetä kuvat? Jos do=0, ottaa ja arkistoi, muttei lähetä verkkoon.
+# Actually do the upload? If do = 0, just take and archive pics.
 do = 1
-# Jotkin serverit vaativat vanhan tiedoston poiston ennen uuden lisäämistä.
+# Some servers require us to explicitly delete the previous image
-# 1 = poista ennen lisäystä, 0=lisää päälle
+# In that case, enable this option
 delete_first = 0
-# Kuinka monta kuvaa otetaan ennen lähetystä?
+# Determines how many shots are taken before an image is uploaded.
-# (1 == jokainen kuva lähetetään, 10 lähettäisi joka 10. kuvan)
+# (1 == every picture is uploaded, 10 would be every 10th image)
-# (jos ei asetettu, lähettää jokaisen kuvan)
+# (Defaults to 1 if not present)
 upload_every = 1
 [scp]
-# Määrittämällä do=0 ja aktivoimalla allaolevan targetin, kuvat lähetetään [[scp]]:n yli.
+# you can set ftp->do to 0 above and use scp instead - you still need
-# scp käyttää yllä määriteltyjä asetuksia dir, file, tmp, upload_every setting, joiden tulee olla määritellyt
+# the dir, file and tmp settings in the ftp section for this to work.
+# scp also honors the upload_every setting from the ftp section, and
+# will also default to a value of 1 if not present.
 #target = user@ssh.domain.fi
 [grab]
-#videolaitteen tunnus
 device = /dev/video0
-# tilapäistiedoston nimi paikalliskoneella
+# store temp image on local machine
 temp_file = /tmp/webcam.jpg
-# Viiveen vähennys. Ota 5 kuvaa, hylkää 4 ekaa siivoten näin mmap puskureita
+# lag reduction, takes 5 shots, discards the first 4, thus clearing mmap
+# buffers
 lag_reduce = 5
-# Kuvan vasempaan alreunaan tuleva viesti jonka perään 'infofile'ssä määritelyt viesti liitetään
+# This goes at the bottom left, with the message from "infofile" appended.
-# Päivämäärä määritellään strftimen avulla, esimerkiksi %d/%m/%Y %H:%M:%S %Z
+# It is run through strftime, so date vars are expanded.
 text   = %d/%m/%Y %H:%M:%S %Z
-#Kuvan koko
 width  = 352
 height = 288
-#viive kuvien ottamisen välillä
+# delay between uploading one shot and starting the next
 delay  = 2
-# Korjataanko viivettä hitailla yhteyksillä
+# do we want to correct the delay for a slow connect?
-#(pitää peräkkäiset päivitykset järjestyksessä)
+# (keeps the perpetually updating clients in sync)
 correct = 1
-# Skaalataanko kuvaa kaistan leveyden mukaan?
+# scale image resolution dynamically based on bandwidth?
-# Kuvan lähettämiseen kuluvan viiveen osuus
+# percentage of the delay to spend uploading the image,
-# 100 pois päältä, hyviä arvoja ovat alle 40
+# 100 disables, useful values are < 40
 percent = 100
-# Mihin logi kirjoitetaan? Jos rivi kommentoitu, logia ei tehdä.
+# where to log activity. comment out this line to disable logging
 logfile = /home/user/Temp/.camlog
-# Viestiteksti noudetan täältä. Vain yksi rivi sallittu!
+# gets the message text from here. one line allowed only. means you can do
-# Näinollen onnistuu esimerkiksi komento echo "surffaan verkossa" > ~/.caminfo
+# stuff like echo "sleeping and stuff" > ~/.caminfo
 #infofile = /home/user/.caminfo
-# Mihin arkistokuvat tallennetaan? Arkistokuviin isketään päivämääräleima.
+# directory to archive pics in. They are datestamped and saved in here.
 archive = /var/www/cam/archive
-# Arkistoidaanko kuvat päivämäärän mukaisiin alihakemistoihin?
+# archive pics in datestamped subdirs
-# (1 == alihakemistoihin, 0 == yhteen hakemistoon)
+# (1 == with subdirs, 0 == without subdirs)
 archive_subdirs = 0
-# Arkistoitujen kuvien tyyppi (jpg/png)
+# extension (determines type) of archived images.
 archive_ext = jpg
 # determines how many shots are taken before a pic is archived
 # (1 == every pic, 0 == don't archive)
 archive_shot_every = 100
-# Pienennettyjen kuvien tallennushakemisto, tehdäänkö pikkukuvat (1/0)
+# create archive thumbnails enable/disable flag and give width/height
-# ja pikkukuvien koko (leveys ja korkeus)
 archive_thumbnails_dir    = /opt/images/webcam/thumbnails
 archive_thumbnails_create = 0
@@ Rivi 127: / Rivi 117: @@
 archive_thumbnails_height = 90
-# jpeg-kuvien laatu
+# jpeg quality (you can save as png etc too, but then quality does squat)
 quality = 85
 input  = 0
-# 0=PAL, 1=NTSC
+# 0 for PAL, 1 for NTSC
 norm   = 0
-# Kuvan oikeaan yläkulmaan tuleva otsikkoteksti
+# Goes in the top right. strftime() is run on this too, so put date stuff in
+# if you like
 title_text = Weppikamera
-# Otsikkotekstin väri ja läpinäkyvyys
+# color/transparency of title text
 title_r = 255
 title_g = 255
@@ Rivi 143: / Rivi 134: @@
 title_a = 255
-# Kirjasinlaji ja koko
+# font for title text. fontname/size
 title_font = arial/8
-# Erillinen kirjasintyyppi
+# fancy font styles
 # title_style = /path/to/title.style
-# Tekstin väri
+# color/transparency of message text
 text_r = 255
 text_g = 255
@@ Rivi 154: / Rivi 145: @@
 text_a = 255
-# Tekstin kirjasinlaji ja koko
+# font for message text. fontname/size
 text_font = arial/8
@@ Rivi 166: / Rivi 157: @@
 bg_a = 100
-# Hakemisto, josta etsitään ttf-kirjasimia
+# directory to look for ttf fonts in
 ttf_dir = /usr/share/fonts/truetype/msttcorefonts
-# Jos tämä tiedosto on olemassa, kuvaa ei oteta
+# file to check for before shooting. while this file exists, no shots will be taken.
 blockfile = /home/user/BLOCKCAM
-# Jos em. tiedosto löytyy, tallennetaan kuva tiedostoon
+# image to upload when blockfile is first put in place
 # offline_image = /home/gilbertt/.block.jpg
-# Jos tämä tiedosto löytyy, otetaan kuva mutta ei lähetetä sitä verkkoon
+# File to check before shotting, while this file exists, shots will be taken.
+# but not uploaded. blockimage will not be uploaded if you set this.
 uploadblockfile = /home/user/BLOCKUPLOAD
-# Otetaan kuvia vain, jos seuraava verkkolaite on käytettävissä
+# Shots will only be taken/uploaded if the specified interface is active.
 #watch_interface = ppp0
@@ Rivi 216: / Rivi 208: @@
 ########################################################
-# Philipsin kameroiden knassa toimivia asetuksia
+# PWC specific features (only for philps cams right now)
-# Taajuus (kuvaa sekunnissa)
+# framerate of cam capture, lower fps -> less grainy image, more chance or
+# blurred motion
 framerate = 5
-# Kuvan asetukset (0-100)
+# image settings (0-100)
 colour = 50
 brightness = 50
@@ Rivi 228: / Rivi 221: @@
 whiteness = 50
-# Valkotasapaino, vaihtoehtoja
+# White balance mode
-# "auto" (automaattinen), "indoor" (sisätila), "outdoor" (ulkona), "fluorescent" ja "manual" (käsiasetukset)
+# can be "auto", "indoor", "outdoor", "fluorescent" or "manual"
 pwc_wb_mode = auto
-# Asetukset käsiasetuksia käytettäessä
+# if _mode is set to manual, these two controls affect the balance
 # (0-100)
 pwc_wb_red = 50
@@ Rivi 239: / Rivi 232: @@
 </pre>
-[[Luokka:Verkko]]
+== index.html ==
-[[Luokka:Laitteisto]]
+Kopioi tämä tiedostoksi index.html palvelimelle ylläluotuun cam-kansioon
-[[Luokka:Ohjeet]]
+<pre>
-{{Videoeditointi}}
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<?xml version="1.0" encoding="utf-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+	<head>
+		<title>OmaKamera</title>
+		<link rel="stylesheet" href="style.css">
+	</head>
+	<body onload='refreshcam();'>
+		<div id="page">
+			<div id="upper">
+				<img id="feed" src="webcam.jpg" alt="live feed" style="width:640px; height: 480;">
+				<p>Minun Oma Weppikamera.
+				</p>
+			</div>
+		</div>
+	</body>
+	<script type="text/javascript" src="cam.js"></script>
+</html>
+</pre>
+== cam.js ==
+Kopioi tämä tiedostoksi cam.js palvelimelle ylläluotuun cam-kansioon
+<pre>
+var refreshrate = 2000;
+var ns4 = (document.layers);
+var ie4 = (document.all && !document.getElementById);
+var ie5 = (document.all && document.getElementById);
+var ns6 = (!document.all && document.getElementById);
+var loadingimage = new Image();
+var e = kGetElement('feed');
+function kGetElement(id) {
+	if (ns4) return document.layers[id];
+	else if (ie4) return document.all[id];
+	else if (ie5 || ns6) return document.getElementById(id);
+	else return false;
+}
+function loaded() {
+	if (!e) e = kGetElement('feed');
+	if (e) e.src = this.src;
+}
+function refreshcam() {
+	if (loadingimage.complete || ie4 || ie5) {
+		var now = new Date();
+		loadingimage = new Image();
+		loadingimage.onload = loaded;
+		loadingimage.src = 'webcam.jpg?' + now.getTime();
+	}
+	setTimeout('refreshcam()', refreshrate);
+}
+</pre>
+== style.css ==
+Kopioi tämä tiedostoksi style.css palvelimelle ylläluotuun cam-kansioon
+<pre>
+body {
+	background-color: #1e1e1e;
+	color: #E0E0E0;
+	text-align: center;
+	font-family: verdana;
+	font-size: 11px;
+	padding: 0px;
+	margin: 12px;
+}
+h1 {
+	font-size: 30px;
+}
+a {
+	color: #3551FB;
+	text-decoration: none;
+	background-color: transparent;
+}
+a:hover {
+	color: #5671FC;
+	text-decoration: underline;
+	background-color: transparent;
+}
+#page {
+	margin: auto;
+	background-color: black;
+	width: 660px;
+	height: 570px;
+	border: 1px solid #353535;
+	text-align: center;
+}
+#upper {
+	width: 800px;
+	margin: auto;
+	margin-top:10px;
+	margin-left:10px;
+	margin-right:10px;
+	text-align: left;
+	padding-top: 0px;
+}
+</pre>