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

Question

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

Я использую PHP-скрипт (currenttimage.php), чтобы получить снимок с моей IP-камеры видеонаблюдения, который работает нормально:

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

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

1

ajax cctv jquery php refresh

Решение

По вопросам рекламы [email protected]

Accepted Answer

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

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

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

0

Другие решения

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

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

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

-1

Источник