Tobias Scheible Cyber Security & IT-Forensik Dozent
Balingen im Winter - Webcam

Webcam – Einbindung per JavaScript

Der letzte Teil der Artikelserie „Webcam Stadt Balingen“ beschäftigt sich mit dem Einbinden auf der Website. Das Webcam-Foto wir als normales Bild Element eingebunden und dann per JavaScript automatisch aktualisiert. Dadurch wird immer das aktuelle Foto der Webcam dargestellt, ohne dass die Seite neugeladen werden muss.

Mittwoch, 14. August 2019
0 Kommentare

Im vorherigen Teil wurde beschrieben, wie das Webcam-Bild bearbeitet und auf den Webserver geladen wird. Jetzt wird es ganz normal per HTML in die Website eingebettet.

Automatische Aktualisierung

Caching deaktivieren

Der Upload des Fotos erfolgt alle 20 Sekunden, die Aktualisierung per JavaScript erfolgt im gleichen Rhythmus. Wichtig ist, dass das Bild nicht einfach aktualisiert werden kann, da sonst der Web-Browser die erste zwischengespeicherte Version wieder anzeigen würde. Daher wird an die URL des Bildes ein Parameter mit der aktuellen Zeit gehängt und gleichzeitig das Caching mit dem folgenden .htaccess Eintrag deaktiviert:


FileETag None
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
Prelaoding

Je nach Internetgeschwindigkeit kann es sein, dass es zu einer unschönen Darstel-lung während dem Laden kommt. Daher wird das neue Bild im Hintergrund gela-den und erst wenn es vollständig ist, mit dem derzeitigen Bild ausgetauscht. Dies geschieht über den folgenden JavaScript-Code:

function update_image() {
    var downloadingImage = new Image();
    downloadingImage.onload = function(){
        document.getElementById("webcam_image").src = this.src;   
    };
    var timestamp = new Date().getTime();
    downloadingImage.src = "https://scheible.it/webcam/webcam-stadt-balingen.jpg?r=" + timestamp;
}

setInterval(update_image, 20000);

Webcam Artikelserie

Dieser Artikel ist Teil der Artikelserie Webcam Stadt Balingen. Die Webcam steht in Balingen auf dem Stettberg. Balingen befindet sich südlich von Stuttgart, auf hal-ben Weg zum Bodensee und im Zentrum des Zollernalbkreises. Die Webcam ist nach Süden ausgerichtet mit Blick auf die Innenstadt von Balingen.

In dieser Artikelserie werde ich die Einrichtung und Nutzung der Webcam in den folgenden Blog-Beiträgen beschreiben:

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzerklärung des Blogs.