Actualizar una img cada 5 segundos

NkMad · #1 (**permalink**) 23/07/2009, 11:52

Hola a todos.

Llevo todo el dia buscando e intentanto hacerlo yo solo pero no me funciona, no se que es lo que hago mal. A ver si me pueden ayudar. Tengo una imagen cargada en una pagina HTML, esta imagen esta en un servidor FTP con lo cual hace falta contraseña para verla. El caso es que viene de una camara de seguridad y se actualiza en el FTP cada 5 segundos y lo que estoy intentando hacer en la pagina HTML es eso, que se actualice. Para ello he creado una funcion que he inluido dentro de <head>, la funcion es la siguiente.

Código:

function imagen() { 
// aqui cojo la imagen por el ID que es 'cam1'
  document.getElementById('cam1').src = "ftp://usuario:contraseña[arroba]direccionftpcom";
}

y luego puesto en body

<body onload='setInterval("imagen()",5000)'>

la verdad, creo que me falta el comando de ACTUALIZAR en la funcion pero es que ando totalmente perdido. Me podeis ayudar.
Gracias de antemano.

Legoltaz · #2 (**permalink**) 23/07/2009, 12:21

Quítale las comillas a la función en setInterval.

NkMad · #3 (**permalink**) 23/07/2009, 12:31

sigue sin funcionar, no la actualiza ni hace nada, puede hacer algo mas que este mal? He visto muchas funciones para hacer esto y las he intentado casi todas y ninguna funciona, algo estoy haciendo mal.

Gracias.

Legoltaz · #4 (**permalink**) 23/07/2009, 13:32

Prueba así: setInterval(imagen,5000);

NkMad · #5 (**permalink**) 23/07/2009, 13:50

Hola de nuevo y gracias por tu respuesta pero sigue sin funcionar, jeje y me esta entrando un dolor de cabeza, jejej.

Te pongo el script completo que tengo

<head>
<script type="text/javascript">
function imagen() {
document.getElementById('cam1').src = "ftp://USER:PASSWORD[arroba]ftp.SERVERCOM/data/cctv/tempcam1/portonnave.jpg";
}
</script>
</head>

La linea del body es esta:

<body onload=setInterval(imagen,5000)>

Ya te digo que no funciona, lo he intentado de mil maneras, algo hay mal puesto, he comprobado que le haya dado a la imagen el id CAM1 y lo tiene, tambien te lo pongo:

<img id="cam1" src="ftp://USER:[email protected]/data/cctv/tempcam1/portonnave.jpg" style="visibility: visible" />

Gracias otra vez por echarle un vistazo.

#6 (**permalink**) 23/07/2009, 13:50

Me parece que el problema es que la ruta es exactamente igual, y por eso el navegador no se molesta en descargar el archivo de nuevo. No sé si via FTP funcione, pero cuando esto sucede en un archivo descargado via HTTP se suele solucionar agregando alguna cadena aleatoria a la URL, de tipo

imagen.png?algo=12355

variando el "algo" para que cada vez sea diferente.
Pruébalo, no se pierde nada :)

A propósito, la forma más apropiada para la etiqueta BODY en este caso es

<body onload="setInterval(imagen, 5000)">

Saludos.

NkMad · #7 (**permalink**) 23/07/2009, 13:54

Hola Alvaro.

Si, lo se por eso he decidido meter la imagen en el ftp en el que hay que logearse antes de poder entrar y a su vez dentro de una carpeta que no es la de html que es la que contiene los archivos para la web. Con eso he ganado "algo" en seguridad, se que no es mucho pero me vale. En cuanto a eso de la alerta lo veo un poco sucio, necesitaria que salga limpia sin que haya que tocar nada, pero muchas gracias por tu ayuda.

NkMad · #8 (**permalink**) 23/07/2009, 13:57

Es que no creo que sea por eso, el caso es que la imagen se muestra perfectamente en la pagina y si le doy a actualizar en el navegador o a F5 se actualiza sin problema, por eso me extraña. Voy a probar quitandole el login y accediendo solo a la pagina, con suerte hago mas corta la url y a lo mejor no pide de nuevo el login.

NkMad · #9 (**permalink**) 23/07/2009, 14:21

Si que actualiza, lo acabo de comprobar pero no lo muestra en la pagina y no se por que. Si actualizas la pagina si pero la imagen por si sola no se actualiza, hay que actualizar la pagina tambien, debe ser que las imagenes no pueden actualizarse de tal modo, pero no es lo que yo tenia entendido, si no me queda mas remedio y aunque quede un poco mas feo en vez de eso le meto un document.location.reload() cada 5 seg y me valdrá de momento. Por cierto alguno sabeis como puedo guardar esa imagen sin necesidad de abrirla en un popup aparte ni nada de eso? He probado con varios scripts y no lo he conseguido. Gracias de antemano.

buzu · #10 (**permalink**) 23/07/2009, 14:48

el problema (creo yo) es que la ruta es la misma, el navegador no se está molestando en abrir otra conexión y cambiar la imagen dado que la imagen es igual (para el navegador). Se me ocurre que crees use el objeto imagen (new Image) en lugar de simplemente querer cambiar la ruta de la imagen, de ese modo, pude que funcione.

NkMad · #11 (**permalink**) 23/07/2009, 15:10

tu crees que puede ser eso? el caso es que la imagen esta dentro de una pagina html, y yo estoy llamando a la jpg no al html. Bueno de todos modos lo voy a probar, si me lo explicas un poco, que por ahi ya me pierdo. Gracias,

deirdre · #12 (**permalink**) 23/07/2009, 17:24

Hola NkMad

Por lo que comentas en tu post 8 sobre que si haces un reload en el navegador (o pulsas F5 -es lo mismo-), la nueva imagen sí se carga, me pregunto ¿no será que el browser tira de la imagen que tiene en caché local en lugar de cargar la nueva?.

Si estoy en lo cierto, debe bastar poner estos metas entre <head> y </head> para que busque las nuevas y no cargue las imágenes del caché:

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="expires" content="0">

Perdón si estoy en un error.

Comenta algo.

Bye

NkMad · #13 (**permalink**) 23/07/2009, 23:19

Hola deirdre:

Pues lo he pensado, de hecho ayer a ultima hora lo estuve probando, no exactamente eso pero algo parecido, por supuesto, no lo consegui, jejej. Ahora stoy en el curro, pero cuando llegue lo pruebo. Gracias por tu ayuda, luego os digo algo. Bye.

NkMad · #14 (**permalink**) 24/07/2009, 13:16

Hola de nuevo.

Nada, sigue sin actualizar, la funcion de actualizar la hace pero no carga la nueva imagen, se os ocurre alguna otra idea? por que yo lo veo bastante raro ya, jeje. Gracias y un saludo.

buzu · #15 (**permalink**) 24/07/2009, 14:50

probaste como te dije? La verdad que lo único que se me ocurre que pueda estar pasando es que no está cargando la imagen por que la ruta no cambia. Intentaste con la solución que propone AlvaroG?

deirdre · #16 (**permalink**) 24/07/2009, 17:34

Lo extraño es que, según dice NkMad en el post 8, si pulsa F5 y actualiza la carga en el browser, sí funciona... !!

Así que no puede ser tema de rutas.

caricatos · #17 (**permalink**) 25/07/2009, 03:16

Hola:

No logro entender la razón para usar el protocolo ftp... hay más formas de proteger imágenes, por ejemplo con variables de sesión y scripts php... que por ejemplo muestre una imagen distinta de la requerida si no se ha iniciado una sesión (correctamente)... y sobre el tema concreto... Has probado poner datos "random" para evitar la caché como te ha comentado AlvaroG...

... las veces que han preguntado cosas parecidas con esa solución se han resuelto los temas...

Saludos

NkMad · #18 (**permalink**) 25/07/2009, 03:51

Hola caricatos.

El por que de usar FTP y no usar lo que me dices es por que el servidor para el que estoy haciendo este sistema no tiene contrado PHP ni nada, es un plan simple y solo tiene un par de cuentas de correo, una FTP y HTML. De todos modos no se como podría hacer eso del random, estoy pez en ese tema, si me lo pudieras explicar un poco te estaría muy agradecido y a ver si así funcionase y dejo de daros el coñazo, jejej, tambien he intentado poner lo que me comentaba deirdre, el poner unas meta para evitar que use la cache y tampoco ha funcionado. El tema de las rutas, es que si hubiera algun problema con la ruta no cargaría la imagen desde un principio no?

La verdad no se, si me explicas un poquillo eso de hacer un randon te lo agradezco. Muchas gracias de antemano.

Saludos.

P.D. Se me olvidaba comentaros que la imagen que sube la cámara se llama "portonnave.jpg" y lo que hace es sobreescribirla en el servidor cada 5 segundos. De todos modos, corregirme si me equivoco pero eso del randon es un algoritmo que se hace en PHP no?, bueno me voy a callar que estoy hablando de algo que no se.
Tambien intenté hacer lo que comentaba buzu, el newImage y me daba error en la pagina diciendo que no se puede asignar el objeto newImage a esa imagen o algo así, lo mismo lo escribí mal.

Saludos.

NkMad · #19 (**permalink**) 26/07/2009, 13:39

Alguien me puede explicar si tiene un ratillo como hacer lo que decia en el post anterior? por favor?

Gracias.

buzu · #20 (**permalink**) 26/07/2009, 15:12

Estas intentando hacer algo como una cámara de vigilancia? Bueno, no importa, eso solo es para saciar mi insaciable curiosidad.

Prueba con:

<head>

Código javascript:

Ver original<script type="text/javascript">
function imagen() {
     var rand = Math.random() * 10000;
     document.getElementById('cam1').src = "ftp://USER:PASSWORD[arroba]ftp.SERVERCOM/data/cctv/tempcam1/portonnave.jpg?r=" + rand;
}
</script>

Espero te sirva.

NkMad · #21 (**permalink**) 26/07/2009, 23:27

Hola buzu.

Gracias por tu respuesta, te agradezco mucho tu ayuda. No importa tu curiosidad, jeje, no estoy intentanto hacer una camara de seguridad, es una camara de seguridad de una nave y sube al servidor FTP una imagen cada 5 segundos, lo que intento hacer como ya comenté es hacer que se pueda ver a traves de internet desde cualquier parte del mundo y no solo en local como hasta ahora. Ahora estoy trabajando, cuando llegue a casa pruebo el codigo que me has dejado, ojalá funcione. Luego te digo algo.

Gracias de nuevo.
Un saludo.

buzu · #22 (**permalink**) 27/07/2009, 13:40

Bueno, pues realmente espero que te funcione el código.

Saludos