Einige nützliche Scripts für die eigene Webcam-Seite.
Mit den auf dieser Seite vorgestellten Scripts können Sie einige Effekte bzw. Funktionen in Ihre WebCam-Seite integrieren.
Nicht jeder benötigt sie, aber wer sie braucht wird sie auch zu schätzen wissen.
[ Eigenes Browserfenster ]
[ Online/Offline-Bilder (SSI und JS) ]
[ Online/Offline-Bilder (PHP) ]
[ Zeitstempel ]
Hier erfahren Sie, wie das Kamerabild in einem eigenen Browserfenster ohne Menü-, Symbol-, Scroll- und Statusleisten angezeigt wird.
Der Browser muß JavaScript 1.1 unterstützen, was ab Internet Explorer 4.0 oder Netscape Navigator 3.0 der Fall ist.
Ansonsten öffnet sich ein normales Browserfenster.
Beispiel:
Fügen Sie den fett markierten Code in Ihre HTML-Seite ein.
<html>
<head>
<title>Bildanzeige in eigenem Browserfenster</title>
<script language="JavaScript">
<!--
function targetLink(URL)
{
if(document.images) targetWin = open(URL,"newWindow","width=400,height=300");
}
//-->
</script>
</head>
<body>
<center>
<h1>Bildanzeige in eigenem Browserfenster</h1>
<a href="remote.htm" target="_blank" onClick="targetLink('remote.htm');return false">Fenster oeffnen</a>
</center>
</body>
</html>
|
Beispiel ansehen
Erläuterung:
<script language="JavaScript">...</script>
Die Funktion ist für das Öffnen des neuen Browserfensters zuständig.
Mit width und height können Sie die Größe des Fensters einstellen.
<a href="remote.htm" target="_blank" onClick="targetLink('remote.htm');return false">Fenster oeffnen</a>
Dieser Verweis ruft die Funktion zum Öffenen des Fensters auf.
Der Name der HTML-Datei, die ins neue Browserfenster geladen wird - im Beispiel remote.htm, ist zweimal zu ändern.
Anstelle des Verweistextes kann auch ein Bild verwendet werden.
Mit diesem Script kann das Alter eines Kamerabildes bestimmt werden, um automatisch einen bestimmten Text und/oder ein Online- bzw. Offline-Bild anzuzeigen.
Das Kamerabild muß auf Dateiebene verfügbar sein und daher auf dem selben Server liegen wie die Webseite.
Der Webserver muß Server Side Includes (SSI) und der Browser JavaScript unterstützen.
Beispiel:
Fügen Sie den fett markierten Code in Ihre SHTML-Seite ein.
<html>
<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<title>Online/Offline-Bilder (SSI und JS)</title>
</head>
<body>
<center>
<h1>Online/Offline-Bilder (SSI und JS)</h1>
<img src="campic.jpg" width="320" height="240">
<script language="javascript">
<!--
var fyear = <!--#config timefmt="%Y"--><!--#flastmod file="campic.jpg"-->;
var fmon = <!--#config timefmt="%m"--><!--#flastmod file="campic.jpg"--> - 1;
var fday = <!--#config timefmt="%d"--><!--#flastmod file="campic.jpg"-->;
var fhour = <!--#config timefmt="%H"--><!--#flastmod file="campic.jpg"-->;
var fmin = <!--#config timefmt="%M"--><!--#flastmod file="campic.jpg"-->;
var fsec = <!--#config timefmt="%S"--><!--#flastmod file="campic.jpg"-->;
var lyear = <!--#config timefmt="%Y"--><!--#echo var="DATE_LOCAL"-->;
var lmon = <!--#config timefmt="%m"--><!--#echo var="DATE_LOCAL"--> - 1;
var lday = <!--#config timefmt="%d"--><!--#echo var="DATE_LOCAL"-->;
var lhour = <!--#config timefmt="%H"--><!--#echo var="DATE_LOCAL"-->;
var lmin = <!--#config timefmt="%M"--><!--#echo var="DATE_LOCAL"-->;
var lsec = <!--#config timefmt="%S"--><!--#echo var="DATE_LOCAL"-->;
var filedate = new Date(fyear,fmon,fday,fhour,fmin,fsec);
var localdate = new Date(lyear,lmon,lday,lhour,lmin,lsec);
var datediff = Math.round((localdate - filedate) / 1000);
if(datediff <= 600)
{
document.write('<p><img src="online.gif" width="100" height="20">');
document.write('<p>Das Kamerabild wurde vor ' + datediff + ' Sekunden hochgeladen und ist aktuell.');
}
else
{
document.write('<p><img src="offline.gif" width="100" height="20">');
document.write('<p>Das Kamerabild wurde vor ' + datediff + ' Sekunden hochgeladen und ist nicht aktuell.');
}
//-->
</script>
</center>
</body>
</html>
|
Beispiel ansehen
Erläuterung:
Wichtig: SSI-Anweisungen werden nur in Dateien mit der Endung .shtml interpretiert.
Die Datei mit dem Script darf daher nicht mit den Endungen .htm oder .html gespeichert werden.
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
Die beiden Meta-Tags sollen veranlassen, daß die Seite von der Originaladresse und nicht aus einem Cache geladen wird.
var fyear = <!--#config timefmt="%Y"--><!--#flastmod file="campic.jpg"-->;
var fmon = <!--#config timefmt="%m"--><!--#flastmod file="campic.jpg"-->;
var fday = <!--#config timefmt="%d"--><!--#flastmod file="campic.jpg"-->;
var fhour = <!--#config timefmt="%H"--><!--#flastmod file="campic.jpg"-->;
var fmin = <!--#config timefmt="%M"--><!--#flastmod file="campic.jpg"-->;
var fsec = <!--#config timefmt="%S"--><!--#flastmod file="campic.jpg"-->;
Diese Zeilen lesen über SSI das Datum der letzten Bildänderung ein.
Der Dateiname des Bildes muß hier sechs Mal geändert werden.
if(datediff <= 600)
Hier wird die Zeitspanne in Sekunden definiert, nach der das Bild als veraltet gilt.
Wählen Sie den Wert nicht zu gering.
document.write('<p><img src="online.gif" width="100" height="20">');
document.write('<p>Das Kamerabild wurde vor ' + datediff + ' Sekunden hochgeladen und ist aktuell.');
Wenn das Kamerabild jünger ist als vorgegeben, bekommt der Betrachter diesen mit document.write eingefügten HTML-Code zu sehen.
Der Name des Online-Bildes und dessen Größenangaben sind anzupassen.
Falls Sie nur Text oder ein Online-Bild anzeigen wollen, können Sie die nicht benötigte Zeile löschen.
Geben Sie bei Änderungen im Text besonders acht, damit es zu keinen JavaScript-Fehlern kommt.
document.write('<p><img src="offline.gif" width="100" height="20">');
document.write('<p>Das Kamerabild wurde vor ' + datediff + ' Sekunden hochgeladen und ist nicht aktuell.');
Falls das Bild älter als vorgegeben ist, wird der nach else stehenden Code angezeigt.
Gehen Sie analog den obigen Angaben vor.
Hinweis:
Im Beispiel wird die Zeit seit der letzten Aktualisierung in Sekunden angegeben.
Sollten Sie eine Anzeige in Minuten und Sekunden oder Stunden, Minuten und Sekunden wünschen, verwenden Sie nachfolgende Code-Zeilen.
Die jeweilige Zeile muß in den Bereich für das aktuelle Bild und in den für das nicht aktuelle Bild eingefügt werden.
Danach ist der Text anzupassen (aktuell/nicht aktuell).
1. Anzeige in Minuten und Sekunden
document.write('<p>Das Kamerabild wurde vor ' + Math.floor(datediff/60) + ' Minuten und ' + datediff%60 + ' Sekunden hochgeladen und ist (nicht) aktuell.');
2. Anzeige in Stunden, Minuten und Sekunden
document.write('<p>Das Kamerabild wurde vor ' + Math.floor(datediff/3600) + ' Stunden, ' + Math.floor((datediff%3600)/60) + ' Minuten und ' + datediff%60 + ' Sekunden hochgeladen und ist (nicht) aktuell.');
Mit diesem Script kann das Alter eines Kamerabildes bestimmt werden, um automatisch einen bestimmten Text und/oder ein Online- bzw. Offline-Bild anzuzeigen.
Das Kamerabild muß auf Dateiebene verfügbar sein und daher auf dem selben Server liegen wie die Webseite.
Der Webserver muß PHP unterstützen.
Beispiel:
Fügen Sie den fett markierten Code in Ihre PHP-Seite ein.
<html>
<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<title>Online/Offline-Bilder (PHP)</title>
</head>
<body>
<center>
<h1>Online/Offline-Bilder (PHP)</h1>
<img src="campic.jpg" width="320" height="240">
<?PHP
$file = 'campic.jpg';
$maxage = 600;
$ftime = filemtime($file);
$time = time();
$age = $time - $ftime;
if($age <= $maxage) {
echo '<p><img src="online.gif" width="100" height="20">';
echo '<p>Das Bild wurde vor ' . $age . ' Sekunden hochgeladen und ist aktuell.';
}
else {
echo '<p><img src="offline.gif" width="100" height="20">';
echo '<p>Das Bild wurde vor ' . $age . ' Sekunden hochgeladen und ist nicht aktuell.';
}
?>
</center>
</body>
</html>
|
Beispiel ansehen
Erläuterung:
Wichtig: PHP-Anweisungen werden nur in Dateien mit der Endung .php interpretiert.
Die Datei mit dem Script darf daher nicht mit den Endungen .htm oder .html gespeichert werden.
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
Die beiden Meta-Tags sollen veranlassen, daß die Seite von der Originaladresse und nicht aus einem Cache geladen wird.
$file = 'campic.jpg';
Der Dateiname des Bildes muß hier geändert werden.
$maxage = 600;
Hier wird die Zeitspanne in Sekunden definiert, nach der das Bild als veraltet gilt.
Wählen Sie den Wert nicht zu gering.
echo '<p><img src="online.gif" width="100" height="20">';
echo '<p>Das Bild wurde vor ' . $age . ' Sekunden hochgeladen und ist aktuell.';
Wenn das Kamerabild jünger ist als vorgegeben, bekommt der Betrachter diesen mit echo eingefügten HTML-Code zu sehen.
Der Name des Online-Bildes und dessen Größenangaben sind anzupassen.
Falls Sie nur Text oder ein Online-Bild anzeigen wollen, können Sie die nicht benötigte Zeile löschen.
Geben Sie bei Änderungen im Text besonders acht, damit es zu keinen Fehlern kommt.
echo '<p><img src="offline.gif" width="100" height="20">';
echo '<p>Das Bild wurde vor ' . $age . ' Sekunden hochgeladen und ist nicht aktuell.';
Falls das Bild älter als vorgegeben ist, wird der nach else stehenden Code angezeigt.
Gehen Sie analog den obigen Angaben vor.
Hinweis:
Im Beispiel wird die Zeit seit der letzten Aktualisierung in Sekunden angegeben.
Sollten Sie eine Anzeige in Minuten und Sekunden oder Stunden, Minuten und Sekunden wünschen, verwenden Sie nachfolgende Code-Zeilen.
Die jeweilige Zeile muß in den Bereich für das aktuelle Bild und in den für das nicht aktuelle Bild eingefügt werden.
Danach ist der Text anzupassen (aktuell/nicht aktuell).
1. Anzeige in Minuten und Sekunden
echo '<p>Das Kamerabild wurde vor ' . bcdiv($age,60,0) . ' Minuten und ' . bcmod($age,60) . ' Sekunden hochgeladen und ist (nicht) aktuell.';
2. Anzeige in Stunden, Minuten und Sekunden
echo '<p>Das Kamerabild wurde vor ' . bcdiv($age,3600,0) . ' Stunden, ' . bcdiv(bcmod($age,3600),60,0) . ' Minuten und ' . bcmod($age,60) . ' Sekunden hochgeladen und ist (nicht) aktuell.';
Manche Programme und IP-Kameras können keinen Zeitstempel ins Bild einfügen.
Dieses simple PHP-Script behebt diesen Umstand.
Das Kamerabild muß auf Dateiebene verfügbar sein und daher auf dem selben Server liegen wie die Webseite.
Der Webserver muß PHP unterstützen.
Beispiel:
Fügen Sie den fett markierten Code in Ihre PHP-Seite ein.
<html>
<head>
<title>Zeitstempel anzeigen</title>
</head>
<body>
<center>
<h1>Zeitstempel anzeigen</h1>
<img src="campic.jpg" width="320" height="240">
<p>
<?PHP
$file = 'campic.jpg';
$time = filemtime($file);
echo "Letztes Update: " . date("d.m.Y, H:i:s", $time);
?>
</center>
</body>
</html>
|
Beispiel ansehen
Erläuterung:
Wichtig: PHP-Anweisungen werden nur in Dateien mit der Endung .php interpretiert.
Die Datei mit dem Script darf daher nicht mit den Endungen .htm oder .html gespeichert werden.
$file = 'campic.jpg';
Der Dateiname des Bildes muß hier geändert werden.
Die nächste Zeile liest das Datum der letzten Änderung der Bilddatei.
Die dritte Zeile gibt das Datum formatiert aus.
Haben Sie noch Fragen oder Anregungen zum Thema dieser Seite? Wenden Sie sich an das WebCam-Forum.
Diese Seite ist Teil eines Framesets. Wenn Sie links kein Inhaltsverzeichnis sehen, klicken Sie hier: WebCam-Navigator
|