[SOLUCIONADO] Carga de img

namorha · #1 (**permalink**) 17/03/2013, 05:58

Buenas !!

Os cuento mi problema, tengo una cámara ip que me sube una img cada x segundos a mi servidor y me gustaría publicarla en mi web, pero la idea es cuando se vayan cargando las nuevas img no se aprecie la precarga.

Lo he probado con ASP pero si se nota la carga de la nueva img.

La idea es que el usuario vea las img como si fuera un video, sin notar que son img independientes.

Alguna idea?

Muchísimas gracias !!

emprear · #2 (**permalink**) 17/03/2013, 06:57

No digamos tanto como un video, pensá que un video tiene habitualmente entre 23/30 cuadros por segundo y la captura de foros y su guardados en el disco va a insumir bastante más tiempo.
Ahora en cuanto a evitar el parpadeo, bastaría que muestres la imagen solo cuando esta se cargó

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Cam</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
/* script */
var timer;
function camara(){
var fecha = new Date();
var ImagenPrueva = new Image();
ImagenPrueva.src = "mapa.jpg?" + fecha.getTime();
ImagenPrueva.onload = function(){
document.getElementById('camara').src = this.src;
}
}
 
window.onload= function(){
    timer = setInterval(camara, 5000);
}
//]]>
</script>
</head>
<body>
<img src="mapa.jpg" alt="camara" widht="400" height= "440" id="camara" />
</div>
</body>
</html>

Otra cosa a considerar es como trabaja tu cámara, algunas almacena la foto siempre con el mismo nombre, otras permiten guardar varias imágenes distintas. En mi caso usa el mismo nombre y se agrega el parametro fecha.getTime() para hacer de src un nombre único y evitar recuperar una imagen de la cache en lugar de la última generada
Saludos

namorha · #3 (**permalink**) 17/03/2013, 07:11

Gracias !!! Funciona perfecto !!

namorha · #4 (**permalink**) 19/03/2013, 04:46

Hola de nuevo, estaba pensando en como mejorar esto para que parezca lo mas real posible.

Cuando hay un número alto de visitas, hay veces que la img no carga correctamente o se nota la carga.

Se me ha ocurrido, subir las img al server y guardar la ruta en una base de datos con 60 registros, estos registros serán las 60 imágenes que habrá en un minuto. La idea es que estas imágenes vayan desfasadas un minuto y que cuando un usuario vea la imagen, realmente este viendo las que ya esten cargadas en el server y no las que esten por cargar.

Como podemos modificar el script para que cargue img con distinto nombre? Este nombre será secuencial, por ejemplo camara01, camara01 ... camara 59

Gracias y saludos

emprear · #5 (**permalink**) 19/03/2013, 06:50

Cita:

Iniciado por namorha

Hola de nuevo, estaba pensando en como mejorar esto para que parezca lo mas real posible.

Cuando hay un número alto de visitas, hay veces que la img no carga correctamente o se nota la carga.

Se me ha ocurrido, subir las img al server y guardar la ruta en una base de datos con 60 registros, estos registros serán las 60 imágenes que habrá en un minuto. La idea es que estas imágenes vayan desfasadas un minuto y que cuando un usuario vea la imagen, realmente este viendo las que ya esten cargadas en el server y no las que esten por cargar.

Como podemos modificar el script para que cargue img con distinto nombre? Este nombre será secuencial, por ejemplo camara01, camara01 ... camara 59

Gracias y saludos

Si los nommbres de las imágenes ya están predefinidos, podrías hacer algo como esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>timers</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
var i=1;
 
function ciclo(){
var fecha = new Date();
var ImagenPrueva = new Image();
ImagenPrueva.src = 'camara'+i+'.jpg?' + fecha.getTime();
ImagenPrueva.alt = 'camara'+i+'.jpg';
ImagenPrueva.onload = function(){
document.getElementById('camara').src = this.src;
}
           i++;
          if(i > 10){
            i = 1;
            } 
}
 
window.onload= function(){
var f = setInterval('ciclo()',1000); // ajustar el tiempo
}
//]]>
</script>
</head>
<body>
<img src="camara1.jpg" alt="camara1.jpg" width="400" height= "440" id="camara" />
</body>
</html>

Pero aqui se te presenta otro problema, ya que habría que sincronizar de algún modo, el tiempo en que cada imagen tarda en subir al servidor(el cual no se puede conocer con exactitud), con el intervalo de tiempo en que el ciclo se repite, es posible que al llegar a la imagen 60, la 1 halla cambiado, pero la 2 no. habría que incrementar el tiempo de refresco, pero entonces ya se perdería el efecto de animación.
Si se me ocurre otra cosa te aviso, pero sin poder probar en tiempo real como trabaja tu camara y la subida de archivos, no es facil
Saludos

namorha · #6 (**permalink**) 19/03/2013, 08:44

Hola, yo pensé en eso, por eso te decía lo de almacenar la ruta o el nombre de la imagen en la base de datos y así asegurarnos que esa img esta en el server.

Con esto, daría igual que estén en orden. Lo suyo es que el script haga consulta a la base de datos o que lea los 60 últimos registros.

emprear · #7 (**permalink**) 19/03/2013, 10:24

Es más o menos lo mismo, el tema pasa por verificar que la imagen ya esté en el disco del servidor.
Se me ocurre una idea, pero habría que desarrollarla,
tus imágenes se guardan todas en una misma carpeta,
esta carpeta es leída con php con readdir, ordenas lo archivos x fecha y creas un array de imagenes para mostrarlos con javascript, primero la más vieja y por último la mas nueva.
Puede que en la sucesión (por lo que comenté de los tiempos de subida) alguna imagen sea pasada por alto, epro el orden va a ser el correcto.

De todas maneras, hay algo que no se altera respecto de la primer solución que te propuse, si vos hacés

Código:

ImagenPrueva.onload = function(){
document.getElementById('camara').src = this.src;
}

no debería haber "espacios" en blanco durante la presentación.

Saludos

namorha · #8 (**permalink**) 05/04/2013, 06:38

Hola, si quieres te puedo pasar por privado la url de la cam y así puedes trastearla.