Как обновить изображение с камеры в фоновом режиме без обновления всей страницы?

Question

Я использую PHP скрипт (currentimage.php), чтобы получить снимок с моего IP CCTV камеры, которая работает отлично:

<?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); 
?> 

и другой PHP/HTML для отображения данных:

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

но я не могу заставить его работать, чтобы обновлять изображение в фоновом режиме каждые 30 секунд. Я пытаюсь AJAX, но никакого успеха:

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

Что я делаю неправильно? Буду признателен за любую помощь

Answer 1

Я подозреваю, что основная проблема заключается в том, что браузер кэширует ваш файл и не перезагружает его, если вы снова установите атрибут. Я нашел способ обойти это:

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

Сохраните номер версии и подсчитайте каждый раз, когда вы делаете запрос. Таким образом, браузер будет рассматривать его как новый URL-адрес, и он будет перезагружен снова (проверьте это, используя функции разработчика вашего браузера на вкладке сети).

Answer 2

Я пробовал концепцию изменения отображаемого изображения с помощью временных запросов к скрипту PHP, и он отлично работает. Новый запрос запускается до сценария получения изображения, если URL-адрес изменен, и я сделал это, добавив номер версии в качестве параметра для URL-адреса.

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

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