Aggiorna un’immagine nel browser ogni x millisecondi

Ho un server ( istanza AWS ), che sputa un file immagine test.png ogni, per esempio, 10 ms.

Ho anche una pagina web sul server chiamata, ad esempio, index.html . All’interno di index.html , ho un tag immagine di cui src="test.png" .

Ora, quello che voglio fare è aggiornare quell’immagine ( test.png ) ogni 10 ms. So che posso farlo in diversi modi:

  • Usa JS per ricaricare la pagina ( location.reload(); )
  • Usa JS per aggiornare l’attributo src ( setInterval(refresh(),10); //with timestamp per forzare il caricamento del browser – non dalla cache)
  • Usa JS e Ajax per colpire il server per un URL immagine Usa un metatag HTML
  • eccetera…

Il problema con questi approcci è che:

A) Se il tempo di aggiornamento è inferiore a 250 ms, l’immagine non si aggiorna

B) L’immagine sfarfalla

Domanda: Come posso fare l’aggiornamento dell’immagine ogni 10 ms (o meno! Più veloce è meglio …), senza sfarfallio? Alla ricerca di alcune idee.

modificare

Ho provato a usare setTimeout, come suggerito da @ tripleb, ma non c’è differenza, che posso dire.

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

il secondo metodo sarebbe il migliore è che probabilmente stai usando setInterval, questo non è un buon metodo in quanto esegue sempre l’ignoranza se la chiamata precedente è pronta o meno. Questo è probabilmente il motivo per cui per piccoli timeout si prova semplicemente “serrature”

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

una funzione ricorrente non avvierà un nuovo aggiornamento fino al completamento del primo.

PS 10 millisecondi è probabilmente MODO di digiunare per qualsiasi applicazione del mondo reale

AGGIORNAMENTO: 10 millisecondi è un modo per velocizzare il rendering del browser, in ogni caso il gen si limita ad aggiornare il browser il più velocemente ansible facendo ciò: http://jsfiddle.net/zdws1mxv/

Che ne dici di assegnare un Math.random() casuale alla fine dell’URL e usare semplicemente un setInterval per chiamare e sostituire l’immagine con un nuovo random ogni 10 ms, il 10ms è molto veloce. come hanno detto sopra. Non sono sicuro dello scopo di questo.

Esempio

HTML

  

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 realtà, 4 ms è specificato dalle specifiche HTML5 ed è coerente tra i browser rilasciati nel 2010 e successivi. Prima (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), il valore di timeout minimo per i timeout nidificati era 10 ms.

spero che questo abbia aiutato qualcuno

Utilizzare il metodo setInterval () del jquery per aggiungere l’intervallo di tempo. Ci vuole intervallo in millisecondi come parametro.

Che ne dici di streaming? È ansible utilizzare node.js per inviare dati immagine al client tramite socket Web.

Come discusso nei commenti, 10 ms (1/100 di secondo) sono un po ‘veloci per i meccanismi che si sta tentando di utilizzare. Considera che il video in full motion è in genere di 30 fotogrammi al secondo (100 fotogrammi al secondo corrispondono alla riproduzione di video ad alta velocità, non qualcosa che un browser può supportare semplicemente spingendo le richieste di immagini).

Dato che sembra che quello che vuoi realizzare sia lo streaming video, posso raccomandare quanto segue come ciò che usiamo qui:

Streaming video source: https://obsproject.com/ Open Broadcast Project: è ansible utilizzare una varietà di metodi offerti da questa piattaforma per produrre uno streaming video. È ansible produrre un stream rtmp con questo.

Nginx Web Server: https://www.nginx.com/resources/wiki/ – gestisce i flussi rtmp molto bene.

Flowplayer: http://flash.flowplayer.org/plugins/streaming/rtmp.html – lo mettiamo nella scatola di nginx e lo incorporiamo in una pagina web servita da lì.