Izrada WEB stranica
WEB stranice ovoga site-a izrađene su u HTML-u. Uz pomoć CSS-a malo smo uljepšali vizualni dojam. I to je to što se tiće samog designa.
Klient - server vezom na WEB server dobijamo sliku, a ne stream pa nam je zbog toga dovoljno da za prikaz slike sa kamere koristimo IMG tag (iliti značku po 'rvatski), i da taj frame stranice osvježavamo periodički svaku sekundu. Osvježavanje framea ostvaruje se ubacivanjem META taga u zaglavlje frame-a sa sadržajem http-equiv="refresh".
Na računalu s kamerom nalazi se cserver poslužitelj koji poslužuje klijente slikom s kamere. Sliku prima cclient koji se nalazi na WEB server računalu. Nakon poziva cclient ostvaruje konekciju s kamera-poslužiteljem i prima sliku koju preko buffera sprema na disk u datoteku img.jpg. Zatim se konekcija zatvara. Da bi se slika primala samo na zahtjev korisnika koji trenutno ima otvorenu starnicu, zajedno s osvježavanjem slike s kamere daje se i zahtjev za vezu kamera server-klient.
To čini PHP skripta "camera.php" :
<?php
<$cmd = './cclient';
<exec ($cmd);
?>
<html>
<head>
<title>Zammoda VS 2004</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta name="keywords" content="vieo nadzor, video, linux, webcam, zammoda">
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="refresh" content="1; url=camera.php">
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<img id="camera" src="img.jpg" alt="Camera wiev" width="352" height="288" align="middle">
</body>
</html>
|
OK. Imamo sliku. Sada još ostaje pitanje pomicanja markera kamere (žuta strelica). Pomicanje kamere lijevo ili desno vrši korisnik pritiskom na tipke "Turn LEFT" odn. "Turn RIGHT". Tipke su dio FORM taga html-a. Njihovim pritiskom forma predaje PHP-u argumente POST metodom.
Komunikacija s driverom koračnog motora vrši druga klijent-poslužitelj veza. Na računalu gdje je driver za step motor nalazi se i poslužitelj za motor mserver. Komunikaciju s poslužiteljem ostvarije PHP left_arrow.php koji se nalazi na WEB serveru. PHP ostvaruje konekciju svake sekunde i od motor-poslužitelja prima trenutnu poziciju kamere. Na osnovu tog podatka iscrtava strelicu na odgovarajuću poziciju. Ako se PHP-u prosljede argumenti formom (ako se pritisne tipka za pomak kamere) tada je PHP-u zadatak da ostvari konekciju, pošalje motor-posluzitelju zahtjev za pomak lijevo ili desno i zatim primi konačni polozaj kamere.
Motor - klijent ( "left_arrow.php" ) :
<?php
/////////////////////////////////////////////////////////////////////////////////////
/// Socket Client ////
/////////////////////////////////////////////////////////////////////////////////////
error_reporting(E_ALL);
/* Port */
$service_port = 3500;
/* IP adresa mservera */
$address = '161.53.64.29';
/* Create a TCP/IP socket. */
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
if ($socket < 0) {
echo "socket_create() failed: reason: " . socket_strerror($socket) . "\n";
} else {
// echo "OK.\n";
}
//echo "Attempting to connect to '$address' on port '$service_port'...";
$result = socket_connect($socket, $address, $service_port);
if ($result < 0) {
echo "socket_connect() failed.\nReason: ($result) " . socket_strerror($result) . "\n";
} else {
// echo "OK.\n";
}
$out = 'NPO'; //new page opened
//1. Slanje komande - Pomicanje kamere
if ( $_POST['turnLeft'] == "Turn LEFT" ) {
$out = 'LIJ';
} elseif ( $_POST['turnRight'] == "Turn RIGHT" ) {
$out = 'DES';
}
socket_write($socket, $out, 2);
//echo "OK.\n";
//printf("Poslao>> $out\n");
//2. Dobiveni podatak s mservera - trenutni polozaj kamere
$in = ord ( socket_read($socket, 1) );
if ( $in >= 245 ) $in = -(256 - $in);
//Proracun trenutnog polozaja kamere u pikselima
//Raspon od ±130px podjeljen na polozaje -10,-9,-8,...,-1,0,1,...,8,9,10
$polozaj = 130 / 10 * $in;
//printf("Primio>> $in\n");
//echo "Zatvaranje client-socket veze ...";
socket_close($socket);
//echo "OK.\n\n";
?>
<html>
<head>
<title>Zammoda VS 2004</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="refresh" content="1; url=left_arrow.php">
</head>
<body leftmargin="0" topmargin="0">
<?
print ("<img src=pics/camera_mark.gif style=\"position:relative; top:0px; left:".$polozaj."px\">");
?>
</body>
</html>
|
Prikaz videa s kamere, tj. slika sa kamere i pomicanje markera pozicije kamere, izvedeni su korištenjem raznih HTML trikova. U početku se to činilo jednostavnijim, no mnogo spretniji i zahvalniji način bio bi izrada jednog apleta, stoga ce to biti naš sljedeći korak.
|
