feed di immagine aggiornamento con jQuery/ajax

Question

Ho una telecamera Axis che ha più uscite, una delle quali è un'immagine jpg. Questa immagine è ancora presa dalla fotocamera nel momento in cui viene caricata. Vorrei implementare un modo per ricaricare l'immagine (ogni 30 secondi) senza dover ricaricare l'intera pagina, tuttavia, vorrei che il codice scarichi completamente l'immagine prima di aggiornarla per evitare di avere uno schermo vuoto.

Ho letto e la cosa più vicina che ho trovato è stato questo post Using AJAX/jQuery to refresh an image ma la differenza è che il feed di immagini che ho proviene dalla fotocamera stessa e non da un file php. Ho provato un paio di modi per farlo funzionare con il mio URL ma ho fallito a causa della mancanza di conoscenza di javascript.

Il codice che sto utilizzando in questo momento per tirare su l'immagine rappresenta soltanto un semplice tag immagine ...

<img src="[camera ip]/jpg/1/image.jpg">

e ogni volta che si aggiorna la finestra del browser ti dà una fotografia istantanea della flusso video corrente.

Qualsiasi aiuto sarebbe molto apprezzato!

saluti,
Javier

Answer 1

non riuscivo a trovare una webcam online con un'immagine fresca per testare questo contro, ma credo che questo dovrebbe per il trucco per voi ... o almeno farti davvero vicino ...

<script> 
// URL to your cam image 
var cam_image = 'http://absdev.ws:8000/jpg/1/image.jpg'; 

var buffer = {}; 
function preload() { 
    buffer = new Image(); 
    // attaching the seconds breaks cache 
    buffer.src = cam_image + '?' + (new Date()).getTime(); 
    buffer.onload = function() { 
     setTimeout(preload, 30000); // 30 seconds refresh 
     document.getElementById('myimg').src = buffer.src; 
    } 
} 
preload(); 
</script> 

Answer 2

Se si sta lavorando con un gruppo statico di immagini - si conosce già i nomi dei file e non cambierà - si carica tutto in tuo html inizialmente (che risolve la schermata vuota preoccupazione), quindi utilizzare un plug-in jquery per ruotare/aggiornare le immagini all'intervallo specificato, che si tratti di 30 secondi o qualsiasi altra cosa.

Così, il vostro html sarebbe simile a questa:

<ul> 
    <li><img src="[camera ip]/jpg/1/image.jpg"></li> 
    <li><img src="[camera ip]/jpg/2/image.jpg"></li> 
    <li><img src="[camera ip]/jpg/3/image.jpg"></li> 
    ... 
</ul> 

E poi il plugin sarebbe ciclo attraverso di loro.

per i plugin, utilizzare uno di questi due:

http://nivo.dev7studios.com/

http://jquery.malsup.com/cycle/

Buona fortuna!