1 .
Evitar la caché
2 .
Recargar la imagen
3 .
Evitando errores
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.
Evitar la caché
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.
Recargar la imagen
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.
Evitando errores
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);
}
En el evento simplemente intentaríamos recargar de nuevo un segundo después, momento
en el que suponemos que ya habrá terminado de subirse la nueva imagen por FTP.
El código final y completo sería:
<html>
<head>
<title>Mi webcam</title>
<script language="JavaScript"><!--
periodo = 60;
imgsrc = document.webcam.src;
buffer = new Image();
buffer.onload = imageChange;
buffer.onerror = imageError;
setTimeout("imageReload()", periodo * 1000);
function imageReload() {
buffer.src = imgsrc + "?d=" + new Date().getTime();
setTimeout("imageReload()", periodo * 1000);
}
function imageChange() {
document.webcam.src = buffer.src;
}
function imageError() {
setTimeout("imageReload()", 1000);
}
// --></script>
</head>
<body>
<img name="webcam" src="webcam.jpg" width="320" height="240" border="0">
</body>
</html>
Artículos
