Foros del Web » Creando para Internet » Diseño web »

Sistema de camaras en web

 Estas en el tema de Sistema de camaras en web en el foro de Diseño web en Foros del Web. Hola que tal, bueno ya hace bastante que vengo usando este foro para solucionar mis problemas, pero ya hoy encontre un tope en el cual ...
  #1 (permalink)  
Antiguo 17/02/2010, 17:27
Avatar de infiero  
Fecha de Ingreso: marzo-2006
Mensajes: 38
Antigüedad: 18 años, 8 meses
Puntos: 3
Busqueda Sistema de camaras en web
Hola que tal, bueno ya hace bastante que vengo usando este foro
para solucionar mis problemas, pero ya hoy encontre un tope en el cual no puedo
solucionar mi problema sin preguntar.
Bueno no vengo a hacer obviamente la pregunta como montarlo
ya lo logre, se puede observar


http://anicomics.dyndns.org:8080


Mi intencion es poder mover todo pero a mi propia web osea hacer q trasmita a mi web

Esta es la web que genera el programa en mi pc
obtiene los css / js y imagenes de una carpeta en el programa
y genera un index

aca les dejo los archivos que utiliza para crear el index
www.megaupload.com/?d=HCPNKL33

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.     <meta name="robots" content="all" />
  6.     <title>webcamXP 5</title>
  7.     <link rel="stylesheet" href="css_styles/default.css" media="screen" />
  8.     <script type="text/javascript">
  9.     </script>
  10.     <script type="text/javascript" src="js/mootools-1.2-core.js"></script>
  11.  
  12.     <script type="text/javascript" src="js/mootools-1.2-more.js"></script>
  13. </head>
  14. <body id="webcamXP-body">
  15. <div id="container">
  16.  <div id="fwindowholder"><span style="display:none">.</span></div>
  17.     <div id="intro">
  18.         <div id="pageHeader">
  19.             <h1><span>webcamXP 5</span></h1>
  20.             <h2><span>webcams and ip cameras server for windows</span></h2>
  21.  
  22.         </div>
  23.         <div class="wxptopnav">
  24.           <div class="wxpmenu">
  25. <span class="btn-start">&nbsp;</span><a class="btn-arrow" href="home.html"><span>Home</span></a><a class="btn-arrow" href="multi.html"><span>Multi view</span></a><a class="btn-arrow" href="gallery.html"><span>Gallery</span></a><a class="btn-arrow" href="admin.html"><span>Administration</span></a><span class="btn-stop">&nbsp;</span><br/>
  26.  
  27.           </div>
  28.           <div class="wxplogin">
  29. Not logged in
  30.           </div>
  31.  
  32.         </div>
  33. <div class="wxpcontainer">
  34.           <div class="wxpsrcsel">
  35.     <script type="text/javascript">
  36. var height_array = new Array();
  37. var width_array = new Array();
  38. width_array[1] = 320;
  39. height_array[1] = 240;
  40.     function CamSelect()
  41.     {
  42.             var destSrc = document.getElementById("srcSelect").value;
  43.             var destMode = document.getElementById("modeSelect").value;
  44.             if (destMode == "0"){
  45.             currentCamera1 = destSrc;
  46.             document.images.webcam1.onload = DoIt1;
  47.             document.images.webcam1.onerror = ErrorImage1;
  48.             document.images.webcam1.src = "cam_" + currentCamera1 + ".jpg;"
  49.             document.images.webcam1.width = width_array[currentCamera1];
  50.             document.images.webcam1.height = height_array[currentCamera1];
  51.           var mydiv = document.getElementById("wxpcamdiv");
  52.             if (mydiv != null){
  53.             mydiv.style.width = parseInt(width_array[currentCamera1]+5) + "px";
  54.             }
  55.             if (mydiv == null){alert('div not found');}
  56.           var myifr = document.getElementById("_iframe-ptz");
  57.           if (myifr != null) myifr.src = "/ptz?src=" + destSrc;
  58.             }else{
  59.             ModeSelect();
  60.             }
  61.     }
  62.     function ModeSelect()
  63.     {
  64.             var destSrc = document.getElementById("srcSelect").value;
  65.             var destMode = document.getElementById("modeSelect").value;
  66.             parent.location.href = "/?src=" + destSrc + "&mode=" + destMode;
  67.     }
  68.     </script>
  69. <select id="srcSelect" onchange="CamSelect()">
  70.   <option SELECTED value="1">Source 1</option>
  71. </select>&nbsp;
  72. <select id="modeSelect" onchange="ModeSelect()">
  73.   <option value="0">JavaScript</option>
  74.  
  75.   <option value="1">Motion Jpeg [Firefox]</option>
  76.   <option SELECTED value="2">Flash</option>
  77. </select>
  78.           </div>
  79.           <div id="wxpptz" class="wxpptz">
  80.           <div id="wxpdragptz" class="wxpdragme">Pan, Tilt &amp; Zoom</div>
  81. <iframe id="_iframe-ptz" width="115" height="120" src="/ptz?src=1" frameborder="0" allowtransparency="true" scrolling="no" ></iframe>
  82.  
  83. <br/>
  84.           </div>
  85.           <script type="text/javascript" language="javascript" charset="utf-8">
  86.           // <![CDATA[
  87.           new Drag('wxpptz',{
  88.           onStart:function(el)
  89.           {
  90.             el.setOpacity(.5);
  91.           },
  92.           onComplete:function(el)
  93.           {
  94.             el.setOpacity(1);
  95.           }});
  96.           // ]]>
  97.           </script>
  98.           <br />
  99.           <div id="wxpcamdiv" class="wxpcamdiv" style="width : 325px">
  100.           <div id="wxpdragcam" class="wxpdragme">Live View</div>
  101. <object type="application/x-shockwave-flash" width="320" height="240" data="webcamxp.swf">
  102. <param name="movie" value="webcamxp.swf?webcam=cam_1.jpg&amp;refresh=50&amp;connect=&amp;offline=&amp;transtype=Fade&amp;bgcolor=#FFFFFF&amp;txtcolor=#808080" />
  103. <param name="FlashVars" value="webcam=cam_1.jpg&amp;refresh=50&amp;connect=&amp;offline=&amp;transtype=Fade&amp;bgcolor=#FFFFFF&amp;txtcolor=#808080" />
  104. <param name="loop" value="false" />
  105.  
  106. <param name="menu" value="false" />
  107. <param name="quality" value="best" />
  108. <param name="scale" value="noscale" />
  109. <param name="salign" value="lt" />
  110. <param name="wmode" value="opaque" />
  111. </object>
  112.           </div>
  113.           <script type="text/javascript" language="javascript" charset="utf-8">
  114.           // <![CDATA[
  115.           new Drag('wxpcamdiv',{
  116.           onStart:function(el)
  117.           {
  118.             el.setOpacity(.5);
  119.           },
  120.           onComplete:function(el)
  121.           {
  122.             el.setOpacity(1);
  123.           }});
  124.           // ]]>
  125.           </script>
  126. <br/><br/>
  127. <center><object width="605" height="285" id="obj_1209901150515">
  128. <param name="movie" value="http://wLite.chatango.com/group"/>
  129. <param name="wmode" value="transparent"/>
  130. <param name="AllowScriptAccess" VALUE="always"/>
  131. <param name="AllowNetworking" VALUE="all"/>
  132.  
  133. <param name="AllowFullScreen" VALUE="true"/>
  134. <param name="flashvars" value="cid=1209901150515&b=60&f=50&l=999999&q=999999&r=100&s=1"/>
  135. <embed id="emb_1209901150515" src="http://wLite.chatango.com/group" width="605" height="285" 
  136. wmode="transparent" 
  137. allowScriptAccess="always" allowNetworking="all" type="application/x-shockwave-flash" allowFullScreen="true" 
  138. flashvars="cid=1209901150515&b=60&f=50&l=999999&q=999999&r=100&s=1">
  139. </embed></object>
  140. </center>
  141. </div><br/>
  142.         <div class="wxpdark">
  143.            <div class="internal_content">
  144.             powered by <a href="http://www.webcamxp.com" title="www.webcamxp.com">webcamxp 5</a> v5.3.2.375
  145.            </div>
  146.         </div>
  147.  
  148.         <div class="footer">
  149.             <a href="http://validator.w3.org/check/referer" title="Check the validity of this site’s XHTML">xhtml</a> &nbsp;
  150.             <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site’s CSS">css</a> &nbsp;
  151.         </div>
  152.     </div>
  153. </div>
  154. </body>
  155. </html>
  #2 (permalink)  
Antiguo 17/02/2010, 22:10
Avatar de infiero  
Fecha de Ingreso: marzo-2006
Mensajes: 38
Antigüedad: 18 años, 8 meses
Puntos: 3
Respuesta: Sistema de camaras en web
Bueno paso a dar la autorespuesta
logre solucionar mi problema, y paso a dejar el codigo completo que use para poder
poner los 3 videos, y la seleccion de los mismos
con una mascara de codigo, Espero que a algun desamparado le sirva ;D

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <script language="Javascript"> 
  4. function aparecer(id) {
  5.     var d = document.getElementById(id);
  6.     d.style.display = "block";
  7.     d.style.visibility = "visible";
  8. }
  9. function ocultar(id) {
  10.     var d = document.getElementById(id);
  11.     d.style.display = "none";
  12.     d.style.visibility = "hidden";
  13. }
  14. window.onload = function () {
  15.     //Al cargar la página se oculta el div de consulta
  16.     ocultar("jpg");
  17.     ocultar("flash");
  18.     
  19.     
  20. }
  21. </script> 
  22. </head>
  23. <body>
  24. <table>
  25.     <tr>
  26.         <td scope="col">
  27.             <div align="center">
  28.                 <a href="#java" onClick="ocultar('jpg');ocultar('flash');aparecer('java');">Java</a> -
  29.                 <a href="#jpg" onClick="ocultar('java');ocultar('flash');aparecer('jpg');">Jpg</a> -
  30.                 <a href="#flash" onClick="ocultar('java');ocultar('jpg');aparecer('flash');">Flash</a> -
  31.             </div>
  32.         </td>
  33.     </tr>
  34. </table>
  35. <div id="java" style="position:absolute;text-align:center;top:100px;left:200px;border:solid 1px red;"><img src="http://anicomics.dyndns.org:8080/loading.jpg" class="webcam" id="webcam1" onMouseDown="PTZMouseDown1(event)" width="320" height="240" alt="Live Stream" />
  36. <script type="text/javascript">
  37. <!--
  38. currentCamera1= 1;
  39. errorimg1= 0;
  40. document.images.webcam1.onload = DoIt1;
  41. document.images.webcam1.onerror = ErrorImage1;
  42. function LoadImage1()
  43. {
  44.         uniq1 = Math.random();
  45.         document.images.webcam1.src = "http://anicomics.dyndns.org:8080/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;
  46.         document.images.webcam1.onload = DoIt1;
  47. }
  48. function PTZMouseDown1(e)
  49. {
  50.         var IE = document.all?true:false;
  51.         var x,y;
  52.         var myx,myy;
  53.         var myifr = document.getElementById("_iframe-ptz");
  54.         tp = getElPos1();
  55.         myx = tp[0];
  56.         myy = tp[1];
  57.         if(IE){
  58.         var scrollX = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
  59.         var scrollY = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
  60.         x = event.clientX - myx + scrollX;
  61.         y = event.clientY - myy + scrollY;
  62.         } else {
  63.         x = e.pageX - myx;
  64.         y = e.pageY - myy;
  65.         }
  66.         if (width_array[currentCamera1] > 0) x = Math.round((x * 400) / width_array[currentCamera1]);
  67.         if (height_array[currentCamera1] > 0) y = Math.round((y * 300) / height_array[currentCamera1]);
  68.         if (x > 400) x = 400;
  69.         if (y > 300) y = 300;
  70.         if (myifr != null) myifr.src = "http://anicomics.dyndns.org:8080/ptz?src=" + currentCamera1 + "&moveto_x=" + x + "&moveto_y=" + y +"";
  71.         return true;
  72. }
  73. function getElPos1()
  74. {
  75.             el = document.images.webcam1;
  76.             x = el.offsetLeft;
  77.             y = el.offsetTop;
  78.             elp = el.offsetParent;
  79.             while(elp!=null)
  80.               { x+=elp.offsetLeft;
  81.                 y+=elp.offsetTop;
  82.                 elp=elp.offsetParent;
  83.               }
  84.             return new Array(x,y);
  85. }
  86. function ErrorImage1()
  87. {
  88.         errorimg1++;
  89.         if (errorimg1>3){
  90.               document.images.webcam1.onload = "";
  91.               document.images.webcam1.onerror = "";
  92.               document.images.webcam1.src = "offline.jpg";
  93.               }else{
  94.                 uniq1 = Math.random();
  95.             document.images.webcam1.src = "http://anicomics.dyndns.org:8080/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;
  96.               }
  97. }
  98. function DoIt1()
  99. {
  100.         errorimg1=0;
  101.         window.setTimeout("LoadImage1();", 40);
  102. }
  103. //-->
  104. </script>
  105. </div>
  106. <div id="jpg" style="position:absolute;text-align:center;top:100px;left:200px;border:solid 1px red;"><img src="http://anicomics.dyndns.org:8080/cam_1.cgi" class="webcam" id="webcam1" onMouseDown="PTZMouseDown1(event)" width="320" height="240" alt="Live Stream" />
  107. <script type="text/javascript">
  108. <!--
  109. currentCamera1= 1;
  110. function PTZMouseDown1(e)
  111. {
  112.         var IE = document.all?true:false;
  113.         var x,y;
  114.         var myx,myy;
  115.         var myifr = document.getElementById("_iframe-ptz");
  116.         tp = getElPos1();
  117.         myx = tp[0];
  118.         myy = tp[1];
  119.         if(IE){
  120.         x = event.clientX - myx + document.body.scrollLeft;
  121.         y = event.clientY - myy + document.body.scrollTop;
  122.         } else {
  123.         x = e.pageX - myx;
  124.         y = e.pageY - myy;
  125.         }
  126.         //alert(x + " :: " + y);
  127.         if (width_array[currentCamera1] > 0) x = Math.round((x * 400) / width_array[currentCamera1]);
  128.         if (height_array[currentCamera1] > 0) y = Math.round((y * 300) / height_array[currentCamera1]);
  129.         //alert(x + " :: " + y);
  130.         if (myifr != null) myifr.src = "http://anicomics.dyndns.org:8080/ptz?src=" + currentCamera1 + "&moveto_x=" + x + "&moveto_y=" + y +"";
  131.         return true;
  132. }
  133. function getElPos1()
  134. {
  135.             el = document.images.webcam1;
  136.             x = el.offsetLeft;
  137.             y = el.offsetTop;
  138.             elp = el.offsetParent;
  139.             while(elp!=null)
  140.               { x+=elp.offsetLeft;
  141.                 y+=elp.offsetTop;
  142.                 elp=elp.offsetParent;
  143.               }
  144.             return new Array(x,y);
  145. }
  146. //-->
  147. </script>
  148. </div>
  149. <div id="flash" style="position:absolute;text-align:center;top:100px;left:200px;border:solid 1px red;"><object type="application/x-shockwave-flash" width="320" height="240" data="../webcamxp.swf">
  150. <param name="movie" value="webcamxp.swf?webcam=http://anicomics.dyndns.org:8080/cam_1.jpg&amp;refresh=50&amp;connect=&amp;offline=&amp;transtype=Fade&amp;bgcolor=#FFFFFF&amp;txtcolor=#808080" />
  151. <param name="FlashVars" value="webcam=http://anicomics.dyndns.org:8080/cam_1.jpg&amp;refresh=50&amp;connect=&amp;offline=&amp;transtype=Fade&amp;bgcolor=#FFFFFF&amp;txtcolor=#808080" />
  152. <param name="loop" value="false" />
  153. <param name="menu" value="false" />
  154. <param name="quality" value="best" />
  155. <param name="scale" value="noscale" />
  156. <param name="salign" value="lt" />
  157. <param name="wmode" value="opaque" />
  158. </object>
  159. </div>
  160. </body>
  161. </html>

Etiquetas: camaras, sitemap
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:27.