使用ajax刷新网络摄像头图像

Question

I have an image that is being constantly updated from a local webcam source, it is then displayed on a website. I can get the image to show and by refreshing the page the image will update (obviously).

What I am wondering is, how can I update this image every (lets say) 5 seconds, without having to refresh the page manually (ie. utilizing ajax).

Basic things I am not too sure about:

1. <img src=""/> <--- how can I load an image url that is located within the javascript code

2. within the javascript code, how can I create a function that will automatically update the image source, without having to reload the page

As I understand it, upon reading around, one of the main problems is that browsers will load the cached image unless the resulting httprequest looks different each time, as such am I required to add an additional item within the url string (ie. www.yoursire.com?image=foo&date=bar (the date is grabbed by date function or some other iterated value)) in order to circumvent this horrible browser predisposition?

Thanks in advance!

Answer 1

You could use jquery to load an image object and then attach a timer and run the code for every 5 seconds.

Here's an example:

// 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');
});

Read more about this here:

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

About preventing the caching of dynamically loaded images you can just add the last modified timestamp in the url:

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