CCTV 홈페이지 연동

CCTV로 감시하는 제품사이트에 샘플페이지를 보면 간단한 소스접목으로 해당 카메라에서가져오는 영상을 보여주게 됩니다.

소스가 제품에 따라 필요로하는 내용이 달라집니다.

물론 인터넷감시용 카메라 를 구입시 제공되는 프로그램에서 소스를 얻을 수 있습니다.

카메라(자체서버)에서 인터넷 라인따라서 내컴퓨터로...

내컴퓨터에서 해당카메라 아이피로접속하면 되는데 이때 제공되는 프로그램등으로 접속하거나 아이피 접속시 (브라우저로) 자동으로 모니터가 뜨면서 보일수도 있구요...

이때 브라우저 소스보기에서 소스를 가져와 접목을 원하는 웹문서의 원하는 위치에 넣으면 해당페이지가 보일때 마다 작동해서 영상을 가져와 보여줍니다.

이건 약간 편법에 속하기도 합니다.

이전 제공하는 샘플페이지에서 가져와 붙여넣어 만들어 본 경험으로 말씀 드립니다.

전 시스템을 갖추려면 20만원대 저가와 서버내장형의 제품 보통40만원대 이상의 제품들이 있습니다.

CCTV판매 사이트를 둘러보시길 바랍니다.

의외로 저가에 쉽게 설치가 가능합니다.

참고하시길..

<table border="0" cellspacing="0" cellpadding="0">
 <tr><td>
 <SCRIPT LANGUAGE="JavaScript">

 var tid = 0;
 var mode = 0;
 var myDate = new Date();
 var tmpImg1 = new Image(400,300);
 var tmpImg2 = new Image(400,300);
 width=400;
 height=300;

 window.resizeTo(400,300);

 function drawcamera() {
  if(mode == 0)
  {
   document.CamImg.src=tmpImg1.src;
   mode = 1;
  } else
  {
   document.CamImg.src=tmpImg2.src;
   mode = 0;
  }
 }
 function timeout() {
 loadcamera();}
 function loadcamera() {
 clearTimeout(tid);
 tid = setTimeout('timeout()',30000);
 myDate = new Date();
 if(mode == 0){
  tmpImg1.src = "http://yusung.goanygate.com:100/cgi-bin/camera?PAGE="+ myDate.getTime();
  tmpImg1.onload = drawcamera;
  tmpImg1.onerror= drawcamera;
 } else{
  tmpImg2.src = "http://yusung.goanygate.com:100/cgi-bin/camera?PAGE="+ myDate.getTime();
  tmpImg2.onload = drawcamera;
  tmpImg2.onerror= drawcamera;
 }
}
document.write("<IMG border=0 SRC=http://yusung.goanygate.com:100/cgi-bin/camera?PAGE="+myDate.getTime()+" NAME=CamImg usemap=\"#ctrlpad\" onLoad=\"TimerID=setTimeout('loadcamera()',0);\" onError=\"TimerID=setTimeout('loadcamera()',0);\" WIDTH="+width+" HEIGHT="+height+ "></A>");
document.write("<map name=\"ctrlpad\"></td></tr></table>");
var x_step = (400*43)/400;
var y_step = (3000*40)/300;
var y1 = 0;
var y2 = y1 + y_step;

for ( var i=-4; i<=4; i++ ) {
 var x1 = 0 ;
 var x2 = x1 + x_step ;
 for ( var j=-5; j<=5; j++ ) {
  document.writeln( '  ' ) ;
  x1 += x_step; x2 += x_step;
 }
 y1 += y_step; y2 += y_step;
}
document.write("</MAP>");
// -->
</SCRIPT>
</div>


출처:http://kin.naver.com/detail/detail.php?d1id=1&dir_id=109&eid=CqI+VceCYfBbDRjlTaQ+Om+lC7jiSvMQ&qb=Q0NUViDtmYjtjpjsnbTsp4Ag7IaM7Iqk&enc=utf8&section=kin&rank=1&sort=0&spq=0&pid=fFZGvloi5UdssuqgMD0sss--334179&sid=SnE2@ew2cUoAAGMYBHs