image feed refresh with jQuery/ajax

Question

I have an Axis camera which has multiple outputs, one of which is a jpg image. This image is a still taken from the camera at the time you load it up. I would like to implement a way for the image to reload (every 30 seconds) without having to reload the entire page, however, I would like for the code to fully download the image before updating it to avoid having a blank screen.

I have been reading around and the closest thing I found was this post Using AJAX / jQuery to refresh an image but the difference is that the image feed I have is coming from the actual camera itself not a php file. I have tried a couple of ways to get this working with my url but I have failed due to the lack of javascript knowledge.

The code I'm using right now to pull up the image is just a simple image tag...

<img src="[camera ip]/jpg/1/image.jpg">

and any time you refresh the browser window it gives you a snapshot of the current video stream.

Any help would be greatly appreciated!

Regards,
Javier

Answer 1

I couldn't find a webcam online with a refreshing image to test this against, but I think this should to the trick for you... or at least get you really close...

<script>
// URL to your cam image
var cam_image = 'http://absdev.ws:8000/jpg/1/image.jpg';

var buffer = {};
function preload() {
    buffer = new Image();
    // attaching the seconds breaks cache
    buffer.src = cam_image + '?' + (new Date()).getTime();
    buffer.onload = function() {
        setTimeout(preload, 30000); // 30 seconds refresh
        document.getElementById('myimg').src = buffer.src;
    }
}
preload();
</script>