メロンパン工房

構築方法

Raspberry Pi Zero W の初期設定
前提としてOSのインストールは完了しているものとします。

# 管理者権限
admin@ZeroW-Camera-001:~ $ sudo -i

# viの設定変更
root@ZeroW-Camera-001:~# vi ~/.vimrc
set nocompatible
set backspace=indent,eol,start

# llコマンドの有効化
root@ZeroW-Camera-001:~# vi .bashrc
alias ll='ls $LS_OPTIONS -l'

# ApacheとPHPをインストール
root@ZeroW-Camera-001:~# apt update
root@ZeroW-Camera-001:~# apt upgrade
root@ZeroW-Camera-001:~# apt install apache2 php php-dev php-fpm php-gd php-cli php-curl libapache2-mod-php
root@ZeroW-Camera-001:~# systemctl restart apache2

# sudo権限を追加
root@ZeroW-Camera-001:~# visudo
www-data        ALL=(ALL:ALL) NOPASSWD: /usr/bin/fswebcam

# ファイル生成用に書き込み権限を付ける
root@ZeroW-Camera-001:~# cd /var/www
root@ZeroW-Camera-001:/var/www# chmod 777 html

# メモリ領域に保存する画像のリンクを作成
root@ZeroW-Camera-001:/var/www# cd /var/www/html
root@ZeroW-Camera-001:/var/www/html# ln -s /dev/shm/img_scope_real-time.jpg img_scope_real-time.jpg
root@ZeroW-Camera-001:/var/www/html# mv index.html Def_index.html
root@ZeroW-Camera-001:/var/www/html# ll
total 16
-rw-r--r-- 1 root root 10701 Sep  5 23:48 Def_index.html
lrwxrwxrwx 1 root root    32 Sep  6 00:36 img_scope_real-time.jpg -> /dev/shm/img_scope_real-time.jpg
root@ZeroW-Camera-001:/var/www/html#

# 撮影スクリプトの設置
root@ZeroW-Camera-001:/var/www/html# vi camera_load.sh
---　ここから
#!/usr/bin/bash

### 多重起動の場合は処理をしない
if [ $$ -ne $(pgrep -fo "$0") ]; then
    echo "起動済みです。(Maine)"
    exit 1
fi

if [ $$ -ne $(pgrep -fo "/usr/bin/ffmpeg") ]; then
    echo "起動済みです。(/usr/bin/ffmpeg)"
    exit 1
fi

### 本プログラム
/usr/bin/ffmpeg -y -pix_fmt yuv420p -s 640x480 -framerate 2 -i /dev/video0 -update true -vf "drawtext=fontfile=/usr/share/fonts/truetype/freefont/FreeSansBold.ttf: fontsize=20: text='%{localtime:%Y-%m-%d %X}': fontcolor=red@0.9: x=10: y=10" -r 1 /dev/shm/img_scope_real-time.jpg > /dev/null 2>&1

---ここまで

※「/dev/shm/*」保存先はメモリ領域にしないとSDカードの読み書きが多くなり安定性が極端に下がります。

# ffmpegのインストール
root@ZeroW-Camera-001:/var/www/html# sudo apt install ffmpeg

# fswebcamのインストール
root@ZeroW-Camera-001:/var/www/html# apt-get install fswebcam

# 撮影用スクリプトの自動起動設定
root@ZeroW-Camera-001:/var/www/html# vi /etc/crontab
  *  *  *  *  * root cd /var/www/html/ && /usr/bin/bash /var/www/html/camera_load.sh& > /dev/null 2>&1

# Webページの作成
root@ZeroW-Camera-001:/var/www/html# vi index.php
---　ここから
<form method="post" action="./index.php">
<p>
<button type="submit" name="Button_Refresh" value="Refresh">画像更新</button>
</p>
</form>

<?php
$UserData_POST_Button_Refresh = $_POST["Button_Refresh"];
if ( "Refresh" == $UserData_POST_Button_Refresh ) {
    $CMD = 'sudo /usr/bin/fswebcam -r 640x480 -F 10 --timestamp '%Y-%m-%d %H:%M:%S (%Z)' /dev/shm/img_scope_real-time.jpg';
    exec($CMD);
    sleep(3);
    echo $UserData_POST_Button_Refresh ." '". $CMD ."' OK<BR>";
}
?>

<script>
    function reloadimg(e,timer){
        setTimeout( function(){
            e.src = "./img_scope_real-time.jpg?r=" + Math.random();
        },timer);
    }
</script>

<img src="./img_scope_real-time.jpg" onload="reloadimg(this,1000)" onerror="reloadimg(this,1500)" /><BR>
---ここまで

実際の映像

※JavaScriptで1秒毎（失敗時は1.5秒後再取得）によりWebブラウザでリアルタイムな画像が取得可能