== 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, ...
== Code ==
Alles anzeigen
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, ...
== Code ==
Quellcode
- <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>
34.488 mal gelesen