nicht angemeldet
Bild für Webcam laufend aktualiseren wenn geladen
Hallo,
schon einige Zeit versuche ich ein Javascript für meine Webcam zu basteln. Im Prinzip erfüllt das folgende, weit verbreitete, den Zweck:
*********
<HTML>
<HEAD>
<TITLE>Webcam Java-Script</TITLE>
<meta http-equiv="Pragma" content="no-cache">
<SCRIPT LANGUAGE="Javascript"><!--
function reloadCam()
{reload = new Date();
reload = "?"+reload.getTime()
document.images["webcambild"].src = "ihr-webcambild.jpg"+reload
setTimeout("reloadCam()", 3000) // zeit-in-ms
}
//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<center><IMG NAME="webcambild" SRC="ihr-webcambild.jpg" BORDER=0></center>
<SCRIPT LANGUAGE="Javascript">
<!--
reloadCam();
//--></SCRIPT>
<BR>
</body>
</HTML>
*********
Ich möchte nur EINE Sache erreichen: Das Bild soll laufend aktualisiert werden, also nicht nach bestimmten Zeitintervall, sondern entsprechend der Verbindungsgeschwindigkeit so schnell wie möglich und es soll dann - nach dem Vorladen im Hintergrund - schlagartig gewechselt werden.
Lange habe ich jetzt mit "document.images.complete" etc. experimentiert. Da ich aber kein JavaScript-Experte bin, bekomme ich es wohl doch nicht gebacken. Könnte mir jemand mit ein paar konkreten Ergänzungen/Abänderungen im Code helfen?
Vor einem Festplattencrash hatte ich das auch schon mal nach stundenlanger Forschung hinbekommen, sogar mit DHTML-Blend-Übergangseffekt - das war richtig gut zu gebrauchen, ohne auf ein Applet angewiesen zu sein.
Danke für die Hife.
Andreas
-
Hallo Andreas!
Das was du da gern hättest ist mehr ein durchgehender Stream. Ich habe an sowas bei meiner ehemaligen Arbeit dran rumgewerkelt.
Letztendlich kam es dazu, dass aufwendige Hard- und Software angeschafft werden musste, um wirklich einen Stream senden zu können.Das lief dann auch astrein, hat aber Tage gedauert. Etwas stream-ähnliches per JS zu basteln wäre wahrscheinlich viel zu browserlastig, wenn es überhaupt sehenswert besser geht, als das, was du bisher gemacht hast.
Ist vielleicht keine befriedigende Antwort, hoffe aber totzdem, dir zumindest etwas weitergeholfen zu haben.
Gruß Patrick
-
Naja...
Wie gesagt, ich hatte die paar Zeilen mal zusammenbekommen. Es ist auch nicht viel dabei, nur meine beschränkte Logik und die ein oder andere nichtexistierende JavaScript-Kenntnis hindern mich daran, selbst nochmal draufzukommen. Es geht auf jeden Fall mit dieser images.complete-Abfrage.
-
...und nochwas: Wenn ich ein festes Intervall von 10 Sek. habe, ist das Bild auch bei jedem Modem-Nutzer geladen. Allerdings hat das dann wirklich nicht annährend etwas mit "bewegtem Bild" zu tun.
Und wenn ich das Intervall zu gering wähle, hat auch wieder der Modem-Nutzer ein Problem, weil er das Bild gar nicht sehen wird, weil es ja nur noch neu geladen wird, bevor er es einmal fertig aufgebaut gesehen hat.
Es kann sich nur um einen kleinen Trick handeln - wenige geschickte Zeilen Code - die den Timer am Ende ersetzen könnten.
-
Wäre nach wie vor an einer Antwort interessiert.
-
-
-
-
Es geht etwa in die Richtung:
<script type="text/javascript">
load_img = new Image();
load_img.src = 'bild.gif';function replace_img(){
if (load_img.complete) {
document['target_img'].src=load_img.src;
clearInterval(timerid);
}
}timerid = setInterval("replace_img()", 2000);
Any Ideas?
-
Ich würde es etwa so machen:
<script type="text/javascript">
datum = new Date;
document.write('<img src="webcam.png?'+datum.getTime()+' alt="" id="bild" />');
document.write('<img src="webcam.png?'+datum.getTime()+' alt="" id="verst" width="0" height="0" />');function reload()
{
datum = new Date;
document.getElementById('verst').src = "webcam.png?".datum.getTime();
self.intv = setInterval("reload2()", 100);
}
function reload2()
{
if(document.getElementById('verst').complete)
{
clearInterval(intv);
document.getElementById('bild').src = document.getElementById('verst').src;
reload();
}
}
reload();
</script>Nur ein kleiner Ansatz -- ich weiß nicht, ob es funktioniert. Das Script beginnt (hoffentlich!) damit, das Bild neu zu laden, sobald es geladen wurde, und zeigt es auch erst an, sobald es fertig geladen ist.
-
Hallo,
danke für die Mühe!
Allerdings bekomme ich, so wie ich es jetzt getestet habe die Fehlermeldung "Zeile 15 Zeichen 7 '[string].datum' ist null oder kein Objekt"
???
*************
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"><script type="text/javascript">
datum = new Date;
document.write('<img src="http://217.234.88.178/cam.jpg?'+datum.getTime()+'" alt="" id="bild" />');
document.write('<img src="http://217.234.88.178/cam.jpg?'+datum.getTime()+'" alt="" id="verst" width="0" height="0" />');function reload()
{
datum = new Date;
document.getElementById('verst').src = "http://217.234.88.178/cam.jpg?".datum.getTime();
self.intv = setInterval("reload2()", 100);
}
function reload2()
{
if(document.getElementById('verst').complete)
{
clearInterval(intv);
document.getElementById('bild').src = document.getElementById('verst').src;
reload();
}
}
reload();
</script></head>
<body onload="reload()">
</body></html>
************
-
document.getElementById('verst').src = "http://217.234.88.178/cam.jpg?".datum.getTime();
Achtung, du hast hier JavaScript und kein PHP. Deshalb "http://..../cam.jpg?" + datum.getTime();
Ein Plus an Stelle des Punktes.
-
-
Jetzt habe ich den folgenden Code getestet. Dieses .complete scheint gar nicht zu funktionieren. Wenn ich das verwende, laufen in der Statusleiste die zu ladenden Bildzahlen nur so durch.
********
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"><script type="text/javascript">
function reload()
{
datum = new Date;
document.getElementById('verst').src = "http://217.234.88.178/cam.jpg?"+datum.getTime();
self.intv = setInterval("reload2()", 100);
}
function reload2()
{
if (document.getElementById('verst').readyState == "complete")
{
clearInterval(intv);
document.getElementById('bild').src = document.getElementById('verst').src;
reload();
}
}
reload();
</script></head>
<body onload="reload()">
<img id="bild">
<img id="verst">
</body></html>
*********
-
Jetzt habe ich den folgenden Code getestet. Dieses .complete scheint gar nicht zu funktionieren. Wenn ich das verwende, laufen in der Statusleiste die zu ladenden Bildzahlen nur so durch.
Hat es denn jetzt mit deinem .readyState == "complete" funktioniert? Wie kommst du denn darauf? In SelfHTML habe ich dazu nämlich nichts gefunden.
-
-
-