Refresh An Image In The Browser Every X Milliseconds

I have a server (AWS instance), which spits out an image file test.png every, say, 10ms. I also have a webpage on the server called, say, index.html. Within that index.html, I have

Solution 1:

the second method would be the best your issue is probably that you are using setInterval, this not really a good method as it always executes ignoring if the previous call is ready or not. That is probably why for small timeouts it just "locks" try

function refresh(){
   //update src attribute with a cache buster querysetTimeout("refresh();",10)
}
refresh();

a recurring function will not start a new refresh until the first is complete.

P.S. 10 milliseconds is probably WAY to fast for any real world application

UPDATE: 10 mils is way to fast for the browser to render however you gen just get the browser to update as fast as it possibly can by doing this: http://jsfiddle.net/zdws1mxv/

Solution 2:

How about asigning a random Math.random() to the end of the url and just using a setInterval to call and replace the image with a new random again every 10ms, the 10ms is very fast though. like they said above. Im not sure the purpose of this.

Example

HTML

<img src="http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg"id="myImage" />

JS

var myImageElement = document.getElementById('myImage');
myImageElement.src = 'http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg?rand=' + Math.random();

setInterval(function() {
    var myImageElement = document.getElementById('myImage');
    myImageElement.src = 'http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg?rand=' + Math.random();
    console.log(myImageElement);
}, 10);

---

Fiddle - https://jsfiddle.net/ToreanJoel/11fk17ck/1/

In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) , the minimum timeout value for nested timeouts was 10 ms.

hope this helped someone

Solution 3:

Use the setInterval() method of the jquery to add the time interval. It takes interval in milisecond as parameter.

Solution 4:

How about streaming? You can use node.js to push image data to client via web socket.

Solution 5:

As discussed in comments, 10ms (1/100th of a second) is a bit quick for the mechanisms you are trying to use. Consider that full motion video is typically 30 frames per second (100 frames per second would be high speed video playback, not something a browser will well support by just pushing image requests).

Since it sounds like what you want to accomplish is streaming video, I can recommend the following as what we use here:

Streaming video source: https://obsproject.com/ Open Broadcast Project - you can use a variety of methods offered by this platform to produce a video stream. You can produce an rtmp stream with this.

Nginx Web Server: https://www.nginx.com/resources/wiki/ - handles rtmp streams very well.

Flowplayer: http://flash.flowplayer.org/plugins/streaming/rtmp.html - we put this on the nginx box and embed it in a web page served from there.