Webcam - HTML : JavaScript

Webcam - Seite für den FTP - Upload / Refresh

JavaScript wird zur periodischen Erneuerung und Darstellung des Webcam - Bildes beim FTP - Upload, aber auch gern für den Livestream eingesetzt.

Im Internet gibt es mehrere Varianten zu finden, die gern eingesetzt werden. Ein wesentlicher Vorteil ist der, dass der Besucher keine Plugins oder spezielle Player benötigt. Auch ist bei fast 100 Prozent der Besucher - entgegen oft anders lautenden Meinungen von "Spezialisten" - JavaScript aktiviert.

Ein Tipp für Sie an dieser Stelle: lassen Sie sich nicht veralbern, welche Besucher mit welchem Browser surfen, welche Player einsetzen und welche Plugins, mit welchen Sicherheitseinstellungen usw. Schauen Sie ganz einfach in Ihr Logprotokoll beim Provider, oder aber finden Sie eine aktuelle und reale Statistik im Internet. Schauen Sie sich das Web-Barometer von webhits.de oder ein eigenes Logprotokoll bei 1und1 usw. einfach mal gründlicher an. Es wird im Gespräch unter "Fachleuten" sehr viel gemauert, besonders zu Gunsten der Alternativen wie Firefox , Opera und neuerdings Chrome, die aber gegenwärtig wohl alle drei real noch um eine umfassende Verbreitung ringen müssen.

Wir erkennen eindeutig, dass der durchschnittliche User berechtig mit Windows, dem Internet Explorer, dem Windows Media Player und aktiviertem JavaScript durchs Internet surft. Die Ursachen dazu werden sicher  unterschiedlich sein, wir sollten uns allerdings schon an den realen Statistiken orientieren. 

Ebenso halte ich es für Unsinn, wenn jemand meine Homepage in grünen oder gelben Farben, in exotischer Schriftart und ohne Bilder ansehen will. Ich verbinde das Angeln immer mit dem Wasser und seiner im Idealfall azurblauen Farbe ... - Realisieren Sie den Text weitestgehend kontrastreich und maschinenlesbar im Quelltext. Damit kommen Sie auch Behinderten entgegen. Die Gestaltung, Anordnung und Formatierung einer Seite jedoch sollte man dann schon dem Betreiber überlassen. Schließlich soll eine Seite so ankommen, wie sich das ihr geistiger Vater dachte. Und wem das Blau der Angelseite nicht passt, der kann sich selbst eine eigene in Rot mit grünen Tupfen basteln. In keiner Galerie der Welt gibt es am Eingang Pinsel und Palette, um die ausgestellten Klassiker individuell zu "verschönern", auch wenn dieser Vergleich etwas hinkt ...

Nun aber wieder zur Sache und damit zu einer ganz einfachen Variante zur Erneuerung des Webcam - Bildes mit JavaScript. Mein erstes Beispiel hier in Aktion - ein 5- Sekunden- Refresh, realisiert mit Webcam- Javascript: 

Im Offline - Status der Kamera sollten Sie auch hier das zuletzt gesendete Bild oder ein speziell erstelltes Offline - Bild erkennen. Mein erneuertes Webcam - Bild liegt wiederum auf meinem Webspace im Verzeichnis "webcam", diesmal unter dem Namen "cam_1.jpg" ( mein erster Kanal von webcamXP ).

Der Aufbau der Seite ist ähnlich wie bei dynamischem HTML - hier wird jedoch ein Javascript in den Header gelegt. Verändern Sie hier den konkreten Pfad zu Ihrem sich erneuernden Bild (im Beispiel "webcam/cam_1.jpg"), keinesfalls aber die Anordnung der einzelnen Zeilen und Zeichen, wenn Sie nicht sicher sind.

Die Refresh - Zeit wird in tausendstel Sekunden angegeben, im Beispiel auf der Seite real und im gelb markierten Quelltext 30000/1000 = 30 Sekunden. Diese Periodizität können Sie natürlich verändern, was Sie entsprechend auch im Webcam - Programm anpassen sollten. 

Erläuternd: Wenn Ihr Programm nur alle 60 Minuten ein neues Bild auf Ihren Webspace lädt, bringt ein Script für den 30 Sekunden - Refresh natürlich keine Punkte. Es wäre ja 119 Mal nicht neues zu holen / zu laden ...

<script language="Javascript"><!--
function reloadCam()
{reload = new Date();
reload = "?"+reload.getTime()
document.images["angelpage"].src = "webcam/cam_1.jpg"+reload
setTimeout("reloadCam()", 30000) 
}
//--></script>

In den Body fügen Sie dann wieder, unter Beachtung des konkreten Pfades zu Ihrem Bild, den Bild-Tag und das Kommandoscript zum Reload ein:

<img name="angelpage" src="webcam/cam_1.jpg" border="0" width="320" height="240"></center>
<script language="Javascript">
<!--
reloadCam();
//--></script>

Die Zuweisung eines zusätzlichen Namens für das Bild - hier "angelpage" - gewährleistet, dass eben nur dieses konkrete Bild auf der HTML - Seite erneuert wird,  nicht also hier auf der Seite das Bannerbild von webcamworld.com . Sie könnten ja ebenfalls beliebig viel weitere Bilder, aber auch andere Elemente, zur Gestaltung der Seite mit dem Webcam- Javascript unterbringen.

zurück | Home | weiter

Eine Variante zur dynamischen Darstellung des Webcam - Bildes mit JavaScript