zillaofthegods zillaofthegods - 1 year ago 101
HTML Question

webcam image refresh with ajax

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!


Without writing all the code

  • look at the javascript functions setTimeout() and setInterval()

  • it's easy to change the src attribute of ana element

    document.getElementbyId("imageId").setAttribute("src", imageUrl);
  • if your image request url is the same everytime (but the pic has changed server-side) you can either add a "no-cache" to the ajax request header, or possibly add a random query string to the image to force a reload each time (e.g http://mydomain/myimage?3754854 )