自宅で監視カメラを動かしてみた
今度の週末は、家族旅行の予定。 だけど、子どもがその間、最近病院に連れて行った婆ちゃん猫を 心配している。
そこで、使っていなかったWebカメラで、急遽、監視カメラを動かしてみた。 奥さんからは、解像度低いじゃんとツッコミを受けるが、 もともとのWebカメラの性能だと思うし…
余りにも他愛もないコードだけど、 この手のお遊びプログラムは、 学生さんに「こんなこと簡単にできるよ」と見せることも多いので、 PHPコードに改良&コメント付けをしておく。

監視カメラを動かすまで
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>