Scripten für Webcam-Seiten


Stand Juni 2006

Hier erfahren Sie, wie man einige Effekte bzw. Funktionen in eine Webcam-Seite integriert.



Eigenes Browserfenster

Das folgende Beispiel zeigt das Kamerabild in einem eigenen Browserfenster ohne Menü-, Symbol-, Scroll- und Statusleisten an. Der Browser muss JavaScript 1.1 unterstützen, was ab Internet Explorer 4.0 oder Netscape Navigator 3.0 der Fall ist. Ansonsten öffnet sich ein normales Browserfenster.

Beispiel

<html> <head> <title>Bildanzeige in eigenem Browserfenster</title> <script language="JavaScript"> <!-- function targetLink(URL) { if(document.images) targetWin = open(URL,"newWindow","width=400,height=450"); } //--> </script> </head> <body> <h1>Bildanzeige in eigenem Browserfenster</h1> <a href="javacam.htm" target="_blank" onClick="targetLink('javacam.htm');return false">Fenster oeffnen</a> </body> </html>

Beispiel anzeigen

Erläuterung

<script language="JavaScript">...</script>

Die Funktion ist für das Öffnen des neuen Browserfensters zuständig. Mit width und height können Sie die Größe des Fensters einstellen.

<a href="javacam.htm" target="_blank" onClick="targetLink('javacam.htm');return false">Fenster oeffnen</a>

Dieser Verweis ruft die Funktion zum Öffenen des Fensters auf. Der Name der HTML-Datei, die ins neue Browserfenster geladen wird - im Beispiel javacam.htm, ist zweimal zu ändern. Anstelle des Verweistextes kann auch ein Bild verwendet werden.


Online/Offline-Bilder

Mit diesem Script kann das Alter eines Kamerabildes bestimmt werden, um automatisch einen bestimmten Text und/oder ein Online- bzw. Offline-Bild anzuzeigen. Das Kamerabild muss auf Dateiebene verfügbar sein und daher auf dem selben Server liegen wie die Webseite. Der Webserver muss PHP unterstützen.

Beispiel

<html> <head> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> <title>Online/Offline-Bilder</title> </head> <body> <h1>Online/Offline-Bilder</h1> <img src="campic.jpg" width="320" height="240"> <?php $file = 'campic.jpg'; $maxage = 600; $ftime = filemtime($file); $time = time(); $age = $time - $ftime; if($age <= $maxage) { echo '<p><img src="online.gif" width="100" height="20">'; echo '<p>Das Bild wurde vor ' . $age . ' Sekunden hochgeladen und ist aktuell.'; echo '<p>Das Bild wurde vor ' . bcdiv($age,60,0) . ' Minuten und ' . bcmod($age,60) . ' Sekunden hochgeladen und ist aktuell.'; echo '<p>Das Bild wurde vor ' . bcdiv($age,3600,0) . ' Stunden, ' . bcdiv(bcmod($age,3600),60,0) . ' Minuten und ' . bcmod($age,60) . ' Sekunden hochgeladen und ist aktuell.'; } else { echo '<p><img src="offline.gif" width="100" height="20">'; echo '<p>Das Bild wurde vor ' . $age . ' Sekunden hochgeladen und ist nicht aktuell.'; echo '<p>Das Bild wurde vor ' . bcdiv($age,60,0) . ' Minuten und ' . bcmod($age,60) . ' Sekunden hochgeladen und ist nicht aktuell.'; echo '<p>Das Bild wurde vor ' . bcdiv($age,3600,0) . ' Stunden, ' . bcdiv(bcmod($age,3600),60,0) . ' Minuten und ' . bcmod($age,60) . ' Sekunden hochgeladen und ist nicht aktuell.'; } ?> </body> </html>

Beispiel anzeigen

Erläuterung

PHP-Anweisungen werden nur in Dateien mit der Endung .php interpretiert. Die Datei mit dem Script darf daher nicht mit den Endungen .htm oder .html gespeichert werden.

<meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache">

Die beiden Meta-Tags sollen veranlassen, dass die Seite von der Originaladresse und nicht aus einem Cache geladen wird.

$file = 'campic.jpg';

Der Dateiname des Bildes ist hier anzupassen.

$maxage = 600;

Hier wird die Zeitspanne in Sekunden definiert, nach der das Bild als veraltet gilt. Wählen Sie den Wert nicht zu gering.

echo '<p><img src="online.gif" width="100" height="20">'; echo '<p>Das Bild wurde vor ' . $age . ' Sekunden hochgeladen und ist aktuell.'; echo '<p>Das Bild wurde vor ' . bcdiv($age,60,0) . ' Minuten und ' . bcmod($age,60) . ' Sekunden hochgeladen und ist aktuell.'; echo '<p>Das Bild wurde vor ' . bcdiv($age,3600,0) . ' Stunden, ' . bcdiv(bcmod($age,3600),60,0) . ' Minuten und ' . bcmod($age,60) . ' Sekunden hochgeladen und ist aktuell.';

Wenn das Kamerabild jünger ist als vorgegeben, bekommt der Betrachter diesen mit echo eingefügten HTML-Code zu sehen. Der Name des Online-Bildes und dessen Größenangaben sind anzupassen. Zeilen die nicht benötigt werden können entfernt werden. Geben Sie bei Änderungen im Text besonders acht, damit es zu keinen Fehlern kommt.

echo '<p><img src="offline.gif" width="100" height="20">'; echo '<p>Das Bild wurde vor ' . $age . ' Sekunden hochgeladen und ist nicht aktuell.'; echo '<p>Das Bild wurde vor ' . bcdiv($age,60,0) . ' Minuten und ' . bcmod($age,60) . ' Sekunden hochgeladen und ist nicht aktuell.'; echo '<p>Das Bild wurde vor ' . bcdiv($age,3600,0) . ' Stunden, ' . bcdiv(bcmod($age,3600),60,0) . ' Minuten und ' . bcmod($age,60) . ' Sekunden hochgeladen und ist nicht aktuell.';

Falls das Bild älter als vorgegeben ist, wird der nach else stehenden Code angezeigt. Gehen Sie analog den obigen Angaben vor.


Zeitstempel

Dieses simple PHP-Script liest das Erstelldatum eines Bildes ein und gibt einen Zeitstempel aus. Das Kamerabild muss auf Dateiebene verfügbar sein und daher auf dem selben Server liegen wie die Webseite. Der Webserver muss PHP unterstützen.

Beispiel

<html> <head> <title>Zeitstempel anzeigen</title> </head> <body> <h1>Zeitstempel anzeigen</h1> <img src="campic.jpg" width="320" height="240"> <p> <?php $file = 'campic.jpg'; $time = filemtime($file); $timestr = date("d.m.Y, H:i:s", $time); ?> Letztes Update: <?php echo $timestr; ?> </body> </html>

Beispiel anzeigen

Erläuterung

PHP-Anweisungen werden nur in Dateien mit der Endung .php interpretiert. Die Datei mit dem Script darf daher nicht mit den Endungen .htm oder .html gespeichert werden.

$file = 'campic.jpg';

Der Dateiname des Bildes muss hier geändert werden. Die nächsten beiden Zeilen lesen das Datum der Bilddatei ein und formatieren es in ein gut lesbares Format. Abschließend wird der Zeitstempel mit echo ausgegeben. Der Zeitstempel muss natürlich nicht wie im Beispiel unter dem Bild stehen. Sie können ihn auch in einen DIV-Kontainer schreiben und diesen direkt auf dem Bild platzieren.


Kommentare | Besucher seit Januar 1998: 8989420

Valid XHTML 1.0! © 1998-2024 by Harald Gabler