Este proceso requiere el conocimiento de varias cosas básicas: creación de un sitio web y establecerlo públicamente, configurar la cámara ip para el correcto funcionamiento en la red privada y posteriormente pública, y por último, configurar adecuadamente el modem/router para permitir comunicación tanto del sitio web, como de la cámara ip hacia el exterior.
Como primer paso, instalamos la camara ip, en este caso es de la marca PIXOR, modelo P300. Inicialmente, esta cámara esta configurada con el ip 192.168.0.200. Por lo cual, para poder acceder a ella, se tuvo que cambiar el segmento de la maquina donde se trabajo a 0 (cero), para que puedan estar en el mismo entorno. Ya ahí, se pudo cambiar la configuración de la cámara y se coloco en 192.168.1.200, ademas se configuro para que el puerto de escucha sea el 8000 para video, y 1500 para audio.
Hecho esto, ahora nos encargamos de desarrollar el sitio web. En nuestro caso instalamos la aplicación APPSERV, que nos instalara un servidor en la computadora que usaremos para el sitio, resultando varias carpetas, en especial la carpeta WWW, dentro la carpeta APPSERV.
Dentro de esta carpeta, el documento denominado index.html, es la página principal del sitio, y es en la cual nos enfocamos para la creación del sitio.
Lo que nos piden en la práctica, es una página que permita contener 4 cámaras, por lo tanto, dividimos la página en frames, que es lo que nos facilitara el uso de diferentes secciones. Utilizamos 5 frames, uno para el encabezado, y las 4 restantes como contenedores de las cámaras.
CODIGO INDEX.HTML
<frameset cols="20%,40%,40%">
<frame name="top" src="top.htm">
<frameset rows="50%,50%">
<frame name="alto" src="top1.htm">
<frame name="alto" src="top2.htm">
</frameset> <frameset rows="50%,50%%">
<frame name="top" src="top3.htm">
<frame name="top" src="top4.htm">
</frameset> </frameset>
Al utilizar frames hacemos que cada frame contenga una pagina independiente, por lo tanto el codigo en las 4 ventanas sera el mismo. Como nada mas tenemos una cámara, solo en un contenedor introducimos el código para invocar a la cámara, y en los restantes colocamos una pequeña imagen y texto.
CODIGO TOP.HTM (portada del proyecto)
<HTML>
<BODY BGCOLOR="#FFFF80">
<CENTER>
<BR>
<IMG SRC="upsum.jpg" WIDTH=120 HEIGHT=140 BORDER=2 ALIGN=left>
<BR>
<FONT FACE="arial" SIZE=5 COLOR=blue>Materia: REDES II </FONT>
<BR><BR><BR><BR><BR><BR>
<BR>
<BR>
<CENTER><FONT FACE="arial" SIZE=4 COLOR=blue>Alumnos:</FONT></CENTER>
<CENTER><FONT FACE="arial" SIZE=4 COLOR=blue> Guillermo Borges Espinosa</FONT></CENTER>
<CENTER><FONT FACE="arial" SIZE=4 COLOR=blue> Fausto O. García Ovilla</FONT></CENTER>
<CENTER><FONT FACE="arial" SIZE=4 COLOR=blue> Jose Luis Enriquez Poceros</FONT></CENTER>
<CENTER><FONT FACE="arial" SIZE=4 COLOR=blue> Sergio Bogard Gonzalez Ancona</FONT></CENTER>
<BR>
<CENTER><B><FONT FACE="arial" SIZE=4 COLOR=blue>Práctica : Camaras ip</FONT><B></CENTER>
<CENTER>
</BODY>
</HTML>
CODIGO TOP1.HTM (página invocando la cámara)
<HTML>
<BODY BGCOLOR="#FAAC58">
<CENTER>
<iframe frameborder="1" height="330" src="http://realityupsum.no-ip.org:8000" width="100%">Tu Navegador no soporta esta característica
</iframe>
<FONT FACE="arial" SIZE=5 COLOR=blue>Camara 1</FONT>
<BR>
<CENTER>
</BODY>
</HTML>
CODIGO TOP2.HTM (página solo con una imagen y texto)
<HTML>
<BODY BGCOLOR="#FF8000">
<CENTER>
<IMG SRC="upsum.jpg" WIDTH=120 HEIGHT=140 BORDER=2 ALIGN=left>
<FONT FACE="arial" SIZE=5 COLOR=blue>Materia: REDES I</FONT>
<BR>
<BR>
<CENTER><FONT FACE="arial" SIZE=4 COLOR=blue>-2-</FONT></CENTER>
<CENTER><FONT FACE="arial" SIZE=4 COLOR=blue>--</FONT></CENTER>
<CENTER><FONT FACE="arial" SIZE=4 COLOR=blue>--</FONT></CENTER>
<CENTER><FONT FACE="arial" SIZE=4 COLOR=blue>--</FONT></CENTER>
<BR>
<CENTER><B><FONT FACE="arial" SIZE=4 COLOR=blue>Cámaras ip</FONT><B></CENTER>
<CENTER>
</BODY>
</HTML>
Hecho esto, probamos la pagina, y vemos lo siguiente:
Hasta el momento, el sitio esta funcionando de forma local. Para poder sacarlo al exterior, tenemos que realizar el ultimo proceso, que es el de configurar el modem/router.
Accedemos al modem, y abrimos los puertos que necesitamos abrir.
Puerto 80 para permitir accesos al sitio web, y con la dirección de la computadora que sirve de servidor.
Puerto 8000 para permitir acceso a la cámara ip, con la dirección ip de la cámara 192.168.1.200
Puerto 1500 para permitir acceso al audio de la cámara, con la dirección ip de la cámara.
Hecho esto, ahora procedemos a crear un enlace dinámico con nuestra página. Para esto, se creo una cuenta en la pagina www.no-ip.com, la cual proporciona un servicio gratuito por 30 días para establecer un sitio dinámico. Para nuestra práctica, creamos el sitio realityupsum.no-ip.com ; con este proceso, queda la maquina servidor, ligada al nombre que se creo y se hace publico el sitio.
Con esto queda establecido un servidor web, el cual contiene una camara ip.
En conclusión podemos observar, que se requieren ciertos conocimientos básicos para el desarrollo de la práctica como son: correcto uso de un modem/router y sus puertos, como establecer un servidor, como crear una página web. Podríamos decir que unimos la disciplina de programación y de redes, dándonos algo muy útil y productivo.
No hay comentarios:
Publicar un comentario