Wie kann ich das Bild von der Kamera im Hintergrund aktualisieren, ohne die ganze Seite zu aktualisieren?

Question

ich PHP-Skript (currentimage.php) bin mit einem Schnappschuss von meiner CCTV-IP-Kamera zu bekommen, der gut arbeitet:

<IMG id="myImage" SRC='currentimage.php'> 

:

<?php 
while (@ob_end_clean()); 
    header('Content-type: image/jpeg'); 
// create curl resource 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_USERAGENT, $useragent); 
curl_setopt($ch, CURLOPT_URL, 'http://192.168.0.20/Streaming/channels/1/picture'); 
curl_setopt($ch, CURLOPT_HEADER, 0); 
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); 
curl_setopt($ch, CURLOPT_USERPWD, 'username:password'); 
// $output contains the output string 
$output = curl_exec($ch); 
echo $output; 
// close curl resource to free up system resources 
curl_close($ch); 
?> 

und andere PHP/HTML zum Anzeigen der Daten aber ich kann es nicht alle 30s im Hintergrund aktualisieren, um das Bild zu aktualisieren. Ich versuche, AJAX, aber kein Erfolg:

<script> 
     function refresh_image(){ 
      document.getElementbyId("myImage").setAttribute("src", "currentimage.php"); 
     } 
     setInterval(function(){refresh_image()}, 30000); 
</script> 

Was mache ich falsch? Ich werde jede Hilfe zu schätzen wissen

Answer 1

Ich vermute, dass das Hauptproblem hier ist, dass der Browser Ihre Datei zwischenspeichert und nicht erneut lädt, wenn Sie das Attribut erneut festlegen. Ich habe jedoch einen Weg gefunden:

document.getElementbyId("myImage").setAttribute("src", "currentimage.php?version=1"); 

Speichern Sie die Versionsnummer und zählen Sie jedes Mal, wenn Sie die Anfrage stellen. Auf diese Weise behandelt der Browser die URL als neue URL und wird erneut geladen (überprüfen Sie dies mithilfe der Entwicklerfunktionen Ihres Browsers auf der Registerkarte "Netzwerk").

Answer 2

Ich habe versucht, das angezeigte Bild über zeitgesteuerte Anfragen zu einem PHP-Skript zu ändern, und es funktioniert gut. Wenn die URL geändert wird, wird eine neue Anforderung an das Image-Erstellungsskript gesendet, indem eine Versionsnummer als Parameter an die URL angehängt wird. `Klasse;

var version = 1; 
 
function refresh_image(){ 
 
    document.getElementById("myImage").setAttribute("src", "currentimage.php?ver="+version); 
 
    version++; 
 
} 
 

 
setInterval(function(){ 
 
    refresh_image(); 
 
}, 2000);