5

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

Community
  • 1
  • 1
Javier
  • 79
  • 1
  • 4
  • ok, can you give an example? does it load a different image every 30sec? explain how you want the code to look like – Ibu Nov 01 '12 at 19:25
  • What is the format of all the images you'll be pulling in? Does the camera just keep updating the same image.jpg? – Mark Meyer Nov 01 '12 at 19:40
  • The image feed never changes, it is always the very same url as I have provided in the original post and it gives you a new image any time you refresh the browser but I have decided to just keep it to 30 second intervals. This is not a random image it is providing, it's just a snapshot of what the camera is currently streaming. – Javier Nov 01 '12 at 19:42

2 Answers2

2

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>
Randy Hunt
  • 435
  • 3
  • 10
  • I'm trying to piece this together from the little javascript knowledge I have and it makes sense, it is in fact the closest I've been to getting it to work. The image pulls up and the browser loads the new image with timestamp, however, it is never reloaded. Here is a sample image feed that can be used to test this example http://absdev.ws:8000/jpg/1/image.jpg – Javier Dec 01 '12 at 23:12
  • I had a couple of tiny bugs in the code I wrote previously. I've edited the code above. You should find that it works now. – Randy Hunt Dec 18 '12 at 18:39
0

If you are working with a static group of pictures - you already know the filenames and it's not going to change - you would load everything into your html initially (that solves the blank screen concern), then use a jquery plugin to rotate/refresh the images at the interval you specify, be it 30 seconds or whatever.

So, your html would look something like this:

<ul>
  <li><img src="[camera ip]/jpg/1/image.jpg"></li>
  <li><img src="[camera ip]/jpg/2/image.jpg"></li>
  <li><img src="[camera ip]/jpg/3/image.jpg"></li>
  ...
</ul>

And then the plugin would cycle through them.

For plugins, use one of these two:

http://nivo.dev7studios.com/

http://jquery.malsup.com/cycle/

Good luck!

Brett
  • 2,775
  • 4
  • 27
  • 32
  • Brett, the address to the image feed never changes. The cycle plugin has some of the functionality I'm looking for but I think those scripts are too heavy for what I'm trying to accomplish. – Javier Nov 01 '12 at 19:53
  • without extensive javascript knowledge, you're going to have to use jQuery with a plugin – Brett Nov 01 '12 at 20:05