Bild bei Änderung nachladen (Funktioniert nicht)

DICIDE · 1. Mai 2020

Hallo ihr Lieben,

Ich hab da mal eine kleine Frage:

Ich werde aus dem folgenden Script nicht ganz schlau:

HTML

<html><head>
<title>Bild bei Änderung nachladen</title>
<script type="text/javascript">
<!--
var timestamp = 0;
function ajax()
{
try {
req = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
//Kein AJAX Support
}


req.onreadystatechange = function() {
if ((req.readyState == 4) && (req.status == 200)) {
var feedback = req.responseText;
var update = new Array();
var Now = new Date();


update = feedback.split('||');
if(timestamp < update[0]) {
timestamp = update[0];
document.getElementById('live').src = update[1];
document.getElementById('debugger').innerHTML += Now.toLocaleString() + ': Bild aktualisiert<br />';
} else {
document.getElementById('debugger').innerHTML += Now.toLocaleString() + ': Kein Update verfügbar<br />';
}


//Rekursiv jede Sekunde aufrufen und auf Statusaenderung reagieren
setTimeout("ajax()", 1000);
}
}
req.open('get', 'status.php');
req.setRequestHeader("Pragma","no-cache");
req.setRequestHeader("Cache-Control","must-revalidate");
//req.setRequestHeader("If-Modified-Since","Sat, 1 Jan 2000 00:00:00 GMT");
req.send(null);
}
//-->
</script>
</head>
<body onload="ajax()">


<img id="live" src="" alt="Webcam" />
<div id="debugger" style="position:absolute;right:0px;top:0px;height:100%;width:400px;font-size:11px;background-color:#ffbbbb"></div>


</body>
</html>

Alles anzeigen

Ich wollte ein Bild von einer IP Camera auf der Seite Einbinden was ja auch Funktioniert. Nur ich muss die Seite selbst neu laden damit sich das Bild Aktualisiert. Da das Auto Update irgendwie nicht funktionieren möchte.

(Das bild wird per FTP auf das root verzeichnis /IPCAM/IPCAM_1.jpg

Ich habe die Anleiten auf: http://www.easy-coding.de/wiki…-%C3%84nderung-nachladen/

befolgt doch leider keine Funktion.

seht selbst:

HTML

<html><head>
<title>Bild bei Änderung nachladen</title>
<script type="text/javascript">
<!--
var timestamp = 0;
function ajax()
{
try {
req = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
//Kein AJAX Support
}


req.onreadystatechange = function() {
if ((req.readyState == 4) && (req.status == 200)) {
var feedback = req.responseText;
var update = new Array();
var Now = new Date();


update = feedback.split('||');
if(timestamp < update[0]) {
timestamp = update[0];
document.getElementById('live').src = update[1];
document.getElementById('debugger').innerHTML += Now.toLocaleString() + ': Bild aktualisiert<br />';
} else {
document.getElementById('debugger').innerHTML += Now.toLocaleString() + ': Kein Update verfügbar<br />';
}


//Rekursiv jede Sekunde aufrufen und auf Statusaenderung reagieren
setTimeout("ajax()", 1000);
}
}
req.open('get', 'status.php');
req.setRequestHeader("Pragma","no-cache");
req.setRequestHeader("Cache-Control","must-revalidate");
//req.setRequestHeader("If-Modified-Since","Sat, 1 Jan 2000 00:00:00 GMT");
req.send(null);
}
//-->
</script>
</head>
<body onload="ajax()">


<img id="1154681111" src="IPCAM/IPCAM_1.jpg#1154681111" alt="Webcam" />
<div id="debugger" style="position:absolute;right:0px;top:0px;height:100%;width:400px;font-size:11px;background-color:#ffbbbb"></div>


</body>
</html>

Alles anzeigen

Auch wen ich die ID weg lasse bei <img id=

Könnt ihr mir da einen Rat geben?

Fals das Script nichts mehr funktionsfähig ist werde ich es anders versuchen.

LG

Jens

Harmageddon · 1. Mai 2020

Hast du die status.php auch erstellt, die da abgerufen wird? Wenn ich das richtig sehe, müsste die den Timestamp und den Dateinamen ausgeben, getrennt durch || (und den Timestamp auch wie im Text beschrieben an den Dateinamen anhängen).

DICIDE · 1. Mai 2020

Zitat von Harmageddon

Hast du die status.php auch erstellt, die da abgerufen wird?

Eh nein habe ich nicht^^ davon wurde auch nichts geschrieben auf der seite die ich verlinkt habe. Das man da eine status.php erstellen muss.

Ok dan erstelle ich diese. Jetzt ist die Frage wo soll den die status.php dan liegen? Im Hauptverzeichnis oder dort wo das bild gespeichert ist? Und was soll in der status.php drin stehen.

Wie gesagt in der beschreibung lese ich nichts von Erstellen.

Kopie der beschreibung:

Zitat

== Beschreibung ==

Man kann das Script anwenden um ein Webcam Bild zu aktualisieren oder einfach, wenn man anderen live irgendetwas zeigen mag.

Das Script prüft 1x in der Sekunde ob eine Änderung der Datei vorliegt. (Das macht die PHP Funktion filectime())

Falls eine Änderung vorliegt, wird das Bild mit der id "live" aktualisiert.

Im Gegensatz zur HTML Refresh Lösung spart diese Lösung Traffic.

Da der Browser Bilder die Bilder nicht aktualisieren würde, wenn wir mit JavaScript jedesmal den selben Pfad übergeben würde, bedienen wir uns hier eines Workarounds. Wir hängen einfach eine ID (in diesem Falle den Timestamp) an den Dateipfad mit an.

z.B. webcam.jpg#1154681111, webcam.jpg#1154682111, ...

Alles anzeigen

Wen nicht benutze ich was anderes. Gibt ja Zahlreiche Scripte sowie denk ich mal sogar ein modul.

DICIDE · 1. Mai 2020

Problem gelöst.

Warscheins unterstüzt dieses Script nicht die neue PHP version. bzw der JCE editor mit dem ich Arbeite.

Hab im internet mal Recherchiert zb bei https://www.user-archiv.de/skript-archive.html

Und mal etwas zusammengebastelt.

Mit diesem klappt alles wie am schnürchenKann ich leute Empfehlen die genau auch auf der suche danach sind.

Code

<script language="Javascript">
<!--
function refreshCam(){                rfsh = new Date() ; rfsh = "?"+rfsh.getTime()                document.images["webcam"].src = "/webcam/cam_1.jpg"+rfsh                setTimeout("refreshCam()", 10000)
}
//-->
</script>
<img src="/webcam/cam_1.jpg" name="webcam" width="352" height="288" border="0" alt="Webcam">
<script language="JavaScript">  <!--    if( document.images )    refreshCam();  //-->
</script>

Trozdem Danke für die bis dahin gekommenden Hilfen

Belibt Gesund!

LG

Jens