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
#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)
# tiedostonnimi.jpg tai tiedostonnimi.png
file = webcam.jpg

# tilapäistiedosto, joka luodaan ja vasta sitten siirretään verkkoon.
# näin käyttäjät näkevät vain ehjiä kuvia
tmp  = uploading.jpg

# pidetänkö yhteys avoinna (1) vai avataanko uusi joka kerta (0)
keepalive = 0

# passiivinen ftp (1/0)
passive = 0

# aktiivista ftp-yhteyttä käytettäessä käytettävä käyttöliittymä
# oletusarvo "-" on hyvä (libcurl tekee päätöksen)
interface = -

# ftp-viestien tulostaminen (paljon tavaraa!) (1/0)
debug = 0

# Lähetä kuvat? Jos do=0, ottaa ja arkistoi, muttei lähetä verkkoon.
do = 1

# Jotkin serverit vaativat vanhan tiedoston poiston ennen uuden lisäämistä.
# 1 = poista ennen lisäystä, 0=lisää päälle
delete_first = 0

# Kuinka monta kuvaa otetaan ennen lähetystä?
# (1 == jokainen kuva lähetetään, 10 lähettäisi joka 10. kuvan)
# (jos ei asetettu, lähettää jokaisen kuvan)
upload_every = 1

[scp]
# Määrittämällä do=0 ja aktivoimalla allaolevan targetin, kuvat lähetetään [[scp]]:n yli.
# scp käyttää yllä määriteltyjä asetuksia dir, file, tmp, upload_every setting, joiden tulee olla määritellyt
#target = user@ssh.domain.fi

[grab]
#videolaitteen tunnus
device = /dev/video0

# tilapäistiedoston nimi paikalliskoneella
temp_file = /tmp/webcam.jpg

# Viiveen vähennys. Ota 5 kuvaa, hylkää 4 ekaa siivoten näin mmap puskureita
lag_reduce = 5

# Kuvan vasempaan alreunaan tuleva viesti jonka perään 'infofile'ssä määritelyt viesti liitetään
# Päivämäärä määritellään strftimen avulla, esimerkiksi %d/%m/%Y %H:%M:%S %Z
text   = %d/%m/%Y %H:%M:%S %Z

#Kuvan koko 
width  = 352
height = 288

#viive kuvien ottamisen välillä
delay  = 2

# Korjataanko viivettä hitailla yhteyksillä
#(pitää peräkkäiset päivitykset järjestyksessä)
correct = 1

# Skaalataanko kuvaa kaistan leveyden mukaan?
# Kuvan lähettämiseen kuluvan viiveen osuus
# 100 pois päältä, hyviä arvoja ovat alle 40
percent = 100

# Mihin logi kirjoitetaan? Jos rivi kommentoitu, logia ei tehdä.
logfile = /home/user/Temp/.camlog

# Viestiteksti noudetan täältä. Vain yksi rivi sallittu!
# Näinollen onnistuu esimerkiksi komento echo "surffaan verkossa" > ~/.caminfo 
#infofile = /home/user/.caminfo

# Mihin arkistokuvat tallennetaan? Arkistokuviin isketään päivämääräleima.
archive = /var/www/cam/archive

# Arkistoidaanko kuvat päivämäärän mukaisiin alihakemistoihin?
# (1 == alihakemistoihin, 0 == yhteen hakemistoon)
archive_subdirs = 0

# Arkistoitujen kuvien tyyppi (jpg/png)
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)
# ja pikkukuvien koko (leveys ja korkeus)
archive_thumbnails_dir    = /opt/images/webcam/thumbnails
archive_thumbnails_create = 0
archive_thumbnails_width  = 120
archive_thumbnails_height = 90

# jpeg-kuvien laatu
quality = 85
input  = 0

# 0=PAL, 1=NTSC
norm   = 0

# Kuvan oikeaan yläkulmaan tuleva otsikkoteksti
title_text = Weppikamera

# Otsikkotekstin väri ja läpinäkyvyys
title_r = 255
title_g = 255
title_b = 0
title_a = 255

# Kirjasinlaji ja koko
title_font = arial/8

# Erillinen kirjasintyyppi
# title_style = /path/to/title.style
# Tekstin väri
text_r = 255
text_g = 255
text_b = 0
text_a = 255

# Tekstin kirjasinlaji ja koko
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

# Hakemisto, josta etsitään ttf-kirjasimia
ttf_dir = /usr/share/fonts/truetype/msttcorefonts

# Jos tämä tiedosto on olemassa, kuvaa ei oteta
blockfile = /home/user/BLOCKCAM

# Jos em. tiedosto löytyy, tallennetaan kuva tiedostoon
# offline_image = /home/gilbertt/.block.jpg

# Jos tämä tiedosto löytyy, otetaan kuva mutta ei lähetetä sitä verkkoon
uploadblockfile = /home/user/BLOCKUPLOAD

# Otetaan kuvia vain, jos seuraava verkkolaite on käytettävissä 
#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;

########################################################
# Philipsin kameroiden knassa toimivia asetuksia

# Taajuus (kuvaa sekunnissa)
framerate = 5

# Kuvan asetukset (0-100)
colour = 50
brightness = 50
contrast = 50
hue = 50
whiteness = 50

# Valkotasapaino, vaihtoehtoja
# "auto" (automaattinen), "indoor" (sisätila), "outdoor" (ulkona), "fluorescent" ja "manual" (käsiasetukset)
pwc_wb_mode = auto
# Asetukset käsiasetuksia käytettäessä
# (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>

[[Luokka:Verkko]]
[[Luokka:Laitteisto]]