[Details einblenden]

[Details ausblenden]

1. Dynamisches DNS

Damit der Videoserver trotz der täglichen Neuvergabe der IP-Adresse durch den Zugangs-Provider immer unter demselben Namen im Internet erreichbar ist, kann man einen DynDNS-Dienst benutzen. Dieser leitet Anfragen an einen Servernamen, den man sich selbst aussuchen kann, an die eigene IP-Adresse weiter, auch wenn sich diese durch die täglichen "Zwangstrennungen", die es bei vielen DSL-Providern noch gibt, ständig ändert. Um den Dienst nutzen zu können, kann man sich bei DynDNS.com anmelden und kostenlos einen Domainnamen einrichten, z.B. "meinserver.dyndns.org". Diesen Namen und die Anmeldedaten trägt man dann unter "Freigaben" / "Dynamic DNS" in die Fritzbox-Konfiguration ein:

Wenn nun die Internetverbindung getrennt und wieder neu aufgebaut wird, sendet die Fritzbox automatisch die aktuelle IP-Adresse an den DynDNS-Dienst. Sollte der DSL-Router keine Möglichkeit bieten, einen DynDNS-Dienst zu benutzen, dann kann dieser ggf. auch beim Videoserver eingerichtet werden.

2. Internet-Verbindung

In den Internet-Verbindungseinstellungen sollte eingestellt sein, daß die Internetverbindung dauerhaft gehalten wird, damit der Videoserver immer erreichbar ist. Wenn der Provider alle 24 Stunden eine Zwangstrennung der Internetverbindung vornimmt, kann man außerdem ein Zeitfenster angeben, in dem dies geschehen soll (in diesem Beispiel 6-7 Uhr):

3. Port-Freigaben

Da die Fritzbox eine Firewall für eingehende Verbindungen integriert hat, müssen die Ports des Videoservers dort freigegeben werden, damit er von außen erreichbar ist. Hierzu habe ich die UDP-Ports 5001-5003 für den Audio- und Videostream (den ich allerdings nicht nutze) und den HTTP-Port 80 freigegeben. Diese Angaben finden sich im Handbuch des Videoservers. Der Port 80 des Videoservers wird von der Fritzbox nach außen hin als 8001 freigegeben, weil ich unter Port 80 manchmal den Apache-Webserver laufenlasse. Der Videoserver ist dadurch unter der Adresse "meinserver.dyndns.org:8001" erreichbar (als Beispiel).

4. Priorisierte Anwendungen

Wenn der Videoserver auch bei voll ausgelasteter Internetverbindung immer gut erreichbar sein soll, kann man ihn unter "Priorisierung" als "Priorisierte Anwendung" eintragen:

[Details einblenden]

[Details ausblenden]

[Details einblenden]

[Details ausblenden]

// Script zum automatischen Laden des Webcam-Bildes in bestimmten Zeitabständen:

// Konfiguration
var nUpdateInterval = 10;                       // Aktualisierungs-Intervall in Sekunden
var nMaxSeconds = 1800;                         // Anzahl Sekunden bis zum Übertragungsende
var strSnapshotUrl = "autoupload/video.jpg";    // URL zum Webcam-Bild
var strStopImageUrl = "webcam_stop.jpg";        // URL zum Bild "Übertragungsende"
var strErrorImageUrl = "webcam_error.jpg";      // URL zum Bild "Fehler beim Laden"

// Initialisierung
var nEndTime = (new Date()).getTime() + nMaxSeconds * 1000;
var nRefreshTime = (new Date()).getTime();

function SnapshotRefresh()
{
	nRefreshTime = (new Date()).getTime();

	if(nRefreshTime < nEndTime)
	{
		// Webcam-Bild
		document.images.webcam.src = strSnapshotUrl + "?" + nRefreshTime;

		// Statuszeile
		document.getElementById('statustext').innerHTML = '&nbsp;';
	}
	else
	{
		// Webcam-Bild
		document.images.webcam.src = strStopImageUrl;

		// Statuszeile
		document.getElementById('statustext').innerHTML =
		'Übertragung beendet [<a href="" onClick="SnapshotRestart(); return false;">Neu starten</a>]';
	}
}

function SnapshotSchedule()
{
	if(nRefreshTime < nEndTime)
	{
		var nCurrentTime = (new Date()).getTime();
		var nTimeSpanSinceLastRefresh = nCurrentTime - nRefreshTime;
		var nTimeSpanWait = nUpdateInterval * 1000 - nTimeSpanSinceLastRefresh;
		if(nTimeSpanWait < 0)
			nTimeSpanWait = 0;

		setTimeout('SnapshotRefresh()', nTimeSpanWait);
	}
}

function SnapshotError()
{
	document.images.webcam.src = strErrorImageUrl;
}

function SnapshotRestart()
{
	nEndTime = (new Date()).getTime() + nMaxSeconds * 1000;
	SnapshotSchedule();
}

Die fett gekennzeichneten Angaben sollten den eigenen Gegebenheiten angepaßt werden; die Bedeutung dieser Variablen ist in den grünen Kommentaren rechts daneben angegeben.

Dieses Script wird z.B. unter dem Namen "webcam.js" auf den Webspace hochgeladen und mit den folgenden Anweisungen in den Abschnitt zwischen <head> und </head> der Webseite einbunden:

<script src="webcam.js" type="text/javascript"></script>

Das Kamerabild bindet man an der gewünschten Stelle zwischen <body> und </body> wie folgt ein, wobei die fett markierten Angaben für Breite (width) und Höhe (height) des Bildes an die tatsächlichen Pixel-Abmessungen des Kamerabildes angepaßt werden sollten:

<p align="center"><img src="autoupload/video.jpg" width="384" height="288" id="webcam"
	onError="SnapshotError();" onLoad="SnapshotSchedule();">
<br><span id="statustext">Übertragung wird gestartet...</span></p>

[Details einblenden]

[Details ausblenden]

Der direkte Zugriff auf das aktuelle Standbild der an den Videoserver angeschlossenen Kamera erfolgt normalerweise über eine Bild-URL, z.B. "http://meinserver.dyndns.org:8001/cgi-bin/video.jpg". Hierüber ließe sich z.B. das Webcam-Bild wunderbar in eine Webseite einbinden, ohne den Umweg über FTP-Uploads gehen zu müssen. Manche Videoserver wie z.B. der VIVOTEK VS3100P bieten jedoch keinen anmeldefreien Zugriff auf den Videostream oder das Standbild. Versucht man nun, über den Browser die Bild-URL aufzurufen, oder ruft man eine Webseite auf, in der das Standbild über die o.g. Bild-URL direkt eingebunden ist, wird man mit einem Anmelde-Dialog konfrontiert, der einen zur Eingabe von Benutzername und Paßwort auffordert. Selbst wenn kein Paßwort angegeben werden muß, erscheint trotzdem dieser Authentifizierungs-Dialog. Den naheliegenden Versuch, Benutzername und ggf. Paßwort direkt in der URL anzugeben (z.B. http://benutzername:passwort@meinserver.dyndns.org:8001/cgi-bin/video.jpg), betrachten die meisten heutigen Browser als Sicherheitsrisiko und zeigen deshalb eine unschöne Sicherheits-Warnmeldung an, die ein Besucher der Webseite immer erst "wegklicken" müßte.

Die clientseitige Authentifizierung läßt sich mit Hilfe eines kleinen Perl-Scripts, das bei Aufruf via CGI diese HTTP-Authentifizierung vornimmt und das Webcam-Bild an den Browser zurücksendet, umgehen:

#!/usr/bin/perl

use strict;

use LWP::UserAgent;

my $ua = LWP::UserAgent->new;
$ua->timeout(10);
$ua->credentials("meinserver.dyndns.org:8001", "Video Server", "benutzername", "passwort");
my $response = $ua->get("http://meinserver.dyndns.org:8001/cgi-bin/video.jpg");

if($response->is_success)
{
	print "Content-type: image/jpg\n\n";
	binmode(STDOUT);
	print $response->content;
}
else
{
	print "Location: /nistkasten/webcam_error.png\n\n";
}

exit 0;

Die fett gekennzeichneten Angaben (Server-Adresse und ggf. hinter einem Doppelpunkt die Portnummer, falls abweichend von 80; Hostname des Videoservers - hier "Video Server"; Benutzername; Paßwort; Bild-URL des Videoservers; Pfad zu einem Fehlerbild, das statt des Kamerabildes angezeigt wird, falls keine Verbindung zum Videoserver aufgebaut werden kann) müssen natürlich den eigenen Erfordernissen gemäß angepaßt werden. Dieses Script lädt man dann z.B. unter dem Namen "webcam.pl" in den Ordner "cgi-bin" des Webservers hoch (im ASCII-Modus!) und versieht es mit Ausführungsrechten (chmod a+x webcam.pl). Auf der Webseite kann dann das aktuelle Kamerabild einfach über die URL http://www.meineseite.de/cgi-bin/webcam.pl abgerufen werden.

Gegenüber dem regelmäßigen Upload des Bildes per FTP hat diese Methode den Vorteil, daß nur dann Daten übertragen werden, wenn tatsächlich jemand "guckt". Ein weiterer Vorteil ist, daß man nicht auf vorgegebene Update-Intervalle des Webservers angewiesen ist (manche Videoserver, wie z.B. der VIVOTEK VS7100, lassen z.B. als Upload-Intervalle nur ganzahlige Minuten-Werte zu). Stattdessen bestimmt der Client (also die im Browser des Zuschauers geladene Webseite), in welchen zeitlichen Abständen das Bild aktualisiert wird. Die maximale Aktualisierungsfrequenz hängt allerdings auch stark von der Geschwindigkeit der Internetverbindung ab, da das Bild ja zuerst vom Videoserver durch die DSL-Leitung zum Webserver und von dort wieder zurück zum Browser des Benutzers übertragen werden muß. Viel mehr als 1 Bild pro Sekunde wird man damit wohl nur unter optimalen Bedingungen erzielen können.

Ein Nachteil dieses sehr einfachen Scripts ist, daß die vom Videoserver zum Webserver übertragene Datenmenge proportional mit Anzahl der gleichzeitigen Zuschauer anwächst, wodurch der Upstream der DSL-Verbindung, an der der Videoserver hängt, schnell ausgeschöpft sein kann. Mit der im folgenden Abschnitt vorgestellten erweiterten Version des Scripts wird dieses Problem gelöst.

[Details einblenden]

[Details ausblenden]

Der Nachteil des oben beschriebenen, einfachen Perl-Scripts zum direkten Download des Kamera-Bildes vom Videoserver ist, daß das Bild für jeden einzelnen Zuschauer separat über die DSL-Verbindung gesendet wird, an der der Videoserver hängt. Bei einem Update-Intervall von 2 Sekunden und einer Bildgröße von 10 KB gingen so bei 10 gleichzeitigen Zuschauern durchschnittlich schon 400 kBit/s über die Leitung. Ein DSL-Upstream von (wie in meinem Fall) 512 kBit/s würde da schnell an seine Grenzen stoßen. Um die Datenmenge, die über die eigene DSL-Leitung gesendet wird, zu begrenzen, kann man das Webcam-Bild serverseitig cachen (zwischenspeichern) und nur dann vom Videoserver abrufen, wenn es älter als z.B. 1 Sekunde ist. Auf diese Weise gehen unabhängig von der Anzahl der gleichzeitigen Zuschauer maximal 80 kBit/s über die DSL-Leitung.

Trotz 7 gleichzeitiger Zuschauer bleibt der Upstream hier immer unterhalb von 100 kBit/s
 

[Details einblenden]

[Details ausblenden]

Die normale Video-Auflösung bei PAL-Signalen beträgt 768 × 576 Pixel und ist für manche Webseiten vielleicht schon zu groß. Auch sind viele Kameras nicht hochauflösend genug, um diese Auflösung ausnutzen zu können, wordurch das Bild unscharf wirkt. Daher bieten die meisten Videoserver die Möglichkeit, kleinere Auflösungen einzustellen, z.B. halb so groß (384 × 288 Pixel). Leider gibt es aber Videoserver (wie z.B. der AXIS M7001), bei denen hierdurch die Bildqualität trotz geringer JPG-Komprimierung schlechter ist als wenn man das Originalbild mit z.B. einem Grafikprogramm verkleinern würde, d.h. der Videoserver verwendet einen qualitativ minderwertigen Umrechnungs-Algorithmus. Auch hier kann man sich zum Glück behelfen, indem man das vom Videoserver gelieferte Originalbild (768 × 576 Pixel) mit Hilfe eines serverseitigen Perl-Scripts verkleinert und dann ausgibt. Das Resultat ist ein merklich detailreicheres Bild, erkennbar z.B. an den feinen Härchen des weißen Polstermaterials im Nest unten links:

Originalbild vom Videoserver: CIF (384 × 288), Compression: 15, Größe: 20 KB

Originalbild: 4CIF (768 × 576), Compression: 50, Größe: 31 KB, per GD::Image->copyResized verkleinert auf 384 × 288 (41 KB)

 

Es wäre theoretisch auch möglich, andere Bildwerte wie Helligkeit, Kontrast, Sättigung und Gammawert mit Hilfe des Perl-Scripts weiter anzupassen und sogar automatisch zu optimieren. Erste Versuche in dieser Richtung sahen auch erfolgversprechend aus und funktionierten auf meinem lokalen PC, liefen aber auf dem öffentlichen Webserver (Strato) nur sehr langsam (ein Aufruf dauerte mehrere Sekunden; vermutlich laufen die Scripts auf den Strato-Servern nur mit sehr niedriger Priorität).

[Details einblenden]

[Details ausblenden]

Normalerweise bieten Videoserver die Option, in das Webcam-Bild den aktuellen Zeitstempel (Datum und Uhrzeit) einzublenden. Nicht immer ist die Darstellung des Zeitstempels aber optimal, z.B. wenn das Datum nur in englischer Schreibweise angezeigt wird, oder wenn er ungünstig plaziert oder zu klein oder groß ist oder aus sonstigen Gründen nicht geeignet ist. Manche Videoserver, wie z.B. der AXIS M7001, zeigen gar einen falschen Zeitstempel im Bild an, weil sich die Serverzeit aus unerfindlichen Gründen spontan verstellt. Um Abhilfe zu schaffen, könnte man den Zeitstempel einfach selbst per Perl-Script in das Bild einblenden. Hierzu wird einfach die aktuelle Zeit des Webservers genommen, auf dem das Perl-Script ausgeführt wird, nach Belieben formatiert und in das Bild gezeichnet, bevor es ausgegeben wird. Im Beispiel-Bild wurde der Zeitstempel mit halbtransparentem Hintergrund links oben in das Bild eingefügt:

Webcam-Bild mit eingeblendetem Zeitstempel (oben links)
 

[Details einblenden]

[Details ausblenden]

Zur Anzeige der Zahl gleichzeitiger Zuschauer auf der Webseite könnte man dem Perl-Script eine Nummer mitgeben, die für jeden gleichzeitigen Zuschauer unterscheidlich ist. Dies könnte einfach eine Zufallszahl sein, die zu Beginn der Übertragung per JavaScript ermittelt und dann bei jedem Abruf des aktuellen Kamerabildes als URL-Parameter an das Perl-Script übergeben wird (z.B. http://www.meineseite.de/cgi-bin/webcam.pl?id=12345). Das Script schreibt dann diese eindeutige Nummer (ID) zusammen mit einem aktuellen Zeitstempel in eine Logdatei auf dem Webserver. Zur Ermittlung der Anzahl gleichzeitiger Zuschauer wird diese Logdatei dann ausgewertet. Hierzu wird einfach geschaut, wieviele unterscheidliche IDs innerhalb eines zurückliegenden Zeitfensters von z.B. 10 Sekunden in der Logdatei enthalten sind. Diese Zahl entspricht theoretisch der Anzahl gleichzeitiger Zuschauer. Die so ermittelte Zahl wird dann vom Perl-Script oben rechts mit halbtransparentem Hintergrund in das Webcam-Bild eingeblendet:

Webcam-Bild mit eingeblendeter Anzahl Zuschauer (oben rechts)
 

[Details einblenden]

[Details ausblenden]

Die Verzeichnisse mit den Bildern erscheinen dabei auf der linken Seite als "Alben". Durch die Benennung der Tagesverzeichnisse nach Jahr-Monat-Tag lassen sich diese leicht so sortieren, daß die Alben mit den aktuellsten Bildern immer ganz oben erscheinen. Die Alben selbst enthalten die Bilder in chronologischer Reihenfolge, aufgeteilt auf Seiten mit maximal 100 Bildern. Die Bilder werden außerdem automatisch in zeitlich zusammengehörige Bildsequenzen unterteilt, damit man z.B. einzelne Besuche des Nistkastens leichter unterscheiden kann. Hierzu wird einfach der Zeitstempel jedes Bildes mit dem des vorherigen Bildes verglichen. Liegt mehr als eine Minute dazwischen, dann beginnt eine neue Sequenz. Der Zeitstempel der Bilder kann dabei anhand des letzten Änderungsdatums der Datei oder anhand des Dateinamens ermittelt werden (individuell für jedes Album einstellbar). Ersteres ist geeignet für den automatischen Bilder-Upload bei Bewegungserkennung, da hier die Dateien ungünstig benannt sind; Letzteres verwende ich für die Tages-Alben, bei denen die Bilder nach dem Muster "JahrMonatTag_StundeMinuteSekunde_LaufendeNummer.jpg" (z.B. "20110301_071245_1.jpg") benannt sind.

Was das Galerie-Script derzeit noch nicht kann, ist das Anzeigen von Vorschaubildern sowie von Texten (Titel und Bildbeschreibung) zu den Bildern. Vielleicht kommt das ja irgendwann noch...

Wer das Galerie-Script verwenden will, kann es sich gerne herunterladen: AutoGallery.zip

Die Zip-Datei enthält eine Beispiel-Galerie aus 2 Alben mit je 3 Bildern zum Testen. Darin sind auch die HTML-Templates enthalten, die nach Belieben angepaßt werden können. Es können dort z.B. auch eigene Stylesheets eingebunden werden. Die Startdatei für die Galerie ist das Frameset "galerie.htm". Zum Ausprobieren am besten einfach das komplette Verzeichnis "Beispielgalerie" auf den Webserver ins Wurzelverzeichnis und das Perl-Script "autogallery.pl" ins Verzeichnis "cgi-bin" hochladen. Je nach Konfiguration des Webservers kann die Endung des Scripts auch in ".cgi" geändert werden; allerdings muß dies dann auch in den HTML-Templates geändert werden. Wie jedes CGI-Script benötigt auch dieses Ausführungsrechte, was man mit dem FTP-Programm erledigen kann. Wichtig ist auch, daß das Script im ASCII-Modus hochgeladen wird, da ansonsten der Webserver meckert.

Wenn statt der Beispiel-Galerie eine eigene Galerie angelegt werden soll, müssen die entsprechenden Pfade in dem Abschnitt "Konfiguration" des Perl-Scripts und in den HTML-Templates eingetragen werden. Bei mehreren Galerien empfiehlt es sich, mehrere angepaßte Versionen des Scripts und der dazugehörigen Templates in jeweils eigene Unterverzeichnisse zu legen.

Die Parametrisierung des Galerie-Scripts erfolgt weitestgehend über URL-Parameter, die Befüllung der HTML-Templates durch das Script anhand von Template-Variablen (z.B. @@ALBUM_NAME@@ für den Album-Namen oder <image>/</image> für ganze Zeilen-Bereiche – in diesem Fall ein Bild). Eine Doku hierzu existiert leider noch nicht – am besten einfach die Beispiele ansehen, dann kommt man sicherlich schon irgendwie dahinter... ;-)