Webcam Technik

Zu der Technik der Webcam.

Irgendwie wollte ich so was schon immer einmal machen. Nur was soll man da zeigen? Den Himmel, die Straße, den Garten? Überall die Gefahr das man jemanden mit aufnimmt dessen Persönlichkeitsrecht man dabei verletzt. Da kam mir das Projekt von Anja wie gerufen. 🙂 Die Garnelen werden sich nicht beschweren – will ich doch hoffen. 😀

Links seht ihr (wenn ihr keinen Adblocker (Werbefilter) aktiv habt) welche Webcam ich mir dafür ausgesucht habe. Gut fand ich an ihr, dass sie recht viele Möglichkeiten (Upload per FTP, HTTP (HTTP-PUT – nicht zu empfehlen ohne Webdav), eMail und Stream) bietet, das Bild zu veröffentlichen. Die Trigger kann man entweder durch Bewegung, einem externen Sensor oder einen Timer steuern. Ich habe einen Timer von 1 Minute gewählt der für den Zeitraum, in dem auch Licht im Cube eingeschaltet ist, läuft. Die so aufgenommenen Bilder werden per FTP auf einen FTP-Server geladen. Leider kann die Kamera kein SSL (FTPS), weshalb ich nicht direkt auf die Blog-Seite gehe. Der Weg ist so zwar etwas komplizierter aber ich möchte keine unnötigen unverschlüsselten Verbindungen zu dem Server zulassen. Daher lege ich die Bilder der Webcam auf einen offenen FTP-Server auf dem sonst auch nichts weiter liegt als das Bild. Von dort hole ich mir dann das Bild per SCP auf den Server, auf dem das Blog installiert ist. Da die Webcam immer zur vollen Minute ein Bild auf den FTP-Server lädt, hole ich es immer 10 Sekunden später wieder ab.

Um nun die Bilder auf der Seite automatisch neu zu laden, habe ich mir erst überlegt, mein Lieblings JavaScript-Framework „jQuery“ zu verwenden, mich dann aber dagegen entschieden. Zum einen wollte ich selber mal wieder mit dem DOM herum basteln und zum anderen muss man ja auch kein riesiges Framework mit schleppen, wenn es nur um 2-3 Funktionen daraus geht.

Hier also noch das Script für das aktualisieren des Bildes (rechts scrollen):

/***
Copyright 2011 Alexander Palm | http://www.alexander-palm.de/

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
***/
var timer1, timer2, timer3;
var errorcount=0;
var ReloadTimeout=60;
var HideTimeout=3;
var OnlineText  = '.... Bild wird aktualisiert ....';
var OfflineText = 'Das Licht im Cube ist gerade aus, daher findet keine Aktualisierung statt.';
var WebCamImage = document.images['WebCamGarnelen'];

var debug = 0;
var debugwindow;

var iebody    = (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
var docwidth  = (window.innerWidth)  ? window.innerWidth  : iebody.clientWidth;
var docheight = (window.innerHeight) ? window.innerHeight : iebody.clientHeight;

function compare_to_now(mytime) {
  //  1 = Uebergebene Zeit ist groesser als aktuelle Zeit
  //  0 = Zeiten sind gleich
  // -1 = Uebergebene Zeit ist kleiner als aktuelle Zeit
  
  var jetzt = new Date();
  var tocomp = new Date(jetzt.getFullYear(), jetzt.getMonth(), jetzt.getDate(), mytime.substr(0,2), mytime.substr(3,2), 0 );

  if (jetzt > tocomp)
  	return -1;
  if (jetzt < tocomp)
  	return 1;
  
  return 0;  
}

function writelog(txt){
	if(typeof window.console != 'undefined'
    && typeof window.console.log != 'undefined'){
		console.log('webcam.js:' + txt);
	} else if ( debug == 1 ) {
		if (!debugwindow) {
			debugwindow = window.open('', "Debug", "left="+(docwidth / 2)+",top="+(docheight/2)+",scrollbars=yes,resizable=yes");
			debugwindow.document.open();
			debugwindow.document.write('\\n\\n\\n\\n