CODEWITHSUNDEEP
javascripthtmlajaxweb
pookie
pookie

Reputation: 4142

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 an image tag whose src="test.png".

Now, what I want to do is refresh that image (test.png) every 10ms. I know I can do this a number of ways:

The trouble with these approches is that:

A) If the refresh time is less than 250ms, the image does not update

B) The image flickers

Question: How can I make the image refresh every 10ms (or less! faster is better...), without flickering? Looking for some ideas.

Edit

I have tried using setTimeout, as suggested by @tripleb, but there is no difference, that I can tell. 

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

refresh();

Upvotes: 2

Views: 10531

Answers (5)

Victor Radu
Victor Radu

Reputation: 2292

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 query
   setTimeout("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/

Upvotes: 2

J E Carter II
J E Carter II

Reputation: 1496

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.

Upvotes: 0

Dong Nguyen
Dong Nguyen

Reputation: 1269

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

Upvotes: 0

Rohit
Rohit

Reputation: 93

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

Upvotes: 0

TrojanMorse
TrojanMorse

Reputation: 642

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

Upvotes: 0

Related Questions