Simple Webcam Viewer

Specification, docu and downloads: http://www.ipux.net/cs100.html

I created this for my activeX IP Cam IPUX 7LINKS Wireless Network Camera cs101a
If you have a other IPWebCam with works too, let it me know please.
I think it is no Problem to modify the script for other ones.

Firmware reset and first login

press ~5s the reset button for firmwarereset (maybe during power on)
DHCP is active now
default IP: 192.168.0.30 SM:255.255.255.0
User: admin Password: admin

use for NTP: ntp0.fau.de

Installation

download the html-file and save it in a directory or on your desktop.
if you want, edit the parameters (like IP-Address or DNS-Name) in the html file
open a Browser like Firefox
open with your Browser the html-file

if you have pichat installed, you may move the html-file to the %appdata%\pichat\webchat\public and use the html-server from pichat. Open your browser and do it like: http://127.0.0.1/public/simple_webcam_viewer.html

Minimal Version

only show the Picture
you have to modify the IP-Address in the HTML-File manually

minimal_webcam_viewer.html

<html>
  <head>
    <title>IP Cam Viewer</title>
  </head>
  <body>
    <embed 
      type        = "application/x-java-applet" 
      CODE        = "ultracam.class" 
      ARCHIVE     = "ultracam.jar" 
      NAME        = "ucx" 
      WIDTH       = "640" 
      HEIGHT      = "460" 
      codebase    = "http://192.168.0.30:80" 
      mode        = "0" 
      scriptable  = false 
      pluginspage = "http://java.sun.com/products/plugin/index.html#download" > 
    </embed>
  </body>
</html>

Simple Version

save last used URL into a cookie
own menu
- Cam open the HTML-Site of the webcam
- Viewer open a simple Viewer window
- Print print the picture (you need a good performance for a complete pictureprint, some rows are empty most times)
- Day switch to day mode
- Night switch to night mode
- Chat connect with the eu.pichat.net
show always the full date and time from your PC (not in the picture)

Screenshot

Sourcecode

simple_webcam_viewer.html

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="generator" content="by my fingers">
<META NAME="Copyright" CONTENT="Copyright 2011 by Mark Wolfgruber http://600infos.de - If you do not remove this Copyright, you may copy/modify and use it for free">
<meta name="description" content="IPUX Wireless Network Camera Model CS101A Viewer" />
<title>Java IP Cam Viewer</title>
<script language="JavaScript">
 
  //  default:  var aURL='http://192.168.0.30:80';
  var aURL='http://192.168.0.30';
  if(Cread('lastURL')) { 
    var aURL=Cread('lastURL');
    var bURL=window.prompt("last URL (http://IP-Address:Port/usergroup)",aURL);
    if (!bURL) bURL=aURL;
  } 
  if (!bURL) {
    var bURL=window.prompt("Please enter URL (http://IP-Address:Port/usergroup)",aURL);
    if (!bURL) bURL=aURL;
  }
 
  var cURL=bURL.toLowerCase();
  if (cURL.substr(0,7)!='http://') if (cURL.substr(0,7)!='https://') bURL='http://'+bURL ; 
 
  // save last URL in a cookie
  var cdate=new Date();
  cdate=new Date(cdate.getTime() +1000*60*60*24*30); // cookie will live 30 Days
  document.cookie='lastURL='+bURL+'; expires='+ cdate.toGMTString()+';'; 
 
  function ftrigger(trigger) {
    trigger_window=window.open(bURL+'/users/trigger.cgi?night='+trigger, 'trigger', 'width=300,height=50,resizable=yes');
    setTimeout("trigger_window.close ()", 3000); // automatically close window after 3s
    document.all.container.style.backgroundColor="#e0e0e0" ; document.all.container.style.color="#101010"; ;
    if (trigger==1) { document.all.container.style.backgroundColor="#101010"; document.all.container.style.color="#e0e0e0"; }
  }
  function pichat(pURL) {
    var nickname='Gast';
    nickname=window.prompt('Please enter your nickname',nickname);
    if (!nickname) return false;
    var pURL='http://eu.pichat.net/chat/connect'+'?nickname='+nickname+'&useragent=webcam_viewer&startcommands=/echo%20setsilent%20timestamp&colorscheme=night';
    window.open(pURL,'pichat','width=640,height=480,resizable=yes');
  }
  function open_viewer()
  {
    var msg_window=window.open('','Viewer','width=640,height=460,resizable=yes,menubar=no,status=no,toolbar=no,location=no,left=100,top=0,scrollbars=yes');
    var css='<style type="text/css"> body { background-color:silver; margin:0 auto; text-align:center; } #container { margin:0 auto; text-align:left; background-color:#10101010;}</style>';
    var new_page='<html><head><title>IP Cam Viewer</title>'+css+'</head><body><div id="container">'+ embed + '<noscript><h1>Please enable JAVA</h1></noscript></div></body></html>';
    msg_window.document.open('text/html');
    msg_window.document.writeln(new_page);
    msg_window.document.close();
  }
 
  function Cwrite(Cname,Cvalue)
  { // usage: Cwrite('STRING','DATA');
    var expire_ms=1000*60*60*24*30; // 30 Days
    var eDate=new Date();
    eDate=new Date(eDate.getTime() +expire_ms);
   document.cookie=Cname+'='+Cvalue+'; expires='+eDate.toGMTString()+';';
  }
 
  function Cread(n)
  { // usage: if(Cread('STRING')) var STRING=Cread('STRING'); alert('STRING='+STRING);
   Cstring=document.cookie;
   Creturn='';
   while(Cstring != '')
   {
    while(Cstring.substr(0,1) == ' '){Cstring=Cstring.substr(1,Cstring.length);}
    Cname=Cstring.substring(0,Cstring.indexOf('='));
    if(Cstring.indexOf(';') != -1)
    {Cvalue=Cstring.substring(Cstring.indexOf('=')+1,Cstring.indexOf(';'));}
    else{Cvalue=Cstring.substr(Cstring.indexOf('=')+1,Cstring.length);}
    if(n == Cname){Creturn=Cvalue;}
    i=Cstring.indexOf(';')+1;
    if(i == 0){i=Cstring.length}
    Cstring=Cstring.substring(i,Cstring.length);
   }
  return(Creturn)
  }
 
  function Cdelete(Cname)
  {
   document.cookie=Cname+'=; expires=Thu, 14-Jul-70 12:34:56 GMT;';
  } 
 
  function fdatetime1 () {
    var mmmm=new Array(13);
     mmmm[0] ="Januar";
     mmmm[1] ="Februar";
     mmmm[2] ="M\u00e4rz";
     mmmm[3] ="April";
     mmmm[4] ="Mai";
     mmmm[5] ="Juni";
     mmmm[6] ="Juli";
     mmmm[7] ="August";
     mmmm[8] ="September";
     mmmm[9] ="Oktober";
     mmmm[10]="November";
     mmmm[11]="Dezember";
    var mmm=new Array(13);
     mmm[0] ="Jan";
     mmm[1] ="Feb";
     mmm[2] ="M\u00e4r";
     mmm[3] ="Apr";
     mmm[4] ="Mai";
     mmm[5] ="Jun";
     mmm[6] ="Jul";
     mmm[7] ="Aug";
     mmm[8] ="Sep";
     mmm[9] ="Okt";
     mmm[10]="Nov";
     mmm[11]="Dec";
    var ddd=new Array(8);
     ddd[0]="Sonntag";
     ddd[1]="Montag";
     ddd[2]="Dienstag";
     ddd[3]="Mittwoch";
     ddd[4]="Donnerstag";
     ddd[5]="Freitag";
     ddd[6]="Samstag";
 
    var now=new Date();
    var yy=now.getFullYear() - 2000 ;
    var yea=now.getFullYear() ;
    var mon=now.getMonth() + 1;
    var day=now.getDate() ;
    var hou=now.getHours();
    var min=now.getMinutes();
    var sec=now.getSeconds();
 
    str_date =((day < 10) ? "0" : "") + day;
    str_date += ((mon < 10) ? ".0" : ".") + mon;
    str_date += "." + yea;
 
    str_shortdate =((day < 10) ? "0" : "") + day;
    str_shortdate += ". " + mmm[(now.getMonth())];
    str_shortdate += " " + yy;
 
    str_longdate =((day < 10) ? "0" : "") + day;
    str_longdate += ". " + mmmm[(now.getMonth())];
    str_longdate += " " + yea;
 
    str_fulldate=ddd[(now.getDay())] + ", " + str_longdate;
 
    str_time =((hou < 10) ? "0" : "") + hou;
    str_time += ((min < 10) ? ":0" : ":") + min;
    str_shorttime=str_time ;
    str_time += ((sec < 10) ? ":0" : ":") + sec ; 
 
 
    for(var i=0; i < document.getElementsByName("fdatetime1_time").length; i++) {          
      document.getElementsByName("fdatetime1_time")[i].firstChild.data=str_time ;      
    }
    for(var i=0; i < document.getElementsByName("fdatetime1_shorttime").length; i++) {          
      document.getElementsByName("fdatetime1_shorttime")[i].firstChild.data=str_shorttime ;
    }
    for(var i=0; i < document.getElementsByName("fdatetime1_date").length; i++) {          
      document.getElementsByName("fdatetime1_date")[i].firstChild.data=str_date ;
    }
    for(var i=0; i < document.getElementsByName("fdatetime1_shortdate").length; i++) {          
      document.getElementsByName("fdatetime1_shortdate")[i].firstChild.data=str_shortdate ;
    }
    for(var i=0; i < document.getElementsByName("fdatetime1_longdate").length; i++) {          
      document.getElementsByName("fdatetime1_longdate")[i].firstChild.data=str_longdate ;
    }
    for(var i=0; i < document.getElementsByName("fdatetime1_fulldate").length; i++) {          
      document.getElementsByName("fdatetime1_fulldate")[i].firstChild.data=str_fulldate ;
    }
    timerid=setTimeout("fdatetime1()",1000);
  }        
 
 
</script>
 
<style type="text/css">
body {   background-color:silver; margin:0 auto; text-align:center;  /* predefine center for IE */ }
#container {  margin:0 auto; text-align:left; padding:5px; width:640px; }
#container { -moz-border-radius:10px ; -khtml-border-radius:10px ; } /* rounded not for IE */
#menu { position:relative; top:0px; float:left; }
#fdatetime { right:0; text-align:right; }
@media screen {
  #container {   background-color:#e0e0e0; color:#101010;  }
  .button a { text-decoration:none; color:#aaf; background-color:#33f;  padding:0px 11px 0px 10px; border:1px solid  #555} 
  .button a { -moz-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; } /* rounded not for IE */
  .button a:active, .button a:hover { color:#fff !important; border:1px solid  #999  !important; } 
  .button a:active { border:1px solid  #fff  !important;  padding:0px 10px 0px 11px; }
}
@media print {
  #container { border:5px solid #000; background-color:#fff; color:#000; }
  #menu { display:none !important; }    
}
 
</style>
 
</head>
<body>
  <div id="container">
      <script language="JavaScript">
      <!--
      var aCODE='';
      aCODE=aCODE+'<div id="menu">';
      aCODE=aCODE+'<span class="button"><a href="'+bURL+'" title="Webcam Menu" target=_blank>Cam</a></span>';
      aCODE=aCODE+'<span class="button"><a href="javascript:void(0);" onclick="open_viewer();" title="open Viewer in a new Window">Viewer</a></span>';
      aCODE=aCODE+'<span class="button"><a href="javascript:self.print();" title="Print a screenshot">Print</a></span>';
      // switch nightmode  only for admin and users
      aCODE=aCODE+'<span class="button"><a href="javascript:void(0);" onclick="ftrigger(0);" title="change WebCam to Dayview">Day</a></span>';
      aCODE=aCODE+'<span class="button"><a href="javascript:void(0);" onclick="ftrigger(1);" title="change WebCam to Nightview">Night</a></span>';
      aCODE=aCODE+'<span class="button"><a href="javascript:void(0);" onclick="pichat();" title="open Pichat">Chat</a></span>';
      aCODE=aCODE+'&nbsp;</div>';
      document.write(aCODE);
 
      document.write('<div id="fdatetime"><span name="fdatetime1_fulldate" id="fdatetime1_fulldate">&nbsp;</span> <span name="fdatetime1_time" id="fdatetime1_time">&nbsp;</span>&nbsp;</div>');
      fdatetime1();
 
      var embed='<embed ';
      embed=embed+'type="application/x-java-applet" ';
      embed=embed+'CODE="ultracam.class" ';
      embed=embed+'ARCHIVE="ultracam.jar" ';
      embed=embed+'NAME="ucx" ';
      embed=embed+'WIDTH="640" ';
      embed=embed+'HEIGHT="460" ';
      embed=embed+'codebase ="'+bURL+'" ';
      embed=embed+'mode ="0" ';
      embed=embed+'scriptable=false ';
      embed=embed+'pluginspage="http://java.sun.com/products/plugin/index.html#download" ';
      embed=embed+'> </embed>';
      embed=embed+'';
      embed=embed+'';
      document.write(embed);      
 
      -->
      </script> 
    <noscript>
    <center>
    <h1>Please enable JAVA</h1>
    </center>
    </noscript>
  </div>
 
 
</body></html>

Tweets from pichat

Tweets from 600infos

Simple Webcam Viewer

Firmware reset and first login

Installation

Minimal Version

Simple Version

Screenshot

Sourcecode

Navigation

Search

Toolbox

Translate

Advertisment