BildaktualisierungDie klassische Art der Bildübertragung bei Webcams ist der FTP-Upload. Ein Bild wird in mehr oder weniger kurzen Abständen auf den Webserver hochgeladen und über eine Webseite angezeigt. Ein Betrachter müsste nun regelmäßig die Seite in seinem Browser aktualisieren, damit er immer das neueste Bild sieht. Die folgenden Lösungen nehmen ihm diese Arbeit ab.
Bei dieser reinen HTML-Lösung erfolgt die Bildaktualisierung durch einen Meta-Tag im Dateikopf. Das Kamerabild wird wie eine normale Grafik eingebunden. JavaScripts, Java-Applets oder zusätzliche Plugins werden nicht benötigt. 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, sodass alte Bilder geladen werden.
<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> <h1>Bildaktualisierung durch Meta-Tag</h1> <img src="campic.jpg" width="320" height="240"> </body> </html>
Beispiel anzeigen (Das Beispielbild wird nicht aktualisert. Die Seite lädt alle 15 Sekunden das gleiche Bild.)
<meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache">
Diese beiden Zeilen sollen veranlassen, dass 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. Das Attribut content enthält die Anzahl der Sekunden, nach der die Seite neu geladen wird.
<img src="campic.jpg" width="320" heigth="240">
Der Dateiname des Bildes und die Größenangaben sind anzupassen.
Bei dieser Lösung übernimmt ein JavaScript die Aktualisierung der Seite. Zusätzlich zeigt ein Counter dem Besucher an, wann das Bild neu geladen wird. Das Script ist auch für ältere Browser geeignet.
<html> <head> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> <title>Bildaktualisierung durch JavaScript</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()"> <h1>Bildaktualisierung durch JavaScript</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> </body> </html>
Beispiel anzeigen (Das Beispielbild wird nicht aktualisert. Die Seite lädt alle 15 Sekunden das gleiche Bild.)
<meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache">
Diese beiden Zeilen sollen veranlassen, dass 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 angepasst werden. Zweimal ist bei der Variable refInterval der gewünschte Aktualisierungsintervall in Sekunden anzugeben und einmal der Dateinamen des Bildes - ev. mit Pfad, wenn Seite und Bild in unterschiedlichen Verzeichnissen liegen - anzupassen.
<body onload="startCounter()">
In den Body-Tag muss der Event-Handler onload wie im Beispiel eingefügt werden.
<img src="campic.jpg" name="refImage" width="320" height="240">
Der Dateiname des Bildes - ev. mit Pfad, wenn Seite und Bild in unterschiedlichen Verzeichnissen liegen - 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 des Attributs size entsprechend zu erhöhen.
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>
Das Java-Applet lädt die Bilddatei und aktualisiert sie in regelmäßigen Abständen. Der Browser muss Java unterstützen.
Die Datei javacam.zip herunterladen, mit einem Entpacker, der lange Dateinamen unterstützt, entpacken und die im Archiv enthaltene Datei JavaCam.class per FTP im Binär-Modus auf den Webserver hochladen. Die Groß- und Kleinschreibung des Dateinamen darf nicht verändert werden. Das Applet muss sich im selben Verzeichnis wie die aufrufende HTML-Datei befinden, die Bilddatei muss auf dem selben Server wie das Applet liegen.
<html> <head> <title>Bildaktualisierung durch JavaCam</title> </head> <body> <h1>Bildaktualisierung durch 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> </body> </html>
Beispiel anzeigen (Das Beispielbild wird nicht aktualisert. Die Seite lädt alle 15 Sekunden das gleiche Bild.)
<applet code="JavaCam.class" width="320" height="240">
Die Breite und Höhe des Bildes ist anzupassen.
<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">
Dieser Parameter gibt die Anzahl der Sekunden an, nach der das Kamerabild aktualisiert wird.
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, wodurch sich der Qualitätverlust in Grenzen hält. Der Browser muss Java unterstützen.
AmberCam von der Downloadseite herunterladen, mit einem Entpacker, der lange Dateinamen unterstützt, entpacken und die im Archiv enthaltene Datei AmberCam.class per FTP im Binär-Modus auf den Webserver hochladen. Die Groß- und Kleinschreibung des Dateinamen darf nicht verändert werden. Das Applet muss sich im selben Verzeichnis wie die aufrufende HTML-Datei befinden, die Bilddatei muss auf dem selben Server wie das Applet liegen.
<html> <head> <title>Bildaktualisierung durch AmberCam</title> </head> <body> <h1>Bildaktualisierung durch 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.netcamera.org/public/wcn/example/campic.jpg?"> <param name="refresh" value="60"> Verwenden Sie einen javafaehigen Browser! </applet> </body> </html>
Beispiel anzeigen (Das Beispielbild wird nicht aktualisert. Die Seite lädt alle 15 Sekunden das gleiche Bild.)
<applet code="AmberCam.class" width="640" height="480">
Die Breite und Höhe des Applets ist anzupassen. Da das Bild auf 200 Prozent vergrößert wird, sind hier die doppelten Abmessungen des Bildes anzugeben.
<param name="url" value="http://www.domain.com/campic.jpg?">
Dieser Parameter verweist auf die komplette Webadresse (URL) des Bildes. Am Ende der URL muss ein Fragenzeichen angehängt werden.
<param name="refresh" value="60">
Dieser Parameter gibt die Anzahl der Sekunden an, nach der das Kamerabild aktualisiert wird.
AnfyCam ist Teil der Java-Applet-Sammlung Anfy (Java) und ermöglicht einige Effekte wie Überblenden und Zoomen der Kamerabilder oder Einblenden eines Logos. Die über 50 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. Der Browser muss Java unterstützen.
Die Datei anfycam.zip herunterladen, mit einem Entpacker, der lange Dateinamen unterstützt, entpacken und die im Archiv enthaltene Dateien anfycam.class, anfy.class und Lware.class per FTP im Binär-Modus auf den Webserver hochladen. Die Groß- und Kleinschreibung des Dateinamen darf nicht verändert werden. Das Applet muss sich im selben Verzeichnis wie die aufrufende HTML-Datei befinden, die Bilddatei muss auf dem selben Server wie das Applet liegen.
<html> <head> <title>Bildaktualisierung durch Java-Applet: AnfyCam</title> </head> <body> <h1>Bildaktualisierung durch 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> </body> </html>
Beispiel anzeigen (Das Beispielbild wird nicht aktualisert. Die Seite lädt alle 15 Sekunden das gleiche Bild.)
<applet code="anfycam.class" width="320" height="240">
Die Breite und Höhe des Bildes ist anzupassen.
<param name="credits" value="Applet by Fabio Ciucci (www.anfyjava.com)">
Dieser Parameter darf nicht verändert oder entfernt werden.
<param name="regcode" value="NO"> <param name="reglink" value="NO"> <param name="regnewframe" value="YES"> <param name="regframename" value="_blank">
Der Parameter regcode enthält den Registrierungcode. Bei der Shareware-Version bleibt der Wert NO.
Der Paramter reglink enthält die URL, die nach einem Klick auf das Applet geöffnet wird. Bei der Shareware-Version bleibt der Wert NO. Ebenso bei der registrierten Version, wenn keine Weiterleitung erwünscht ist.
Der Parameter regnewframe gibt an, ob der Verweis in einem anderen Frame geöffnet werden soll. Mögliche Werte sind YES oder NO.
Der Parameter regframename enthält das Verweisziel, falls der vorherige Parameter regnewframe auf YES gesetzt wurde. Mögliche Werte sind _blank, _top, _self, _parent oder ein eigener Name.
<param name="url" value="campic.jpg"> <param name="res" value="1"> <param name="interval" value="60"> <param name="statusmsg" value="Cam applet">
Der Parameter url enthält die URL oder den Pfad und Namen des Kamerabildes. Sowohl relative als auch absolute Pfadangaben sind erlaubt.
Der Parameter res enthält den Zoomfaktor von 1-8, wobei 1 der Originalgröße entspricht. Die Bildqualität wird bei höheren Werten stark verschlechtert.
Der Parameter interval enthält die gewünschte Anzahl von Sekunden, nach der das Kamerabild aktualisiert wird.
Der Parameter statusmsg enthält den Text, der in der Statuszeile angezeigt wird, wenn sich der Mauszeiger über dem Applet befindet.
<param name="fadespeed" value="32"> <param name="progressivefade" value="NO">
Der Parameter fadespeed regelt die Geschwindigkeit, mit der ein neues Bild eingeblendet wird. Mögliche Werte sind 1-255, wobei 255 das Bild am schnellsten ersetzt.
Der Parameter progressivefade regelt die Art und Weise der Einblendung. Bei NO wird das neue Bild gleichmäßig eingeblendet, YES erzeugt abwechselnde Effekte.
<param name="overimg" value="NO"> <param name="overimgX" value="0"> <param name="overimgY" value="0">
Der Parameter overimg enthält die URL oder den Pfad und Namen eines GIF-Bildes, das über dem Kamerabild eingeblendet wird. Sowohl relative als auch absolute Pfadangaben sind erlaubt. Der Wert 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.
Der Parameter overimgX bestimmt die horizontale Position des Logos.
Der Parameter overimgY bestimmt die vertikale Position des Logos.
<param name="memdelay" value="1000"> <param name="priority" value="3"> <param name="MinSYNC" value="10">
Diese drei Parameter dienen der Kompatibilität, bleiben in der Regel unverändert und sind in der Datei faq.html genau erklärt.
© 1998-2024 by Harald Gabler