Up 「カメラ撮影」ページのプログラミング (html + PHP) 作成: 2024-12-17
更新: 2024-12-25


    Raspberry Pi において,「カメラ撮影」ページ
      http://10.10.10.1:8080/camera_finder/index.phtml
    を以下のように作成する。


    Apache のドキュメントルート / に対し,ディレクトリ
        /camera_finder
    を作成し,この中にストリーミング画像を表示する index.phtml をつくる。:

    <?php  $cmd = "/home/pi/mjpg.sh 1200 900 1 100 &";  exec( $cmd );  print "   <html>   <head>   <title>DNG Camera</title>   </head>   <body>    <center>    <img src=\"http://10.10.10.1:8080/?action=stream\" />    </center>   </body>   </html>  "; ?>


    遠隔撮影システムは,この画像表示ページに「シャッターボタン」を取り付ければ,それで出来上がりである。
    ボタンは,DNG撮影もこの先に見込んで,標準撮影用と DNG撮影用 (今回は不使用) の2個とする。

    この「シャッターボタン」の記述は:
      <a href=\"./index.phtml?button_std=pressed\">標準撮影</a> DNG撮影 <!-- 不使用 -->


    撮影は,raspistill コマンドで。
    そして,画像ファイルをディレクトリ./storage に出力する。
    よって,標準撮影コマンドは,
      raspistill -o ./storage/[filename].jpg

    但し,jpeg-streamer 稼動下では raspistill はできない。
    raspistill 実行は,これの前後に jpeg-streamer の停止と起動を措くことになる。
    よって撮影実行のコードは:
       if( isset( $_GET["button_std"] ) ) {   $cmd1 = "sudo pkill mjpg";   $cmd2 = "raspistill -o ./storage/[filename].jpg";   $cmd3 = "/home/pi/mjpg.sh 1200 900 1 100 &";   $cmd = $cmd1." && ".$cmd2." && ".$cmd3;   exec( $cmd );  }

    以上を合わせると:
    <?php  $url = "http://10.10.10.1:8080/";  $storage = "./storage/";  if( isset( $_GET["n"] ) ) {   $n = $_GET["n"];   $n++;   if( isset( $_GET["button_std"] ) ) {    $cmd1 = "sudo pkill mjpg";    $cmd2 = "raspistill -o ./storage/[filename].jpg";    $cmd3 = "/home/pi/mjpg.sh 1200 900 1 100 &";    $cmd = $cmd1." && ".$cmd2." && ".$cmd3;    exec( $cmd );   }  }  else {   $n = 0;   $cmd = "/home/pi/mjpg.sh 1200 900 1 100 &";   exec( $cmd );  }    print "   <html>   <head>    <title>Raspberry Pi Cemara</title>   </head>   <body>    <center>    <img src=\"".$url."?action=stream\" />    <br><br>    <a href=\"./index.phtml?button_std=pressed\">標準撮影ボタン</a>    標準撮影ボタン <!-- 不使用 -->    </center>   </body>   </html>  "; ?>


     註: if( isset( $_GET["n"] ) ){ $n = $_GET["n"]; ‥‥‥ } について
    かつては if( isset( $n ){ ‥‥‥ } で済んだが,いまこの書き方は無効になる。


    撮影はシャッターボタンのクリックでするわけだが,これで本当に撮影が成ったのかどうか知らせてもらわねば不安である。
    ページには,撮影が成ったことを伝える仕掛けが要る。

    撮影できたかどうかは,つぎの方法でわかる:
    1. exec( $cmd ) を exec( $cmd, $op, $result ) に換える
    2. コマンド実行後 $result に 0 が入っていれば撮影成功,0 でなければ失敗
    しかし, ページはシャッターチャンスを狙うように見ているものであるから,撮影の「成功/失敗しました」のメッセージを出すのはありとしても,それがそのまま残るのは不自然。

    ここでは,成功か失敗かに関係なく,このセッションの開始からここまでに作成されたファイル ( storage に保存) の数を表示することにする。
    撮影が成功したときは数が増え,逆に撮影が失敗したときは数に変化が無いので,撮影の成功/失敗がわかる。


    storage は,camera_finder の中で index.phtml と横並びの位置関係。
    よって,storage 内のファイルを数えるコードは,
      if( $dh = opendir( $storage ) ) {  $fn = -2;  while ( readdir($dh) !== false) {   $fn++;  }  closedir($dh); }
    ここで「$fn = -2」となっているのは,数えられるファイルに「.」と「..」の2つが加わるためである。


    [filename] は,どうするか。
    ここでは,「連番-年月日_時分秒」とする。
    そこで,[filename] を作成する記述は:
      $n++; $file_name = $n."-".date( "Ymd_His" );


    仕上げとして,ボタン「標準/DNG撮影ボタン」をボタンの絵にする。
    上のプログラムの「標準/DNG撮影ボタン」のところが,つぎに替わる:
      <img src=\"doc/button_std.jpg\" border=0> <img src=\"doc/button_dng.jpg\" border=0>

    以上を合わせる:
    <?php  $url = "http://10.10.10.1:8080/";  $storage = "./storage/";  if( isset( $_GET["n"] ) ) {   $n = $_GET["n"];   $n++;   $file_name = $n."-".date( "Ymd_His" );   if( isset( $_GET["button_std"] ) ) {    $cmd1 = "sudo pkill mjpg";    $cmd2 = "raspistill -o ./storage/".$file_name.".jpg";    $cmd3 = "/home/pi/mjpg.sh 800 800 1 100 &";    $cmd = $cmd1." && ".$cmd2." && ".$cmd3;    exec( $cmd );   } /*   if( isset( $button_dng ) ) {   } */  }  else {   $n = 0;   $cmd = "/home/pi/mjpg.sh 800 800 1 100 &";   exec( $cmd );  }  if( $dh = opendir( $storage ) ) {   $fn = -2;   while ( readdir($dh) !== false) {    $fn++;   }   closedir($dh);  }    print "   <html>   <head>    <meta charset=\"UTF-8\">    <title>Raspberry Pi Cemara</title>   </head>   <body>    <center>    <img src=\"".$url."?action=stream\" />    <br><br>    <table width=\"800\"><tr>    <td width=\"25%\" align=right>    <a href=\"./index.phtml?button_std=pressed&n=".$n."\">    <img src=\"doc/button_std.jpg\" border=0></a>    </td>    <td width=\"50%\" align=center>    <font size=7><b>".$fn."</b></font>    </td>    <td width=\"25%\" align=left>    <img src=\"doc/button_dng.jpg\"> <!-- 不使用 -->    </td>    </tr></table>    </center>    <br><br><br>   </body>   </html>  "; ?>




    かくして,つぎのページに至る: