Ukážky - prenesený obraz z webkamery 1 a 2
Ako si urobiť vlastnú webkameru na stránky
Urobiť si vlastnú webkameru na stránke nie je zložité.
Budeme potrebovať tieto veci:
- webkamera alebo digitálny fotoaparát, ktorý podporuje
režim "webkamera"
- počítač pripojený na Internet
- vhodný softvér: WebcamFirst, Fwink, WebcamXP...atď.
- HTML kód (Java Script)
Webkamera
Dnes nie je ničím nezvyčajným mať webkameru alebo digitálny
fotoaparát. Ten musí podporovať režim webkamery - profesionálne a poloprofesionálne
fotoaparáty (digitálne zrkadlovky) tento mód nepodporujujú.
V našej škole požívame jednoduché webkamery FUN CAM -
parametre:
sensor size
1/7"
sensor type
color CMOS image sensor
pixel number
100/ 350 kpixels
apeture
f 2,4
focus lenght
3,6 mm
angle of view 54 degree
frame rate
15 fps@CIF/10 fps@VGA
image format RGB
min. illuminace 12 lux
S/N ratio
30 dB
interface type USB
1.0/1.1/2.0
Kamera je určená pre platformu Windows 98/SE/200/Me/XP,
ale bez problémov pracuje aj v OS Linux.
Cez USB kábel pripojíme k PC a nainštalujeme príslušný
ovládač.
Počítač pripojený na Internet
Nie je potrebné ani rýchle pripojenie, skôr treba počítať
s tým aby išlo o permanentné pripojenie. Čiže dial-up by rýchlosťou
postačoval, je však spoplatňovaný od dĺžky pripojenia a to nie je veĺmi výhodné.
Takže GPRS, EDGE, DSL a pod.
Vhodného software
Takýchto programov je veľké množstvo. Väčšina je shareware.
Tu treba upozorniť na to, že počas celého prenosu obrázkov na web je FTP
pripojenie aktívne. Keďže väčšina z nás nie je autorom takéhoto programu,
nikde neviete, aké údaje program odosiela.
Jedným z freeware programov pod Windows je WebcamFirst
- freeware - , ktorý nájdete na http://www.webcamfirst.com/.
Po inštalácii treba nastaviť parametre FTP pripojenia (ftp server, prihlasovacie
meno, heslo, prípadne aj adresár) a prenášaných obrázkov (veľkosť, kvalitu,
efekty, vložené texty,...). Ako taký obrázok z webkamery vyzerá, môžete
hneď vidieť v programe.
Tiež je vynikajúci WebcamXP, ktorý je však shareware.
Je jednoduchší, ale dobrý program aj freeware Fwink.
Kód v stránke
Existuje viac riešení - ukažeme niekoľko príkladov od jednoduchších až
po zložité. Ideálne je načítavať thumbnail (malý náhľadový obrázok),
ktorý dáme do referenčného odkazu, ktorý otvorí nové okno s väčším obrázkom
a automatickým refreshom. Ako na to?
Takáto časť kódu môže vyzerať napríklad takto (pre správne
zobrazenie článku sú ostré zátvorky nahradené oblými):
<a href="http://www.mojastranka.sk/webcam.htm"
target="_blank">
<img src="http://www.mojastranka.sk/webcam/webcam_mini.jpg"
widht="118" height="88">
</a>
Ako možný príklad to poslúži. Obrázky z webkamery sú uploadované
do adresára "webcam". V bloku sa zobrazí malý, iba niekoľkokilobajtový
obrázok. Kliknutím naň sa otvorí nové okno prehliadača so súborom webcam.htm.
Ten môže vyzerať tako:
<HTML>
<HEAD>
<META HTTP-EQUIV="refresh" CONTENT="120">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<TITLE>WEBCAM - automatically
reloading every 120 sec</TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="http://www.mojastranka.sk/webcam/webcam.jpg"
WIDTH="640" HEIGHT="480">
</CENTER>
</BODY>
</HTML>
Je to vlastne maličký HTML súbor, ktorého obsah sa automaticky
načítava znovu a znovu. Zobrazuje veľký obrázok z webkamery. Kto chce,
môže doplniť ešte odpočítavací skript, ktorý bude informovať, kedy sa obsah
okna načíta opäť.
Keď chceme celú záležitoť riešiť "vymakane", tak môžeme
požiť aj Java Applet:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF"
text="#000000">
<p>
<APPLET code="JavaCam.class" codebase="http://www.mysite.com/java/"
width="320" height="240">
<PARAM name="url" value="http://www.mysite.com/java/camera.jpg">
<PARAM name="interval" value="20"></APPLET>
</p>
</body>
</html>
.... alebo jednoduchý JavaScript:
<html>
<head>
<script language=JavaScript>
tableau=new Array;
tableau[0]="Photo_h00.jpg";
tableau[1]="Photo_h01.jpg";
tableau[2]="Photo_h02.jpg";
tableau[3]="Photo_h03.jpg";
tableau[4]="Photo_h04.jpg";
tableau[5]="Photo_h05.jpg";
tableau[6]="Photo_h06.jpg";
tableau[7]="Photo_h07.jpg";
tableau[8]="Photo_h08.jpg";
tableau[9]="Photo_h09.jpg";
tableau[10]="Photo_h10.jpg";
tableau[11]="Photo_h11.jpg";
tableau[12]="Photo_h12.jpg";
tableau[13]="Photo_h13.jpg";
tableau[14]="Photo_h14.jpg";
tableau[15]="Photo_h15.jpg";
tableau[16]="Photo_h16.jpg";
tableau[17]="Photo_h17.jpg";
tableau[18]="Photo_h18.jpg";
tableau[19]="Photo_h19.jpg";
tableau[20]="Photo_h20.jpg";
tableau[21]="Photo_h21.jpg";
tableau[22]="Photo_h22.jpg";
tableau[23]="Photo_h23.jpg";
uneDate= new Date();
var index=uneDate.getHours(); //
index initialisation at the current hour
function plus(index)
{
document.image.src=tableau[index];
if(index==tableau.length-1)
{
index=0;
}
else
{
index++;
}
timerID=setTimeout("index=plus(index)",2000);
// 2 secondes between each picture
return index;
}
</script>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body onload="index=plus(index)"
>
<div align="center"><img
name="image" height=480 width=640>
</div>
<p> </p>
<p align="center"><img
src="Photo_h17.jpg" width="640" height="480"></p>
</body>
</html>
Ako vidíme, možností je dosť. Na začiatok však odporúčam
vyskúšať ten najjednoduchší HTML kód.
<<< Zaujímavosti
Webkamera