0

I have Jcrop on a video source, <img src ="http://ip_address/stream"> The html page displays the container with the video inside, but it is a still image. Once I click on the image, it updates. Once I click/drag to crop the video area, the area within the crop selection shows the video updating.

How do I get it so that the video stream is constantly updating before, and while, making a crop selection?

EDIT: using the Inspect Element tools, on Network Monitor, the Status Code for the page that continuously updates the video regardless of having made a selection is: 200 OK

whereas the Status Code for the page with the video that does not update unless clicked is: 304 Not Modified

FullMetalScientist
  • 71
  • 2
  • 10
  • For some reason, it works sometimes and not other times. Not sure why. – FullMetalScientist Feb 17 '17 at 12:50
  • 1
    if you are using `img` it won't update automagically, you'd have to trigger it (javascript refresh of the source perhaps), and if the image name/metatdata stays the same the browser might just used cached image (so would need a cachebuster querystring or similar) – Offbeatmammal Feb 17 '17 at 15:29
  • @Offbeatmammal Thanks, upvoted for the use of the word 'automagically'. How do I javascript refresh and what is a cachebuster querystring? Also thinking it may be to do with CDN scripts needing to be fetched, hence the `GET http://...cdn_link... [HTTP1.1 304 NOT MODIFIED ..ms]` notifications. – FullMetalScientist Feb 17 '17 at 15:53
  • added an example that I hope will help below – Offbeatmammal Feb 17 '17 at 20:29

1 Answers1

0

In order to force a refresh of the image every (say) 1 second you need to:

  1. Use a javascript setInterval
  2. Cachebust the image source if the filename isn't changing

for instance the following code

<img id="vidimg" src="Assets/img.jpg">
<script>
  setInterval(function(){ 
      document.getElementById("vidimg").src="Assets/img.jpg" + 
      "?cachebuster=" + Math.round(new Date().getTime() / 1000).toString() },
  1000);
</script>

the setInterval(... ,1000); causes the function within to repeat every 1000 milliseconds (once a second) - you may want to adjust this depending on the download speed/refresh rate of the image source you are using. The function can be inline, as I have done here, or if there is more complex logic involved you can make it a named function and reference that instead.

the document.getElementById("vidimg").src="Assets/img.jpg" simply reloads the image source - on its own this may cause the browser to attempt to be smart if the image appears to be the same as what is already cached, so you need to add a random parameter to the filename in order to force it to re-fetch from the server, hence the + "?cachebuster=" + Math.round(new Date().getTime() / 1000).toString() which just adds a parameter based on the current time.

If your source doesn't have a filename (as in the example in your question) then adding the cachebuster should still work.

As I don't have access to a source like the one you describe I've not been able to test this, but in theory it should work. Alternatively can you not use a <video src ="http://ip_address/stream"> to access it?

Offbeatmammal
  • 7,970
  • 2
  • 33
  • 52