Bildeinbindung
Das Kamerabild auf die Webseite.

Es gibt mehrere Möglichkeiten um das Bild einer WebCam mit FTP-Upload in eine Webseite einzubinden und regelmäßig zu aktualisieren. Alle Varianten haben gewisse Vor- und Nachteile, die es abzuwägen gilt.

Bilder einer WebCam sollten einen Datum- und Zeitstempel aufweisen. Sie unterstreichen damit die Aktualität der Aufnahme. Ein kurzer Hinweis auf Aktualisierungsintervall und Betriebszeiten der Kamera ist ebenfalls nicht verkehrt.

[ Meta-Tag ] [ Java-Applet: JavaCam ] [ Java-Applet: AmberCam ] [ Java-Applet: AnfyCam ] [ Javascript und Counter ]

Meta-Tag

Bei dieser reinen HTML-Lösung erfolgt die Bildaktualisierung durch einen Meta-Tag im Dateikopf. Das Kamerabild wird wie eine normale Grafik eingebunden.

Vorteile:
JavaScripts, Java-Applets oder zusätzliche Plugins werden nicht benötigt.

Nachteile:
Bei der Aktualisierung wird die komplette Seite neu geladen, was besonders bei kurzen Intervallen störend wirkt. Es kommt unter Umständen zu Problemen mit Proxy-Servern.

Beispiel:
Fügen Sie den fett markierten Code in Ihre HTML-Seite ein.

<html>

<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="refresh" content="60">
<title>Bildaktualisierung durch Meta-Tag</title>
</head>

<body>
<center>
<h1>Bildaktualisierung durch Meta-Tag</h1>
<img src="campic.jpg" width="320" height="240">
</center>
</body>

</html>

Beispiel ansehen

Erläuterung:

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

Diese beiden Zeilen sollen veranlassen, daß die Seite von der Originaladresse und nicht aus einem Cache geladen wird. Die Server mancher Provider ignorieren diese Meta-Tags. Statt dem neuen Bild wird ein altes aus dem Cache geladen.

<meta http-equiv="refresh" content="60">

Dieser Meta-Tag ist für die Aktualisierung zuständig. Bei content ist die Anzahl der Sekunden anzugeben, nach der die Seite neu geladen werden soll.

<img src="campic.jpg" width="320" heigth="240">

Der Dateiname des Bildes und die Größenangaben sind anzupassen.

Java-Applet: JavaCam

Diese Variante basiert auf dem Java-Applet von Webcam32. Das Applet lädt die Bilddatei und aktualisiert sie in regelmäßigen Abständen.

Vorteile:
Es wird nur das Bild aktualisiert. Dadurch wirkt die Webseite professioneller.

Nachteile:
Der Browser muß Java unterstützen und diese Funktion darf nicht deaktiviert sein.

Installation:
Klicken Sie auf den Verweis, um die Datei javacam.zip auf Ihrem Rechner zu speichern. Entpacken Sie die Zip-Datei mit einem Entpacker, der lange Dateinamen unterstützt und laden Sie die Datei JavaCam.class per FTP im Binär-Modus auf Ihren Server. Die Groß- und Kleinschreibung des Dateinamen darf dabei nicht verändert werden. Das Applet muß sich im selben Verzeichnis wie die aufrufende HTML-Datei befinden. Die Bilddatei muß auf dem selben Server wie das Applet liegen.

Beispiel:
Fügen Sie den fett markierten Code in Ihre HTML-Seite ein.

<html>

<head>
<title>Bildaktualisierung durch Java-Applet: JavaCam</title>
</head>

<body>
<center>
<h1>Bildaktualisierung durch Java-Applet: JavaCam</h1>
<applet code="JavaCam.class" width="320" height="240">
<param name="url" value="http://www.domain.com/campic.jpg">
<param name="interval" value="60">
Verwenden Sie einen javafaehigen Browser!
</applet>
</center>
</body>

</html>

Beispiel ansehen

Erläuterung:

<applet code="JavaCam.class" width="320" height="240">

Die Breite und Höhe des Bildes ist mit width und height anzupassen. Bei code darf nichts verändert werden!

<param name="url" value="http://www.domain.com/campic.jpg">

Dieser Parameter verweist auf die komplette Webadresse (URL) des Bildes.

<param name="interval" value="60">

Bei value wird die gewünschte Anzahl von Sekunden angegeben, nach der das Kamerabild aktualisiert werden soll.

Java-Applet: AmberCam

Das Java-Applet von Castle Amber lädt die Bilddatei, vergrößert sie auf 200 Prozent und aktualisiert sie in regelmäßigen Abständen. Das Bild wird bei der Vergrößerung leicht weichgezeichnet.

Vorteile:
Nur das Bild wird aktualisiert, wodurch die Webseite professioneller wirkt. Das Applet vergrößert das Bild auf 200 Prozent, die zu übertragende Datei bleibt klein.

Nachteile:
Der Browser muß Java unterstützen und diese Funktion darf nicht deaktiviert sein. Durch die Vergrößerung verliert das Bild an Qualität.

Installation:
Klicken Sie auf den Verweis, um auf die Download-Seite von AmberCam zu gelangen. Entpacken Sie die Zip-Datei mit einem Entpacker, der lange Dateinamen unterstützt und laden Sie die Datei AmberCam.class per FTP im Binär-Modus auf Ihren Server. Die Groß- und Kleinschreibung des Dateinamen darf dabei nicht verändert werden. Das Applet muß sich im selben Verzeichnis wie die aufrufende HTML-Datei befinden. Die Bilddatei muß auf dem selben Server wie das Applet liegen.

Beispiel:
Fügen Sie den fett markierten Code in Ihre HTML-Seite ein.

<html>

<head>
<title>Bildaktualisierung durch Java-Applet: AmberCam</title>
</head>

<body>
<center>
<h1>Bildaktualisierung durch Java-Applet: AmberCam</h1>
<applet code="AmberCam.class" width="640" height="480">
<param name="copyright" value="(c) Castle Amber, 1998 http://www.castleamber.com/">
<param name="url" value="http://www.domain.com/campic.jpg?">
<param name="refresh" value="60">
Verwenden Sie einen javafaehigen Browser!
</applet>
</center>
</body>

</html>

Beispiel ansehen

Erläuterung:

<applet code="AmberCam.class" width="640" height="480">

Die Breite und Höhe des Applets ist mit width und height anzupassen. Da das Bild auf 200 Prozent vergrößert wird, sind hier die doppelten Abmessungen des Bildes anzugeben. Bei code darf nichts verändert werden!

<param name="url" value="http://www.domain.com/campic.jpg?">

Dieser Parameter verweist auf die komplette Webadresse (URL) des Bildes. Am Ende der URL muß ein Fragenzeichen angehängt werden.

<param name="refresh" value="60">

Bei value wird die gewünschte Anzahl von Sekunden angegeben, nach der das Kamerabild aktualisiert werden soll.

Java-Applet: AnfyCam

AnfyCam ist Teil der Java-Applet-Sammlung Anfy und ermöglicht einige Spezialeffekte bei der Einbindung bzw. Aktualisierung des Kamerabildes. Die 40 Applets der Sammlung sind Shareware, kosten USD 20,00 und dürfen auch ohne Registrierung verwendet werden. Ohne Registrierung öffnet sich ein Popup-Fenster, wenn das Applet online angeklickt wird.

Vorteile:
Da nur das Bild aktualisiert wird, wirkt die Webseite professioneller. Verschiedene Effekte wie Überblenden der Kamerabilder oder Einblenden eines Logos sind möglich.

Nachteile:
Der Browser muß Java unterstützen und diese Funktion darf nicht deaktiviert sein. Das vollständige Applet mit allen Funktionen ist kostenpflichtig.

Installation:
Klicken Sie auf den Verweis, um die Datei anfycam.zip auf Ihrem Rechner zu speichern. Entpacken Sie die Zip-Datei mit einem Entpacker, der lange Dateinamen unterstützt und laden Sie die Dateien anfycam.class, anfy.class und Lware.class per FTP im Binär-Modus auf Ihren Server. Die Groß- und Kleinschreibung der Dateinamen darf dabei nicht verändert werden. Die Applets müssen sich im selben Verzeichnis wie die aufrufende HTML-Datei befinden. Die Bilddatei muß auf dem selben Server wie die Applets liegen.

Beispiel:
Fügen Sie den fett markierten Code in Ihre HTML-Seite ein.

<html>

<head>
<title>Bildaktualisierung durch Java-Applet: AnfyCam</title>
</head>

<body>
<center>
<h1>Bildaktualisierung durch Java-Applet: AnfyCam</h1>
<applet code="anfycam.class" width="320" height="240">
<param name="credits" value="Applet by Fabio Ciucci (www.anfyjava.com)">
<param name="regcode" value="NO">
<param name="reglink" value="NO">
<param name="regnewframe" value="YES">
<param name="regframename" value="_blank">
<param name="url" value="campic.jpg">
<param name="res" value="1">
<param name="interval" value="60">
<param name="statusmsg" value="Cam applet">
<param name="fadespeed" value="32">
<param name="progressivefade" value="NO">
<param name="overimg" value="NO">
<param name="overimgX" value="0">
<param name="overimgY" value="0">
<param name="memdelay" value="1000">
<param name="priority" value="3">
<param name="MinSYNC" value="10">
Verwenden Sie einen javafaehigen Browser!
</applet>
</center>
</body>

</html>

Beispiel ansehen

Erläuterung:

1. Applet

<applet code="anfycam.class" width="320" height="240">

Die Breite und Höhe des Bildes ist mit width und height anzupassen. Bei code darf nichts verändert werden!

2. Quellhinweis

<param name="credits" value="Applet by Fabio Ciucci (www.anfyjava.com)">

Dieser Parameter darf nicht verändert oder entfernt werden.

3. Registrierungsparameter (nur bei registrierter Version)

<param name="regcode" value="NO">

Falls vorhanden, wird hier der Registrierungcode eingegeben. Bei der Shareware-Version bleibt value="NO".

<param name="reglink" value="NO">

Eine URL, die nach einem Klick auf das Applet geöffnet wird. Bei der Shareware-Version bleibt value="NO". Ebenso bei der registrierten Version, wenn keine Weiterleitung erwünscht ist.

<param name="regnewframe" value="YES">

Dieser Parameter gibt an, ob der Verweis in einem anderen Frame geöffnet werden soll. Mögliche Werte sind YES oder NO.

<param name="regframename" value="_blank">

Das Verweisziel, falls der vorherige Parameter regnewframe auf YES gesetzt wurde. Möglich sind _blank, _top, _self, _parent oder ein eigener Name.

4. Bildeinstellungen

<param name="url" value="campic.jpg">

URL oder Pfad und Name des Kamerabildes. Sowohl relative als auch absolute Pfadangaben sind erlaubt.

<param name="res" value="1">

Der Zoomfaktor von 1-8, wobei 1 der Originalgröße entspricht. Die Bildqualität wird bei höheren Werten stark verschlechtert.

<param name="interval" value="60">

Die gewünschte Anzahl von Sekunden, nach der das Kamerabild aktualisiert werden soll.

<param name="statusmsg" value="Cam applet">

Der Text in der Statuszeile, wenn sich der Mauszeiger über dem Applet befindet.

5. Bildüberblendung

<param name="fadespeed" value="32">

Dieser Parameter regelt die Geschwindigkeit, mit der ein neues Bild eingeblendet wird. Mögliche Werte sind 1-255, wobei 255 das Bild am schnellsten ersetzt.

<param name="progressivefade" value="NO">

Bei NO wird das neue Bild gleichmäßig eingeblendet, YES erzeugt abwechselnde Effekte.

6. Logoeinblendung

<param name="overimg" value="NO">

URL oder Pfad und Name eines GIF-Bildes, das über dem Kamerabild eingeblendet wird. Sowohl relative als auch absolute Pfadangaben sind erlaubt. NO schaltet die Funktion aus. Transparente GIF-Bilder werden unterstützt. Animierte GIF-Bilder benötigen den Internet Explorer oder Netscape Navigator ab Version 4.0.

<param name="overimgX" value="0">

Horizontale Positionierung des Logos.

<param name="overimgY" value="0">

Vertikale Positionierung des Logos.

7. Kompatibilitätsparameter

<param name="memdelay" value="1000">
<param name="priority" value="3">
<param name="MinSYNC" value="10">

Diese drei Parameter bleiben in der Regel unverändert. Lesen Sie dazu die Datei faq.html aus dem ZIP-Archiv.

JavaScript und Counter

Bei dieser Lösung übernimmt ein JavaScript die Aktualisierung der Seite. Zusätzlich zeigt ein Counter dem Besucher an, wann das Bild das nächste Mal neu geladen wird.

Vorteile:
Es müssen keine Applets oder Plugins geladen werden. Nur das Kamerabild wird neu geladen. Durch den Counter wird die Wartezeit für den Betrachter subjektiv verkürzt, da sich auf der Seite etwas tut, und er den Ablauf mitverfolgen kann.

Nachteile:
Der Browser muß JavaScript 1.1 unterstützen und diese Funktion darf nicht deaktiviert sein.

Beispiel:
Fügen Sie den fett markierten Code in Ihre HTML-Seite ein.

<html>

<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<title>Bildaktualisierung durch JavaScript und Counter</title>
<script language="JavaScript">
<!--
if (document.images) var refInterval = 0;
else var refInterval = 60;
function startCounter()
{
refInterval = refInterval - 1;
var now = new Date();
var dummystring = parseInt(now.getTime() / 1000);
if (refInterval < 1)
{
if (document.images) document.refImage.src = "campic.jpg" + "?" + dummystring;
else window.location.reload();
refInterval = 60;
}
document.counter.time.value = refInterval;
timerID = setTimeout("startCounter()", 1000);
}
//-->
</script>
</head>

<body onload="startCounter()">
<center>
<h1>Bildaktualisierung durch JavaScript und Counter</h1>
<img src="campic.jpg" name="refImage" width="320" height="240">
<form name="counter">Das Bild wird in <input type="text" name="time" size="2" value="-"> Sekunden aktualisiert.</form>
</center>
</body>

</html>

Beispiel ansehen

Erläuterung:

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

Diese beiden Zeilen sollen veranlassen, daß die Seite von der Originaladresse und nicht aus einem Cache geladen wird. Benötigt werden sie nur bei Browsern, die das JavaScript-Objekt document.images nicht kennen.

<script language="JavaScript">...</script>
...
else var refInterval = 60;
...
document.refImage.src = "campic.jpg" + "?" + dummystring;
...
refInterval = 60;
...
</script>

Dieser Bereich enthält das JavaScript für den Refresh. Drei Zeilen müssen hier angepaßt werden. campic.jpg ist durch den Dateinamen des Bildes zu ersetzen und zweimal ist statt 60 der gewünschte Aktualisierungsintervall in Sekunden anzugeben.

<body onload="startCounter()">

In den Body-Tag muß der Event-Handler onload wie im Beispiel eingefügt werden.

<img src="campic.jpg" name="refImage" width="320" height="240">

Der Dateiname des Bildes und die Größenangaben sind anzupassen.

<form name="counter">Das Bild wird in <input type="text" name="time" size="2" value="-"> Sekunden aktualisiert.</form>

Diese Zeile erzeugt ein Formularfeld mit der Anzeige des Counters. Der Text herum kann geändert werden. Für drei- oder mehrstellige Zahlen ist der Wert bei size entsprechend zu erhöhen.

Hinweis:
Falls kein Counter gewünscht wird, sind folgende zwei Zeilen zu löschen.

document.counter.time.value = refInterval;
<form name="counter">Das Bild wird in <input type="text" name="time" size="2" value="-"> Sekunden aktualisiert.</form>

Haben Sie noch Fragen oder Anregungen zum Thema dieser Seite? Wenden Sie sich an das WebCam-Forum.

Diese Seite ist Teil eines Framesets. Wenn Sie links kein Inhaltsverzeichnis sehen, klicken Sie hier: WebCam-Navigator