обновление изображения с веб-камеры с помощью AJAX

Question

У меня есть изображение, которое постоянно обновляется из локального источника веб-камеры, затем оно отображается на веб-сайте.Я могу получить изображение для показа, и обновив страницу, изображение будет обновлено (очевидно).

Мне интересно то, как я могу обновлять это изображение каждые (скажем, 5 секунд), не обновляястраница вручную (т.е. используя ajax).

Основные вещи, в которых я не слишком уверен:

1. <img src=""/> <--- как я могу загрузить URL-адрес изображения, который находится в коде javascript </p>

2. в коде JavaScript, как я могу создать функцию, которая будет автоматически обновлять источник изображения, без перезагрузки страницы

Как я понимаюэто, после прочтения, одна из основных проблем заключается в том, что браузеры будут загружать кэшированное изображение, если итоговый httprequest не будет каждый раз выглядеть по-разному, поэтому я должен добавить дополнительный элемент в строку URL (например, www.yoursire.com? image = foo & date = bar (дата захватывается функцией date или другим итеративным значением)), чтобы обойти эту ужасную предрасположенность браузера?

Заранее спасибо!

Answer 1

С jQuery:

    $(document).ready(function() {
       window.setInterval("refreshCamera();", 1000); // one second interval
    });

    var url = 'http://www.x.com/abc?refresh=';
    var forcerefresh = 0;

    function refreshCamera()
    {
       forcerefresh = forcerefresh + 1;
       $('#myImageId').attr('src',url + forcerefresh);


}

(функция принудительного обновления запрещает браузеру использовать локально кэшированное изображение)

Answer 2

без записи все код

• посмотрите на функции JavaScript setTimeout() и setInterval()

• легко изменить атрибут src элемента ana

  document.getElementbyId("imageId").setAttribute("src", imageUrl);
  

• если ваш URL-адрес запроса изображения всегда один и тот же (но картинка изменилась на стороне сервера), вы можете добавить «no-cache» в заголовок запроса ajax или, возможно, добавить строку произвольного запроса в изображение для принудительной перезагрузки каждый раз (например, http://mydomain/myimage?3754854)

Answer 3

Я сделал это, и он работает, используя настройки источника изображения. Также на стороне сервера вы должны отправить HTTP-заголовки без кэширования , чтобы предотвратить кэширование.

<img src="" id="webcam" />
<script type="text/javascript">

var int=self.setInterval("reload()",1000);

function reload(){
   $("#webcam").attr("src", "/mysite/webcamImage");
}

</script>

Answer 4

Отключение кэширования сокрушит вашу веб-камеру (даже хорошую), если она станет популярной

Я пытался разрешить кэширование изображения в течение 6 секунд (Cache-Control: max-age = 6), потому что мне нужно было предотвратить перегрузку веб-камеры. Код, с которым я работал, выглядел примерно так, но у него есть проблема:

<img alt="Webcam image of something popular" id="liveimage" src="http://example.com/webcams/suddenlypopular.jpg" /><br />
<script type="text/javascript">
(function() {
    setInterval(function() {
        var myImageElement = document.getElementById('liveimage');
        myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg';
    }, 6000);
}());
</script>

Ранее веб-разработчик включил? Rand = (случайное число) в качестве метода очистки кэша. Это плохо, когда изображение кэшируется (даже если только в течение короткого периода времени), потому что если означает, что вы можете (в зависимости от того, будет ли ваш кэш рассматривать параметры запроса как не кэшируемые), это означает, что вы получаете очень низкую частоту обращений в кэш и вы получаете множество представлений страниц.

Проблема заключалась в том, что изображение теперь не обновлялось, поскольку, хотя атрибут src переназначался, он фактически не менялся на другое значение, поэтому браузер (Chrome 51) не обновлял изображение. Я изменил логику, чтобы иметь либо ?1, либо ?2 аргумент строки запроса, и чередовать их.

<img alt="Webcam image of something popular" id="liveimage" src="http://example.com/webcams/suddenlypopular.jpg?1" /><br />
<script type="text/javascript">
(function() {
    setInterval(function() {
        var myImageElement = document.getElementById('liveimage');
        if (myImageElement.src == 'http://example.com/webcams/suddenlypopular.jpg?1') {
            myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg?2';
        } else {
            myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg?1';
        }
        myLogElement.innerHTML = myImageElement.src;
    }, 6000);
}());
</script>

РЕДАКТИРОВАТЬ : хотя это работает в Chrome и IE, оно не работает в Firefox, поэтому я нашел альтернативное решение, которое работает в Chrome, Firefox и IE (Safari в настоящее время не тестируется) .

<img alt="Webcam image of something popular" id="liveimage" src="http://example.com/webcams/suddenlypopular.jpg" />
<script type="text/javascript">
(function() {
    setInterval(function() {
        var myImageElement = document.getElementById('liveimage');
        var d = new Date();
        // 6000 is 6 seconds; the desired refresh rate
        // % n is a bit of an experiment for being nice on cache invalidation; it also puts a bound on how out-of-date something would be regarding clock skew.
        var timeSlice = Math.floor(d.getTime() / 6000) % 3;
        myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg?t=' + timeSlice;
    }, 6000);
}());
</script>

Так что теперь у меня есть веб-камера с поддержкой кэша, которая обновляет данные.

Конфигурация обратного прокси Apache

Вот фрагмент из Apache httpd о том, как вы можете использовать обратный прокси-сервер для настройки конкретной политики кэширования.

<Location /webcams/suddenlypopular.jpg>
  ProxyPass        http://mywebcamdevice.example.com/snapshot.jpg
  ProxyPassReverse http://mywebcamdevice.example.com/snapshot.jpg
  ExpiresByType image/jpeg "access plus 6 seconds"
  Header unset ETag
  Header unset Last-Modified
</Location>

Answer 5

У меня была такая же потребность, поэтому я добавляю свое собственное решение js ниже. Иногда наша веб-камера будет в процессе записи jpg в каталог, когда происходит обновление ajax, поэтому вместо отображения разбитого изображения я представляю анимированный gif.

JS:

<script>
$(document).ready(function () {
    (function () {
        // show webcam jpg on initial page load
        var refreshWebcam = function () {
            // webcam link is appended with a timestamp to prevent caching
            var webcamImg = 'http://abs_path_to_webcam_img/webcam1.jpg' + '?' + (new Date()).getTime();
            var loadingImg = 'http://abs_path_to_webcam_loading_img.gif'
            $.ajax({
                url: webcamImg,
                type: 'HEAD',
                error: function () {
                    $('#refresh').attr('src', loadingImg);
                    //console.log('failed loading ' + webcamImg);
                    // if there's an error, retry loading image every half second
                    setTimeout(function () {
                        refreshWebcam();
                    }, 500)
                },
                success: function () {
                    $('#refresh').attr('src', webcamImg);
                    //console.log('successfully loaded ' + webcamImg);
                }
            });
        };
        // refresh webcam jpg every 5 seconds
        window.setInterval(refreshWebcam, 5000);
        refreshWebcam();
    })();
});

HTML

<img alt="Web Camera Image" id="refresh" src="http://abs_path_to_webcam_loading_img.gif" /> 

Answer 6

Вы можете использовать jquery для загрузки объекта изображения, а затем прикрепить таймер и запускать код каждые 5 секунд.

Вот пример:

// when the DOM is ready
$(function () {
  var img = new Image();

  // wrap our new image in jQuery, then:
  $(img)
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    
      $(this).hide();

      // with the holding div #loader, apply:
      $('#loader')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);

      // fade our image in to create a nice effect
      $(this).fadeIn();
    })

    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded
    })

    // *finally*, set the src attribute of the new image to our image
    .attr('src', 'images/headshot.jpg');
});

Подробнее об этом здесь:

• http://jqueryfordesigners.com/image-loading/

О предотвращении кэшированиядинамически загружаемых изображений, вы можете просто добавить последнюю модифицированную метку времени в URL:

<img src="image.jpg?lastmodified=1291235678" ...