ラズパイ4 撮影写真をブラウザで見る(表示編)

概要

 先回投稿でラズパイ4で撮影した写真をレンタルサーバーにFTPアップロードするプログラムを作成しましたが、今回はアップロードした写真をブラウザーで見る方法について検討します。
 また、ラズパイ4からは一定の時間間隔で写真を送ってきますので、レンタルサーバー側のファイル量を制限する方法についても検討します。

構成

 構成は下図のイメージです。先回投稿した通り、ラズパイ4接続USBカメラで撮影した写真を一定の時間間隔でレンタルサーバーにFTPアップロードします。今回はこれらアップロード写真のブラウザーからの閲覧方法(最新写真表示処理)とサーバー側にアップロードした画像がいっぱいになりパンクしない様にファイル削除処理について検討しています。

ブラウザ閲覧(最新写真表示)

①結果

 下記は私のスマホのブラウザーで閲覧している状態をスクリーンキャプチャーしたものです。レンタルサーバー側に配置したPHPプログラムで最新5枚の写真を表示する様にしています。スクロールするとあと3枚の画像を確認出来ます。

②プログラム概要

 下記PHPプログラムをレンタルサーバー側のアップロード先と同じフォルダーに配置して、ブラウザーでURL指定して呼び出すことで最新5枚の写真を確認することが出来ます。自分のスマホで確認しただけで、他の環境では確認していません。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>RASPI_TEST</title>

    <style>
	.resizeimage img { width: 95vw; }
    </style>
</head>

<body>
<p class="resizeimage">

    <?PHP
	$s_file = glob("*.jpg");
	
	for( $ii=0 ; $ii < count($s_file) ; $ii++ ){
	    if($ii < 5 ){
		$file_n = basename($s_file[ count($s_file)- $ii - 1 ]);
		
		echo '<img src="'.$file_n.'">';

		echo '"'.$file_n.'"';
	    	echo '<BR>';
	    }
	}

    ?>

</p>
</body> 

</html>

ファイル削除処理

①結果

 下図はサーバー側のファイル保管状況です。ラズパイ側から、1分に1回の時間間隔で撮影画像をアップロードし、8分に1回の時間間隔でファイル削除処理する様にしています。
 全ファイル削除するとブラウザーで閲覧できなくなってしまいますので、最低限ブラウザー表示用の写真ファイルを残し、一定の時間間隔でファイルを削除します。

②プログラム概要

 構成図に示した通り、ファイル削除処理はラズパイ側からHTTP通信でレンタルサーバー側に配置している実際にファイル削除を行うPHPプログラムを呼び出します。

  下記PHPプログラムをレンタルサーバー側のアップロード先と同じフォルダーに配置し、ラズパイ側から呼び出します。ブラウザーから、URL指定し呼び出しても同じ処理が実行されますが、確実な方法ではありません。また、レンタルサーバー側で、“cron” 設定し、定期的に処理を実行するのが良いのですが、ラズパイの python からHTTP通信する勉強にもなるので、今回はこの方法を採用しました。

◆レンタルサーバー側のファイル削除処理PHPプログラム◆

<?PHP
error_reporting(0);
mb_language("ja");
mb_internal_encoding("UTF-8");

$rcv_cmd=$_POST["data"];

$s_file = glob("*.jpg");
	
for( $ii=0 ; $ii < count($s_file) ; $ii++ ){
    if($ii > 5 ){
	$file_n = basename($s_file[ count($s_file)- $ii - 1 ]);
	unlink($file_n);
    }
}

print "CMD : ".$rcv_cmd;
?>

 

 次はラズパイ側のファイル削除要求プログラムです。url の途中の “*” 部は、実際のパスに置き換える必要があります。
 PHPプログラムから送信データを 次の様に加工し返信してしていることも確認出来ました。
  【返信データ】:”CMD : CMD_DELETE_FILE”

 今回は送信データに意味はありませんが、計測データをサーバーにアップロードする場合等にもこの方法が使えそうです。 

import requests
        
url = 'https://*****/*****/*****/delete_image.php'
response = requests.post(url, data={'data':'CMD_DELETE_FILE'})
print(response.text)

 cron を使って プログラム(http01.py)を、8分間隔で実行する様に設定し完了です。


まとめ

 とりあえず、出来ました。