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.
Código HTML:
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.
Código HTML:
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:
Código HTML:
<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> Espero q te sirva de Algo hasta luego...
