Por fin se puede programar la cámara IP Zaapa CIPRW (ZA-CIPRW) fácilmente

28 respuestas

Hacía tiempo que no volvía a escribir sobre la cámara ip Zaapa CIPRW. Escribí dos artículos: Uno sobre la descripción de la cámara en septiembre de 2008 y otro sobre cómo programarla en .NET en Agosto de 2009.

Lo cierto es que desde entonces dejé abandonado el tema y por necesidades he tenido que retomarlo para poder interactuar con ella. Poco tiempo después de escribir el último artículo se publicó en la página de Gadget Victims información sobre un nuevo firmware para las cámaras Foscam FI908W (La de Zaapa es la FI8901W) en septiembre de 2009 donde entre otras cosas se habla de la documentación oficial de FOSCAM para sus cámaras IP. Lo mejor de esto es que en esta documentación hay dos textos que pueden servirnos a los programadores para interactuar definitivamente con la cámara Zaapa y a los usuarios para poder ver sus cámaras en navegadores como Firefox, Chrome, Safari, etc.

Se trata del IPCAM CGI SDK 2.1 y del IPCAM Protocol. El primero es un documento PDF donde se explica cómo haciendo peticiones HTTP se puede descargar la imagen de la cámara y enviar ordenes a esta. El segundo es un documento de Word donde se explica el protocolo de la cámara para comunicarse con ella mediante socket. En este artículo me centraré en el primero por su facilidad de uso.

En el primer documento se explica qué peticiones hay que hacer para interactuar con la cámara. Se trata de acceder a páginas web CGI pasándole normalmente los parámetros mediante el método GET, que es como en realidad nosotros hacemos las llamadas desde un navegador web normalmente.

Antes de empezar a probar hay que cerciorarse de que la cámara Zaapa tiene el último firmware y el último Embeded Web UI. Si en la sección Device Info del panel del administrador son distintos de 11.4.1.40 y 2.0.0.16 respectivamente, hay que actualizar. En la página del producto se pueden descargar pero hay que introducir el número de serie que aparece como código de barras en la parte inferior de la cámara. Una vez que empieza la descarga empieza lo gracioso y es que veremos algo raro en el fichero que descargamos pues no tiene extensión y que no sirve para actualizar ya que no es un .bin. Pues bien el fichero es un archivo .rar por lo que hay que renombrarlo, ponerle esa extensión y ya podemos abrirlo. Dentro de este veremos dos ficheros .bin y aquí esta lo segundo más gracioso ¡¡¡ están al revés !!! Embeded Web UI 11.4.1.40.bin tendría que ser Firmware 11.4.1.40.bin y Firmware 2.0.0.16.bin tendría que ser Embeded Web UI 2.0.0.16.bin. Una vez arreglado ese desaguisado ya podemos actualizarlo desde la sección Upgrade Device Firmware del panel de administrador y actualizar el firmware primero y el Web UI después (en ambos casos se reinicia la cámara).

Hay unos cuantos CGI y lo mejor es leerse la documentación, pero voy a explicar 3 de ellos que me parecen fundamentales:

El primero de ellos es el snapshot.cgi. Sirve para capturar una imagen estática de la cámara. Si ponemos en un navegador web http://ip de la cámara/snapshot.cgi nos pedirá un usuario y una contraseña. Cuando la hayamos introducido veremos la imagen jpg. Podemos evitar que salga el recuadro que nos pide el usuario y la contraseña simplemente añadiendo los parámetros user y pwd a la url de la siguiente forma http://ip de la cámara/snapshot.cgi?user=usuario&pwd=contraseña para que ya directamente nos muestre la imagen. Tiene otro parámetro llamado next_url para indicar el nombre del fichero pero no lo veo útil.
El segundo de ellos son en realidad dos: videostream.cgi y videostream.asf. Sirven para mostrar un flujo continuo de imagenes a modo de vídeo. El que tiene extensión .cgi envía imágenes jpg sucesivas (ideal para verlas con una navegador), el que tiene extensión asf envía las imágenes con el formato Advanced Streaming Format (ideal para verlas con el VLC o con el MPlayer). Si ponemos en un navegador web http://ip de la cámara/videostream.cgi?user=usuario&pwd=contraseña podemos ver el flujo continuo de lo que la cámara está enfocando en ese momento. Tiene otro parámetro llamado resolution para indicar con un 8 o un 32 si queremos que la imagen tenga de tamaño 320×240 o 640×480 respectivamente.
El tecero de ellos es el decoder_control.cgi. Sirve para interactuar con la cámara. Si ponemos en el navegador web http://ip de la cámara/videostream.cgi?user=usuario&pwd=contraseña&command=comando donde comando sea un número que indica qué hacer a la cámara (0 = empezar a mover hacia arriba, 1 = parar de mover hacia arriba, 2 = empezar a mover hacia abajo, etc) veremos como se mueve esta.

Finalmente he creado una página HTML para probar los dos últimos CGIs que he explicado. La página muestra la sucesión de imágenes de la cámara y tiene unos botones que permiten mover la cámara. Para adecuarlo a la vuestra sólo teneis que cambiar en la sección javascript el usuario, la clave y la ruta a vuestra cámara:

<html>
<head>
	<style type="text/css">
		.comando {background-color:#FFFF00; border-radius: 10px; font-family:Arial; font-size:10pt; font-weight:bold; width:70px; text-align:center}
		#imagen {visibility:hidden; width:640px; height:480px;}
		#marco {visibility:hidden;}
	</style>
	<script type="text/javascript">
		var usuario = "usuario";
		var clave = "clave";
		var ruta = "http://192.168.0.12/";
		
		function cargado()
		{
			var imagen = document.getElementById("imagen");
			imagen.src = ruta + "videostream.cgi?user=" + usuario + "&pwd=" + clave + "&resolution=32";
			imagen.style.visibility = "visible";
		}
		
		function empieza_arriba()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=0";
		}
		
		function termina_arriba()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=1";
		}
		
		function empieza_abajo()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=2";
		}
		
		function termina_abajo()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=3";
		}
		
		function empieza_izquierda()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=4";
		}
		
		function termina_izquierda()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=5";
		}

		function empieza_derecha()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=6";
		}
		
		function termina_derecha()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=7";
		}
		
		
	</script>
</head>
<body onload="cargado()">
<img id="imagen">
<table>
<tr><td>&nbsp;</td><td class="comando" onmousedown="empieza_arriba()" onmouseup="termina_arriba()">Arriba</td><td>&nbsp;</td></tr>
<tr><td class="comando" onmousedown="empieza_izquierda()" onmouseup="termina_izquierda()">Izquierda</td><td>&nbsp;</td><td class="comando" onmousedown="empieza_derecha()" onmouseup="termina_derecha()">Derecha</td></tr>
<tr><td>&nbsp;</td><td class="comando" onmousedown="empieza_abajo()" onmouseup="termina_abajo()">Abajo</td><td>&nbsp;</td></tr>
</table>
<iframe id="marco" src=""></iframe>
</body>
</html>

<html>

<head>

.comando {background-color:#FFFF00; border-radius: 10px; font-family:Arial; font-size:10pt; font-weight:bold; width:70px; text-align:center}

#imagen {visibility:hidden; width:640px; height:480px;}

#marco {visibility:hidden;}

</style>

var usuario = "usuario";

var clave = "clave";

var ruta = "http://192.168.0.12/";

function cargado()

{

var imagen = document.getElementById("imagen");

imagen.src = ruta + "videostream.cgi?user=" + usuario + "&pwd=" + clave + "&resolution=32";

imagen.style.visibility = "visible";

}

function empieza_arriba()

{