zillaofthegods zillaofthegods - 1 year ago 111
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!

Answer Source

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 )