ドアホン画像を保存閲覧する設定(その3)

ドアホン画像を保存閲覧する設定(その2) にて、uudeview.sh で日付ディレクトリに以下のような画像ファイルが溜まっていくことが確認できたなら、

```shell-session
user@rapiq:~ $ (cd sda3/DCAM/Rec/motion/2021/05/22/; ls -lt|head)
-rw-r--r-- 1 user user 16993 May 22 15:14 SC2_210522151444-1.JPG
・・・
```

いよいよ、ブラウザで縮小画像が閲覧できる設定を行なう。

###(12) lighttpd HTTPサーバのインストール

```shell-session
# apt-get install lighttpd
# cd /etc/lighttpd
# diff -u lighttpd.conf.org lighttpd.conf
--- lighttpd.conf.org	2020-09-18 19:58:58.000000000 +0900
+++ lighttpd.conf	2021-02-15 17:42:14.766502750 +0900
@@ -1,6 +1,7 @@
 server.modules = (
 	"mod_indexfile",
 	"mod_access",
+	"mod_accesslog",
 	"mod_alias",
  	"mod_redirect",
 )
@@ -12,6 +13,8 @@
 server.username             = "www-data"
 server.groupname            = "www-data"
 server.port                 = 80
+server.dir-listing          = "enable"
+accesslog.filename          = "/var/log/lighttpd/access.log"

 # strict parsing and normalization of URL for consistency and security
 # https://redmine.lighttpd.net/projects/lighttpd/wiki/Server_http-parseoptsDetails
#
# ls -l /var/www/html/sda3
lrwxrwxrwx 1 root root 9 Mar 25 08:25 /var/www/html/sda3 -> /dsk/sda3
```

###(13) reduce_img.sh reduce_img.py を用意する

```sh:/usr/local/bin/reduce_img.sh
#!/bin/bash
IDNT='$Id: reduce_img.sh,v 1.00 2021/05/23 16:50:50 user Exp $'
PROGNAME=$(basename $0)
usage() {
    echo "Usage: $PROGNAME [OPTIONS]"
    echo "OPTIONS:"
    echo "  -h, --help"
    echo "  -m, --mail-send"
    exit 1
}
LogMailSend() {
    MDHM=`date '+%Y/%m/%d(%a) %H:%M:%S'`
    SUBJECT=$1
    MESS=$2
    logline=`echo $MDHM; echo $MESS`
    SEND_ADDR="ABC12345@nifty.com"
    (echo "Mime-Version: 1.0"; echo "Content-Type: Text/Plain; charset=iso-2022-jp"; echo "Content-Transfer-Encoding: 7bit"; echo "Subject: $SUBJECT"; echo "To: ${SEND_ADDR}"; echo "From: $SEND_ADDR"; echo "";nkf -j $MESS) | /usr/sbin/exim4 -f $SEND_ADDR $SEND_ADDR
}
Create_html_log() {
    HTMLF=$1
    TITLE=$2
    echo "" >> $PROGLOG
    echo ${dst_path}/${HTMLF} >> $PROGLOG
    RSLH=`(cd ${dst_path}; ls -l ${HTMLF}|awk '{print $5,$6,$7,$8,$9}')`
    echo $RSLH >> $PROGLOG
    DPATH=`echo ${dst_path}| sed -e "s/^.*\(sda.*\)$/\1/"`
    IPADR=`ifconfig br1| awk '/inet / {print $2}'`
    DPURL="http://${IPADR}/${DPATH}/${HTMLF}"
    echo "$TITLE" >> $PROGLOG
    echo $DPURL  >> $PROGLOG
}
OPT=`getopt -o hm -l help,mail-send -- "$@"`
if [ $? != 0 ] ; then
    exit 1
fi
eval set -- "$OPT"

while true
do
    case "$1" in
	-h | --help)
            usage
            exit 1
            ;;
        -m | --mail-send)
            ARG_M=1
            shift 1
            ;;
	--)
            shift
            break
            ;;
	*)
            echo "Internal error!" 1>&2
            exit 1
            ;;
    esac
done

CTIME=`date '+%Y/%m/%d(%a)%H:%M:%S'`
CMDHM=`date '+%m/%d %H:%M'`
  YY1=`date '+%Y'`
  MM1=`date '+%m'`
  DD1=`date '+%d'`
  HM1=`date '+%H%M'`
BASEDIR="${HOME}/sda3/DCAM/Rec"
MYNM=`basename $0`
umask 022
if [ ! -d ${BASEDIR} ]; then
    ERRMSG="$CTIME $MYNM dir NOT FOUND $BASEDIR."
    LogMailSend "$MYNM FAIL1" "$ERRMSG"
    logger $ERRMSG
    exit 1
fi
cd ${BASEDIR};
if [ $? != 0 ] ; then
    ERRMSG="$CTIME $MYNM CANNOT cd $BASEDIR."
    LogMailSend "$MYNM FAIL2" "$ERRMSG"
    logger $ERRMSG
    exit 1
fi

dst_path="${BASEDIR}/motion/${YY1}/${MM1}/${DD1}"
if [ ! -d ${dst_path} ]; then
	mkdir -p ${dst_path}
	if [ $? != 0 ]; then
	    ERRMSG="$CTIME $MYNM Cannot mkdir $dst_path."
	    LogMailSend "$MYNM FAIL3" "$ERRMSG"
	    logger $ERRMSG
	    exit 1
	fi
fi
cd ${dst_path}
PROGLOG=EXEC_LOG.txt
echo "$CTIME $HOSTNAME LOG" > $PROGLOG
echo "+++ `date` reduce_img.py" >> TIME_RDUCE.txt
/usr/local/bin/reduce_img.py 2>&1 >> TIME_RDUCE.txt
Create_html_log "reduce.html" " --- File Name Sort WEB PAGE ---"
/usr/local/bin/reduce_img.py -t 2>&1 >> TIME_RDUCE.txt
Create_html_log "reduce_ts.html" " --- Time Stamp Sort WEB PAGE ---"

if  [ -z $ARG_M ]; then
    cat $PROGLOG
else  ## option -m --mail-send のとき
    echo "" >> $PROGLOG
    DU_H=`du -sh .|awk '{print $1}'`
    echo "Directory SIZE  'du -sh .'    = ${DU_H}" >> $PROGLOG
    NUMF=`ls -1 2>/dev/null|wc -l`
    echo "Number of files 'ls -1|wc -l' = ${NUMF}" >> $PROGLOG
    NDR1=`ls -1 DR1_*.JPG 2>/dev/null|wc -l`
    echo "  DR1 'ls -1 DR1_*.JPG|wc -l' = ${NDR1}" >> $PROGLOG
    NDR2=`ls -1 DR2_*.JPG 2>/dev/null|wc -l`
    echo "  DR2 'ls -1 DR2_*.JPG|wc -l' = ${NDR2}" >> $PROGLOG
    NSC1=`ls -1 SC1_*.JPG 2>/dev/null|wc -l`
    echo "  SC1 'ls -1 SC1_*.JPG|wc -l' = ${NSC1}" >> $PROGLOG
    NSC2=`ls -1 SC2_*.JPG 2>/dev/null|wc -l`
    echo "  SC2 'ls -1 SC2_*.JPG|wc -l' = ${NSC2}" >> $PROGLOG
    NSC3=`ls -1 SC3_*.JPG 2>/dev/null|wc -l`
    echo "  SC3 'ls -1 SC3_*.JPG|wc -l' = ${NSC3}" >> $PROGLOG
    NWC1=`ls -1 WC1_*.JPG 2>/dev/null|wc -l`
    echo "  SC1 'ls -1 WC1_*.JPG|wc -l' = ${NWC1}" >> $PROGLOG

    LogMailSend "$MYNM DAILY REPORT" "$PROGLOG"
fi
echo "---" >> TIME_RDUCE.txt
```

; (参照URL)
; https://qiita.com/damyarou/items/2b876fff081fbf5f339e
;   2017年01月19日 Pythonとhtmlで写真を表示

```py:/usr/local/bin/reduce_img.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-
# '$Id: reduce_img.py,v 1.00 2021/05/23 16:50:50 myname $'
"""
Generate HTML to display a reduced image using Python
Usage:
    reduce_img.py [-t] [-v]
    reduce_img.py -h --help
Options:
    -t         ImageFile Sorted TimeStamp (Default Filename)
    -v         Show verbose message
    -h --help  Show this screen and exit
Input:
    Current Directory .JPG Files
Output:
    reduce.html     HTML ImageFile Sorted Filename
    reduce_ts.html  HTML ImageFile Sorted TimeStamp
"""

import os
from PIL import Image
from docopt import docopt

def main():
    args = docopt(__doc__)

    filenames = os.listdir('./')
    imgl=[]
    ww=[]
    hh=[]
    if args['-t']:
        sortfiles = sorted(filenames, key=lambda t: os.stat(t).st_mtime)
    else:
        sortfiles = sorted(filenames)
    for fname in sortfiles:
        path, ext = os.path.splitext( os.path.basename(fname) )
        if ext=='.JPG' and path[0:2]!='._':
            pic=path+ext
            im=Image.open(pic)
            w=im.size[0]
            h=im.size[1]
            if args['-v']:
                print(pic, w, h)
            imgl=imgl+[pic]
            ww=ww+[w]
            hh=hh+[h]
    #print(imgl, ww, hh)

    outf = 'reduce'
    if args['-t']:
        outf += '_ts'
    outf += '.html'        
    f=open(outf,'w')
    f.write('<html>\n')
    f.write('<body>\n')
    f.write('<table>\n')
    n=len(imgl)
    m=int(n/5)+1
    k=-1
    for i in range(0,m):
        f.write('<tr>\n')
        for j in range(0,5):
            k=k+1
            if k<=n-1:
                pic=imgl[k]
                w1=200
                h1=int(hh[k]*200/ww[k])
                f.write('<td align="center"><img src="'+pic+'" alt="pic" width="'+str(w1)+'", height="'+str(h1)+'"><br><a href="'+pic+'">I'+pic+'<a></td>\n')
            else:
                f.write('<td></td>\n')
        f.write('</tr>\n')
    f.write('</table>\n')
    f.write('</body>\n')
    f.write('</html>\n')
    f.close()
    
if __name__ == '__main__':
    main()
```

pythonでdocoptがないときpython-docoptをインストール

```shell-session
user@rapiq:~ $ /usr/local/bin/reduce_img.sh
Traceback (most recent call last):
  File "/usr/local/bin/reduce_img.py", line 24, in <module>
    from docopt import docopt
ImportError: No module named docopt　　  ＃ docoptをインストール
user@rapiq:~ $ sudo apt-get install python-docopt
```

###(14) reduce_img.sh のスクリプト実行とWeb閲覧

```
user@rapiq:~ $ /usr/local/bin/reduce_img.sh  ＃スクリプト実行
2021/05/24(Mon)09:03:34 rapiq LOG

/home/user/sda3/DCAM/Rec/motion/2021/05/24/reduce.html
2006 May 24 09:03 reduce.html
 --- File Name Sort WEB PAGE ---
http://192.168.0.8/sda3/DCAM/Rec/motion/2021/05/24/reduce.html

/home/user/sda3/DCAM/Rec/motion/2021/05/24/reduce_ts.html
2006 May 24 09:03 reduce_ts.html
 --- Time Stamp Sort WEB PAGE ---
http://192.168.0.8/sda3/DCAM/Rec/motion/2021/05/24/reduce_ts.html
user@rapiq:~ $
```

reduce_img.sh スクリプト実行で、reduce.html と reduce_ts.html が出来るのでブラウザで、
`http://192.168.0.8/sda3/DCAM/Rec/motion/2021/05/24/reduce.html
`
を開いて画像表示できることを確認する。そして、/etc/crontab に登録する。

```shell-session
user@rapiq:~ $ grep reduce_img.sh /etc/crontab
58 23 * * *	user	/usr/local/bin/reduce_img.sh -m
```

毎日23:58にcronにてreduce_img.shを走らせる。reduce_img.sh -m で reduce.htmlが出来てメール送信 "件名:reduce_img.sh DAILY REPORT" されるので、このメールに含まれるリンクをタップして、ドアホンカメラ画像を閲覧するようすを示す。

| reduce_img表示例_01 | reduce_img表示例_02 | reduce_img表示例_03 | reduce_img表示例_04 |
|:------:|:------:|:------:|:------:|
|<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499844/8c93d566-520e-c813-2dd7-c48fcae2ec2b.jpeg">|<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499844/4ae02a92-cef7-b173-aa6a-7ca11fd32da9.jpeg">|<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499844/515a5ff2-3d52-b1de-e237-39bc8128af3f.jpeg">|<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499844/9aeb4bf7-f24b-51ca-e306-56b8cea398a7.jpeg">|

画像にはモザイクをかけている。一部分だけ参考にモザイクなしのサマリー縮小画像リンクを、タップで、ドアホン親機のメール添付画像である青いクルマ映像が表示されている。

###(15) あとがき

ドアホンの本体周辺部品はネットですべて購入して、自分で取り付けたので、工事設置費用はかからなかった。LANケーブルを30-40mを引き回すのがやや難があったものの、のんびり楽しみながらちょっとずつ設置取付し満足できる仕上がりになっている。

画質が640x480と低く、人感センサーと動作検知のパラメータ反応も精度が高いものではないが、まあ役に立っている。ドアホンとカメラが反応すると、30秒の動画がSDメモリに保存される。この動画が通信で取り込めないのが残念だ。今回、カメラの記録チェックの見通しが良くなり、みたい日時はハッキリするので、SDカードを覗いて動画確認しよう。
「ドアホンコネクト」アプリで30秒の動画が見れるが保存機能はなく快適に動いてくれない。

ドアホンとしての品質と使い勝手に大きな問題はなく、安定して長く使える良い製品だと思っている。

インターホン・テレビドアホン VL-SWH705KS 
商品説明 https://panasonic.jp/door/products/swh705ks.html
取扱説明 https://panasonic.jp/door/p-db/VL-SWH705KS_manualdl.html
iOSアプリ「ドアホンコネクト」https://apps.apple.com/jp/app/id1182842134
iOSアプリ「アクセステスター」https://apps.apple.com/jp/app/id1137006481

(その1)に戻る。https://qiita.com/borg5618/items/7011ca75075b7e3a2ea0