メロンパン工房

SwitchBotでデータ取得

SwitchBotはAPIでデータの取得ができますが、APIの実行回数に制限がある事や、現在の状態を取得はできても過去のデータにはアクセスできません。
そこでWebhookを使い変更時にSwitchBot側から自前のサーバーに通知してもらう事で過去のデータを自前で保管する仕組みを作りました。

MySQLにデータベース構築

※DBの構築は省略
テーブル構成はこんな感じ（JSONの生で登録しています。）

Webhookを受け付けるページを作る

適当なWebサーバー（PHPが動く環境）を用意して設置します。
設置場所例：http://api.hogehoge.jp/SwitchBot/index.php

<?php
// POSTされたJSON文字列を取り出し
$json = file_get_contents("php://input");

//データベースに格納
//[連番][サーバー受信日時][JSON生データ]

if($json == ""){
	print("Not JSON");
}else{
	try {
	  $db = new PDO('mysql:host=localhost; dbname=データベース名', 'ユーザー名', 'パスワード');
	  $db->exec('SET NAMES utf8');
	  $stt = $db->prepare('INSERT INTO SwitchBot_Log(Registration_Server_Time,input_json) 
	  VALUES(:Registration_Server_Time, :input_json)');

	  $stt->bindValue(':Registration_Server_Time', date("Y-m-d H:i:s"));
	  $stt->bindValue(':input_json', $json);
	  $stt->execute();
	  $db = NULL;
	} catch(PDOException $e) {
	  die('エラーメッセージ：'.$e->getMessage());
	}
	print("Registration: OK");
}
?>

Webhookの登録

SwitchBotのデバイス状態に変化があるとSwitchBotのサーバーからWebhookで通知を受けれるように設定します。
※「Authorization」は事前にアプリから取得してください

# AUTH="Authorization:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

# curl -H ${AUTH} -H "Content-type:application/json" -d '{ "action":"setupWebhook", "url":"http://api.hogehoge.jp/SwitchBot/", "deviceList":"ALL" }' -X POST https://api.switch-bot.com/v1.0/webhook/setupWebhook | jq .

データベースを確認

JSONのデータが溜まっていれば成功です。
これで過去のデータにもアクセスができ色々と遊べそうですね。

構築方法

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ブラウザでリアルタイムな画像が取得可能