Apache のドキュメントルート / に対し，ディレクトリ
に，ストリーミング画像を表示する index.phtml をつくる：
<html>
<head>
<title>Remote Camera</title>
</head>
<body>
<center>
<img src="http://10.10.10.1:8080/?action=stream" />
</center>
</body>
</html>
|
遠隔撮影システムは，この画像表示ページに「シャッターボタン」を取り付ければ，それで出来上がりである。
「シャッターボタン」の記述は：
<a href="./index.phtml?button=pressed">シャッターボタン</a>
MJPG-streamer から静止画像を取得するコマンドは，
wget -O ＜ファイル名＞ http://10.10.10.1:8080/?action=snapshot
よって，「シャッターボタンが押されたので，静止画像を出力する」の記述は：
<?php
if( isset( $button ) ) {
$cmd = "wget -O ＜ファイル名＞ http://10.10.10.1:8080/?action=snapshot";
exec( $cmd );
}
?>
以上を合わせると：
<?php
if( isset( $button ) ) {
$cmd = "wget -O ＜ファイル名＞ http://10.10.10.1:8080/?action=snapshot";
exec(\ );
}
print "
<html>
<head>
<title>Remote Camera</title>
</head>
<body>
<center>
<img src=\"http://10.10.10.1:8080/?action=stream\" />
<br><br>
<a href=\"./index.phtml?button=pressed\">シャッターボタン</a>
</center>
</body>
</html>
";
?>
|
ファイル名は，どうするか。
ここでは，「年月日_時分秒-連番.jpg」とする。
このファイル名を作成する記述は：
$n++;
$file_name = date( "Ymd_His" )."-".$n.".jpg";
さて，撮影はシャッターボタンのクリックでするわけだが，これで本当に撮影が成ったのかどうか知らせてもらわねば不安である。
ページには，撮影が成ったことを伝える仕掛けが要る。
撮影できたかどうかは，つぎの方法でわかる：
- exec( $cmd ) を exec( $cmd, $op, $result ) に換える
- コマンド実行後 $result に 0 が入っていれば撮影成功，0 でなければ失敗
しかし, ページに「成功/失敗しました」のメッセージを出すのは，不適当。
ページは，シャッターチャンスを狙うように見ているものである。
前回の「成功/失敗しました」のメッセージが残っているのは，おかしい。
では，「成功/失敗」は，どんなふうに知らせるか。
ここでは，成功か失敗かに関係なく，このセッションの開始からここまでに撮った写真の枚数を表示することにする。
撮影が成功したときは，数が増えるので，撮影に成功したことがわかる。
撮影が失敗したときは，数に変化が無いので，撮影に失敗したことがわかる。
撮影画像ファイルを保存するディレクトリは，/mjpg-streamer/storage である。
index.phtml と storage は /mjpg-streamer の中で横並びの位置関係なので，storage 内の jpg ファイルの数を数えるコードは，
$dir = "./storage/";
$fn = -2;
if( $dh = opendir( $dir ) ) {
while ( readdir($dh) !== false) {
$fn++;
}
closedir($dh);
}
ここで「$fn = -2」となっているのは，数えられるファイルに「.」と「..」の２つが加わるためである。
仕上げとして，ボタン「シャッターボタン」をボタンの絵にする。
上のプログラムの「シャッターボタン」のところが，つぎに替わる：
<img src=\"doc/button.jpg\" border=0>
以上を合わせる：
<?php
$dir = "./storage/";
$url = "http://10.10.10.1:8080/";
if( isset( $button ) ) {
$n++;
$file_name = date( "Ymd_His" )."-".$n.".jpg";
$cmd = "wget -O ".$dir.$file_name." ".$url."?action=snapshot";
exec( $cmd );
}
else {
$n = 0;
}
print "
<html>
<head>
<title>Remote Camera</title>
</head>
<body>
<center>
<img src=\"".$url."?action=stream\" />
<br><br>
";
if( $dh = opendir( $dir ) ) {
$fn = -2;
while ( readdir( $dh ) !== false) {
$fn++;
}
closedir( $dh );
}
print "
<table width=\"800\"><tr>
<td width=\"50%\">
<font size=7><b>".$fn."</b></font>
</td>
<td width=\"50%\" align=right>
<a href=\"./index.phtml?button=pressed&n=".$n."\">
<img src=\"doc/button.jpg\" border=0>
</a>
</td>
</tr></table>
<br><br><br>
</center>
</body>
</html>
";
?>
|
これで出来上がり！
──ではない。
このプログラムでは，ディレクトリ storage にファイルの書き込みをする。
これが成るためには，apache の実行ユーザ www-data に，「storage にファイル書き込み」の権限がなければならない。
そこで，つぎのようにする：
$ cd ~/apache/www/mjpg-streamer
$ ls -la
drwxr-xr-x 2 pi pi 4096 Feb 15 12:00 storage
$ sudo chgrp -R www-data storage
$ chmod 775 storage
$ ls -la
drwxrwxr-x 2 pi www-data 4096 Feb 15 12:45 storage
かくして，つぎのページに至る：
|
画像への httpアクセスを,＜ポート80 (apache) を使用＞に変更