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

1. laita web-kamerasi käyttökuntoon
2. asenna camE. Löytynee jakeluversiosi pakettivarastoista tms tai kotisivuilta lähdekoodimuodossa.
3. kopioi alla esitetty .camErc -asetustiedosto kotikansioosi ja muokkaa sen asetukset sopiviksi itsellesi kommenttien opastamalla tavalla
4. luo palvelimelle kansio johon kuva tullaan julkaisemaan, esimerkiksi nimellä cam
5. luo palvelimelle ftp-tunnus camEa varten
6. kopioi index.html, cam.js sekä style.css palvelimen cam-kansioon
7. 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

#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]
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
########################################################

index.html

Kopioi tämä tiedostoksi index.html palvelimelle ylläluotuun cam-kansioon

<!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>

cam.js

Kopioi tämä tiedostoksi cam.js palvelimelle ylläluotuun cam-kansioon

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);
}

style.css

Kopioi tämä tiedostoksi style.css palvelimelle ylläluotuun cam-kansioon

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;
}