Normalmente, cuando ponemos imágenes de nuestra webcam, empleamos un programa para subir una imagen cada minuto o medio minuto por FTP. Si no tenemos ninguno hay varias opciones gratuitas para realizar esta labor, como Dorgem, Fwink o Cam Commander. El problema es lograr que el navegador no almacene la primera imagen en la caché y que la recargue periódicamente sin emplear nada más que HTML y Javascript.
El truco para evitar la caché es de esas cosas que no se te ocurren y que, cuando te lo dicen, exclamas: ¡anda, pues claro! ¡Seré idiota! O al menos yo me lo dije a mi mismo cuando leí como hacerlo. El truco consiste en que, puesto que el navegador guarda en la caché la imagen con un nombre determinado, lo mejor es que cada vez que queramos recargarla la pongamos un nombre distinto. Como no es cosa de estar subiendo la imagen cada pocos segundos con un nombre distinto y actualizando a su vez el HTML, lo que haremos será emplear los parámetros que se admiten en cualquier URL. Así pues, la siguiente imagen:
<IMG SRC="webcam.jpg?d=1298632">Será distinta para la caché del navegador que:
<IMG SRC="webcam.jpg?d=1097652">Sin embargo, en ambas ocasiones estaremos cargando la imagen webcam.jpg.
Lo siguiente que debemos hacer es recargar la imagen cada cierto tiempo. Para ello, lo primero que debemos hacer es ponerle a la imagen un nombre significativo:
<img name="webcam" src="webcam.jpg">Luego, crearemos un objeto imagen que leerá la nueva toma de nuestra cámara web y, cuando haya terminado, la cambiará por la antigua. Si no lo hacemos así, en lugar de ver como una imagen sustituye a la otra de forma inmediata, veremos como queda el recuadro en blanco y finalmente se recarga la nueva, línea a línea.
periodo = 60; // segundos entre recargas imgsrc = document.webcam.src; buffer = new Image(); buffer.onload = imageChange; setTimeout("imageReload()", periodo * 1000); function imageReload() { buffer.src = imgsrc + "?d=" + new Date().getTime(); setTimeout("imageReload()", periodo * 1000); } function imageChange() { document.webcam.src = buffer.src; }El código hace lo siguiente: crea el objeto imagen al que se llama buffer y le asigna a su evento onload una función que copia la imagen cargada en el buffer a la imagen visible. Por otro lado, pone un temporizador que se ejecuta cada periodo segundos, y que llama a una función que comienza la carga de la nueva imagen en el buffer. Para que en cada ocasión que se ejecute cargue una imagen distinta empleamos el truquito que ya hemos visto, poniendo como parámetro el tiempo transcurrido desde el 1 de enero de 1970, lo que nos garantiza que cambie entre recargas.
Este sistema está bien, pero tiene un pequeño problema. ¿Y si el usuario intenta recargar la imagen mientras la estamos subiendo. En tal caso dará error, no se ejecutará el evento onload porque no se cargará la imagen, y por tanto el temporizador se parará. Para evitarlo, emplearemos un controlador del evento onerror.
buffer.onerror = imageError; function imageError() { setTimeout("imageReload()", 1000); }Usuarios que han visto este tema también han visto...
- Los Bucles en JavaScript
- Listas con descripción en HTML
- Recarga de página controlada con JavaScript
- Cómo pasar variables entre páginas con javascript
- Frase al azar con Javascript
- Versión imprimible de este documento
- Enviar por e-mail este documentoInformación legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.