ホーム » スタッフ » 斉藤徹 » Computer » Linux » 自宅で監視カメラを動かしてみた

2013年7月
« 6月   8月 »
 123456
78910111213
14151617181920
21222324252627
28293031  

最近の投稿(電子情報)

アーカイブ

カテゴリー

自宅で監視カメラを動かしてみた

今度の週末は、家族旅行の予定。 だけど、子どもがその間、最近病院に連れて行った婆ちゃん猫を 心配している。

そこで、使っていなかったWebカメラで、急遽、監視カメラを動かしてみた。 奥さんからは、解像度低いじゃんとツッコミを受けるが、 もともとのWebカメラの性能だと思うし…

余りにも他愛もないコードだけど、 この手のお遊びプログラムは、 学生さんに「こんなこと簡単にできるよ」と見せることも多いので、 PHPコードに改良&コメント付けをしておく。

1307120855_320x240.jpeg

監視カメラを動かすまで

fswebcamが一番簡単に使えそうだったので…

(( fswebcamをインストール))
$ sudo aptitude install fswebcam

fswebcamの出力をそのまま画像形式で返すプログラム。

(( webcam.php ))
<?php
// 画像形式、キャッシュさせない
header( "Content-Type: image/jpg" ) ;
header( "Cache-Control: no-store, no-cache, must-revalidate" );
// 連続読み出し用にファイルロック
$flock = fopen( "/var/www-support/.webcam.lock" ,
                (file_exists( "/var/www-support/.webcam.lock" )
                 ? "rb+" : "wb+" )) ;
if ( flock( $flock , LOCK_EX ) ) {
   system( "/usr/bin/fswebcam -q -d /dev/video1"
           ." -p YUYV"    // 画像形式
           ." -D 0"       // delay
           ." -S 3"       // skip frame
           ." -r 320x240" // 解像度
         //." -r 640x480"
           ." --title \"tsaitoh.net's webcam\""
           ." --jpeg 75 -" ) ;
   fclose( $flock ) ;
}
?>

webcam.php の出力画像を、連続で読み出すように、 JavaScriptで設定を書き加える。 <meta http-equiv=”refresh” content=”5″> みたいな方法だと、reload の度に画像がちらつくので、JavaScriptで reload させることになった。

(( index.php ))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320,height=320,initial-scale=1"/>
<title>自宅監視カメラ</title>
<script type="text/javascript">
<!--
var count = 0 ;
function reload() {
   count = (count + 1) % 100 ;
   // 画像を更新(キャッシュ画像を使わないように番号付)
   var img = document.getElementById( "image" ) ;
   img.src = "webcam.php?"+String(count) ;
   img.id  = "image" ;
   // 動きの少ない相手用に確認表示
   var txt = document.getElementById( "text" ) ;
   txt.innerText = "自宅監視カメラ: "+String( count ) ;
}
// -->
</script>
</head>
<body>
<p align="center">
   <img id="image" src="webcam.php" onload="reload()" />
   <div id="text"></div>
</p>