Refresco de imágenes para Webcam

Citar

Escrito el 05 Ago 2009 01:53 am

Hola a todos.
Tengo un sistema de cámaras que me envía una imagen .jpg vía FTP cada 0.1 segundo.
El problema es que necesito que la imagen se actualice automáticamente para que parezca un video, la secuencia puede ser de 1 segundo o menos si es posible.
Pero solo debe refrescar se la imagen y no la web, ya utilice el siguiente meta:
<meta http-equiv='Refresh' content=10;index.htm>
Pero refresca la pagina y no sirve se pierde el efecto de video.
Conseguí un sitio que explica exactamente lo que necesito pero el javascripts no me funciono me gustaría que lo vean y me entenderán mejor.
http://www.programacion.com/html/articulo/tw_js_webcam/
Las imágenes de mis cámaras se llaman: cam0.jpg, cam1.jpg, cam2.jpg, cam3.jpg y así sucesivamente, si me pueden ayudar hacer un javacripts con estos nombres se los agradecería y compartirlo con todos aquí en el foro.

Por gerardohung

3 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 06 Ago 2009 03:51 am

Con setInterval de javascript. El script es sencillo, sobre todo por la forma en que tienes las imagenes. Veamos, el objetivo es cambiar la url de la imagen cada segundo. Entonces el script sería más o menos así..

Javascript

Código Javascript :

var img = document.getElementById("cam");
var numero_default = 0;
// Asignamos el intervalo de cada segundo 
setInterval(function(){
numero_default++;
img.src = "cam"+numero_default+".jpg";
}, 1000);

HTML

Código HTML :

<img src="default.jpg" alt="cam" id="cam" />

Prueba, a ver si es lo que necesitas. Saludos.

Por ivanfc0o

Claber

391 de clabLevel

3 tutoriales

Genero:Masculino

Envíale un mensaje privado Web

Hardcore UI

@ivanfc0o

Citar

Escrito el 10 Ago 2009 12:39 am

Hola mil gracias por ayudar me.
Traté y coloque el código en el <head> y le agrege <script language="JavaScript"> y después coloque lo demas
var img = document.getElementById("cam");
var numero_default = 0;
// Asignamos el intervalo de cada segundo
setInterval(function(){
numero_default++;
img.src = "cam"+numero_default+".jpg";
}, 1000);
Y en </html>
<img src="default.jpg" alt="cam" id="cam" />
Pero no sé si lo estoy haciendo mal pero la pagina se pone en blanco y desaparece todo.
Si puedes revisar te lo agradecería.
Gracias de nuevo y saludos.

Por gerardohung

3 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 10 Ago 2009 04:10 am

Seguramente es por que el javascript se ejecuta antes de que la imagen se cargue. Trata así:

Código Javascript :

function start(){
var img = document.getElementById("cam"); 
var numero_default = 0; 
setInterval(function(){ numero_default++; img.src = "cam"+numero_default+".jpg"; }, 1000);
}
window.onload = start;

El html está bien. Prueba si te sirve.

Por ivanfc0o

Claber

391 de clabLevel

3 tutoriales

Genero:Masculino

Envíale un mensaje privado Web

Hardcore UI

@ivanfc0o

Citar

Escrito el 13 Ago 2009 10:12 pm

Hola.
De Nuevo gracias por tu ayuda.
Sigo teniendo el mismo problema te coloco tal cual tengo todo.
Si puedes ayudarme colocando como quedaría, sería mejor porque creo que puedo ser yo que lo estoy colocando mal.
Mil gracias de nuevo.
Saludos
------------------------

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body>
<table width="70%" border="0" align="center">
<tr>
<td><div align="center"><img src="cam0.jpg" width="320" height="240" alt="esperando imagen de la camara" longdesc="esperando imagen de la camara" /></div></td>
<td><div align="center"><img src="cam1.jpg" alt="esperando imagen de la camara" width="320" height="240" longdesc="esperando imagen de la camara" /></div></td>
</tr>
<tr>
<td><div align="center"><img src="cam2.jpg" alt="esperando imagen de la camara" width="320" height="240" longdesc="esperando imagen de la camara" /></div></td>
<td><div align="center"><img src="cam3.jpg" alt="esperando imagen de la camara" width="320" height="240" longdesc="esperando imagen de la camara" /></div></td>
</tr>
</table>
</body>
</html>

Por gerardohung

3 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 15 Ago 2009 02:11 am

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
       <title>Titulo</title>
       <script type="text/javascript">
                 function start(){ 
                    var img = document.getElementById("cam");  
                    var numero_default = 0;  
                    setInterval(
                              function(){ 
                               numero_default++; 
                               img.src = "cam"+numero_default+".jpg"; 
                                             }, 3000); // aumentado a 3 segundos para dar tiempo a cargar la imagen
                                      } 
                    window.onload = start;
       </script>
       </head>
       <body>
            <!-- Imagen -->
           <img src="default.jpg" alt="cam" id="cam" />
       </body>
   </html>

Ese sería todo el código, pruebalo.
Saludos.

Por ivanfc0o

Claber

391 de clabLevel

3 tutoriales

Genero:Masculino

Envíale un mensaje privado Web

Hardcore UI

@ivanfc0o

Citar

Escrito el 11 Sep 2009 06:42 pm

Ya Estoy de vuelta de unas vacaciones

Gracias Amigo.
Trate pero no me funciono o no sé si fui yo que no lo hice bien.
Te explico:
Tengo cuatro cámaras y cada una se llama: cam0.jpg - cam1.jpg - cam2.jpg - cam3.jpg
Y me gustaría que se actualizaran solo las imágenes cada segundo (cam0.jpg - cam1.jpg - cam2.jpg - cam3.jpg) y no la pagina.
Por vía ftp suben las imágenes cam0.jpg - cam1.jpg - cam2.jpg - cam3.jpg cada 0.1 segundos aproximadamente a la carpeta donde tengo el index con este código.
Abajo te envió tal cual está mi código a ver si puedes ayudarme.
De antemano te doy mil gracias por tu apoyo.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sin Titulo</title>
</head>
<body>
<table width="70%" border="0" align="center">
<tr>
<td>
<div align="center"><img src="cam0.jpg" width="320" height="240" alt="camara" longdesc="camara" /></div>
</td>
<td>
<div align="center"><img src="cam1.jpg" alt="camara" width="320" height="240" longdesc="camara" /></div>
</td>
</tr>
<tr>
<td>
<div align="center"><img src="cam2.jpg" alt="camara" width="320" height="240" longdesc="camara" /></div>
</td>
<td>
<div align="center"><img src="cam3.jpg" alt="camara " width="320" height="240" longdesc="camara" /></div>
</td>
</tr>
</table>
</body>
</htm

Por gerardohung

3 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 30 Sep 2009 06:13 pm

creo que deberia ser algo asi como

Código :

<script type="text/javascript"> 
function recargar(id_imagen){
var img = document.getElementById(id_imagen)
img.src=""
img.src=id_imagen+".jpg"
}
function recargar_todas(){
recargar("cam0");
recargar("cam1");
recargar("cam2");
recargar("cam3");
}
setInterval(recargar_todas, 1000) //Las recarga cada segundo
</script>

y en las etiquetas de las imagenes le agregas la id

Código :


<div align="center"><img src="cam0.jpg" alt="camara " width="320" height="240" longdesc="camara" id="cam0"/></div>

Por Lord Zorel

17 de clabLevel

Envíale un mensaje privado Web

Chile

Citar

Escrito el 30 Sep 2009 09:51 pm

Muchas gracias por tu apoyo
Pruebo y te aviso si me funciono.
Gracias.

Por gerardohung

3 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 30 Sep 2009 10:42 pm

Amigo Lord Zorel de nuevo muchas gracias por tu apoyo.
Lamentablemente no funciona.
Si se te ocurre otra opción avísame a ver si logro resolverlo
Mil Gracias.
gh

Por gerardohung

3 de clabLevel

Envíale un mensaje privado Web

Refresco de imágenes para Webcam

Escribe una respuesta rapida