Učiteľský zbor História školy
Šk.rok 2017/2018 Šk.rok 2016/2017 Archív
Študijné odbory Učebné odbory
Všeobecné info Ponuka majetku OZ Mládež ŠkVP Rada školy Pracovné miesta Služby
Zmluvy/Faktúry Obstarávanie Správa o VVČ
Pre žiakov Pre učiteľov Súťaže Teória Prax GDM Prax MPS Prax ME Stavebné odbory PC múzeum Webcam Odkazy
Webkamera
 

   

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>&nbsp;</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