攝像頭圖像刷新與AJAX

Question

我有一個圖像，不斷更新從本地網絡攝像頭來源，它然後顯示在網站上。我可以讓圖片顯示，並通過刷新頁面圖像將更新（顯然）。

我想知道的是，如何每5秒更新一次這個圖像（讓我們說），而不必手動刷新頁面（即利用ajax）。

基本的東西我不是太肯定：

1. <img src=""/> < ---我怎麼可以加載位於JavaScript代碼中的JavaScript代碼

2. 內的圖像的URL，如何我可以創建一個功能，將自動更新圖像源，而不必重新加載頁面

正如我下站在它周圍，一個主要的問題是，瀏覽器將加載緩存的圖像，除非生成的httprequest每次看起來不同，因此我需要在url字符串中添加一個附加項（即。 www.yoursire.com?image=foo & date = bar（該日期是由日期函數或其他一些迭代值獲取的））以規避這種可怕的瀏覽器傾向？

在此先感謝！

Answer 1

無需編寫所有代碼

• 看看JavaScript函數setTimeout()和setInterval()

• 很容易改變ANA元素的src屬性

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

• 如果您的圖片請求url每次都是相同的（但圖片已經改變了服務器端），您可以向ajax請求頭添加一個「no-cache」，或者添加一個隨機查詢字符串到圖片中，以強制每次重新加載（例如，摹http://mydomain/myimage?3754854）

Answer 2

您可以使用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/

關於防止動態加載圖片的緩存，你可以只添加最後修改的時間戳在網址中：

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

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

使用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 5

我有同樣的需要，所以我追加下面是我自己的js解決方案。有時我們的攝像頭會在發生ajax刷新時將jpg寫入目錄的過程中，所以我沒有顯示破碎的圖像，而是呈現了一個動畫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

禁用緩存將壓倒你的網絡攝像頭（甚至是好的），如果它被越來越多的

我試圖讓圖像被緩存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> 

此前，網絡開發已經把一個蘭特=（隨機數）作爲一個緩存阻止技術？ 。如果圖像緩存（即使只有很短的時間），這很糟糕，因爲如果意味着您可能（取決於您的緩存是否將查詢參數視爲不可緩存），意味着您的緩存命中率非常低你會得到很多頁面表示正在建立。

問題是，圖像現在不刷新，因爲雖然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>