Webcam – Einbindung per JavaScript
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
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"
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:
