0

I am creating a pseudo video in a HTML document by updating the source of an <img> element 30 times a second with a new "frame" I get from a URL on my LAN (an IP security camera).

In Firefox the image seems to be cached so every time I try to get a new "frame", it shows the first one it got after starting the script.

In WebKit browsers (Chrome & Safari) the image I'm downloading is NOT cached, so every few ms the "video" is updated and it looks like an actual video. This is what I want in Firefox.

I have no control over the source of the video. I cannot add a GET parameter to force a re-download because the image that is sent back to me is returned empty when I try it (the server must have specific settings to disable them for security or something).

Is there a workaround while keeping this method? Is there a better method (keep in mind I have NO control over the source - this is the only way to view the video!).

My script (be prepared - it's very rushed)

Jared
  • 2,978
  • 4
  • 26
  • 45
  • Set up a php script that gets the image remotely, then use headers to prevent the browser from caching the image. This might not always work, but it seems to most of the time. – SeinopSys Apr 09 '14 at 08:55
  • @DJDavid98 I considered it but wouldn't that take twice as long, giving it a significant performance hit? I would try it but this was supposed to be a 5 minute job. – Jared Apr 09 '14 at 08:56
  • [This might be a good starting point](http://stackoverflow.com/a/6015792/1344955). These are the headers you need to modify with PHP. – SeinopSys Apr 09 '14 at 08:57
  • If the server isn't sending helpful caching instructions and won't return the image with random query strings, there's no way the front-end can force it to return a fresh image. Is there another server you could use to grab fresh versions of the image and send them back with different expiry headers? – Barney Apr 09 '14 at 08:58
  • @Barney If I go with David's suggestion then I would use the same webserver that my script is run on to grab "fresh" frames. – Jared Apr 09 '14 at 09:03
  • You'd think there'd be HTML(5?) attribute to flag the browser to download a non-cached version. :( – Jared Apr 09 '14 at 09:04
  • If you do have control of the server I'd definitely do that — in fact it's probably the best solution you could hope for. – Barney Apr 09 '14 at 09:06
  • Mmhm. Do you know why Firefox would cache and Chrome & Safari would not? Would it be a specific header thing or just a default behaviour that's different? – Jared Apr 09 '14 at 09:11
  • Yep, seems a specific behavior to FF and IE11. http://stackoverflow.com/questions/21562674/how-to-draw-image-to-canvas-when-the-image-changes-not-the-uri – Arnaud Leyder Apr 09 '14 at 09:17

2 Answers2

0

Just add a timestamp or random number to the end of the image url. This will bypass the caching. Something like:

url += 'c'+ ~~(Math.random() * 10000);

EDIT - Exactly what methods have you tried? Your scriptuses image.src to load the image. Have you tried XHR? If you have, please post that code.

To the best of my knowledge you have two options:

1) Alter the header - Can be done via an intermediary server. If you have a local proxy or are in a position add one, you could possibly use it to tamper with the headers. A tad excessive either way.

2) XHR - While I'd expect XHR to behave similarly to your present approach, there is no guarantee that it will. As such it's worth at least investigating.

Frostie
  • 211
  • 3
  • 6
  • I cannot. It's for an internal project, the source is an IP camera on the LAN. I downvoted because I clearly explained this (and made it bold after your answer) - I have NO control over the source and any attempt to use a `GET` param fails. – Jared Apr 11 '14 at 03:34
  • I appreciate that. I originally updated my answer asking to see what you've already tried, in addition to using the Image object as per your script. This was to rule out human error and get a better idea of what you have, and haven't tried. I've updated it again, hopefully it is a little clearer this time around. – Frostie Apr 11 '14 at 14:11
  • I didn't see the EDIT when I read your answer. I'll have a go at XHR sometime but I agree, I think it'll behave the same. – Jared Apr 14 '14 at 08:18
-1

Add a cache busting parameter to the source address:

container.src = camerasrc + '/cgi-bin/video.jpg' + '?bust=' + (new Date()).getTime();
riccardolardi
  • 1,713
  • 5
  • 20
  • 35
  • 1
    `I cannot add a GET parameter to force a re-download because the image that is sent back to me is returned empty when I try it (the server must have specific settings to disable them for security or something).` - OP – SeinopSys Apr 09 '14 at 08:56