はじめに
こちらはSORACOM Advent Calendar 2021 12日目の記事です。
非常にハイレベルな投稿が続く中、図々しく2年連続ヒヨッコ投稿で失礼します。
本記事は IoTLT広島特別編 with HiBiS のLTで発表した装置の実装方法について説明しています。
イベントの様子、内容については以下をご覧ください。
概要
最近、AndroidスマホでNode-REDを動かすことができる、RedMobileというものを教えてもらいました。
https://play.google.com/store/apps/details?id=com.okhiroyuki.redmobile
有償ではありますが、500円とお求めやすい価格で優秀なアプリだと思います。
このアプリを使い、定周期で画像を撮影して、SORACOMで可視化する以下のような簡易の監視カメラを作ってみたので、紹介させていただきます。
https://soracom.jp/recipes_index/2956/
前提
当方、以下の構成です。
- Androidスマホ：Redmi 9C（Xiaomi製）
- Androidバージョン：10
- インターネット接続環境：自宅Wi-Fi（SORACOMへの接続は後述のSORACOM Arcを使用）
準備
以下を事前にやります。
- スマホにGoogleプレイからRedMobileをインストールする
- しょーちゃんさんの手順を参考に、スマホにWireGuardをインストール、QRコードで設定し、SORACOM Arcに接続できるようにしておく
- RedMobileはスマホがスリープになると動かないようなので、スリープをオフにしておく
RedMobileの起動と編集画面の表示
RedMobileを起動し、Startをタップします。
Node-REDが起動され、「http://（ローカルIP）:1880/red」と表示されます。
同一ネットワークのパソコンでブラウザを起動し、先ほどの 「http://（ローカルIP）:1880/red」 にアクセスするとNode-REDの編集画面になります。
カメラの撮影と確認
以下にRedMobileで写真を撮影するサンプルが提供されています
https://gist.github.com/okhiroyuki/e9035569976b5e6e439b232f79abe40e
これをインポート（Node-RED日本ユーザ会へのリンク）すると以下のようになります。
このフローで1～3を順にクリックすると撮影ができます。
さらにWebブラウザから「http://（ローカルアドレス）/api/image」にアクセスすると撮影した画像が表示できます。
・・できるはずでした。
ハマりポイント1
この状態で撮影しました。
しかし「http://（ローカルアドレス）/api/image」にアクセスしても正しく画像が表示されません。
なんとなくデバッグメッセージ見てると画像データがうまく渡ってなさそうってことで以下のfunctionノードを変更してみました。
変更内容は以下の通り。
変更前：flow.set("image",msg.payload[0]);
変更後：flow.set("image",msg.payload.split(",")[1]);
msg.payload = flow.get("image");
return msg;
変更後にデプロイして再度撮影してブラウザでアクセス・・
やったー！
撮影画像のダッシュボード表示
Node-REDにはダッシュボード機能を使い、スマホで撮影画像を確認できるようにしてみます。
dashboardのtemplateノードを追加し、functionノードに接続します。
templateノードのグループを設定し、HTMLコードを記述します。
HTMLコードは以下です。
<div>
<img src="data:image/jpeg;base64,{{msg.payload}}" width="144" height="312">
</div>
※widthとheightは適宜変更してください。
スマホのRedMobileでダッシュボードを起動するには以下のアイコンをタップします。
デプロイして撮影・・
やったー！
SORACOMへのアップロード
以降はWireGuardを起動し、SORACOM Arcに接続して作業します。
Harvest Filesへのアップロード
SIMグループ設定
こちらの手順を参考にバーチャルSIMのSIMの所属グループを作成し、バーチャルSIMに割り当てます。
デフォルトパスは「/sp/:time.jpg」にしました。
ノード追加
Node-REDのfunctionノードの後ろにhttp requestノードを追加します。
メソッドは「POST」、URLは「http://harvest-files.soracom.io」です。
ハマりポイント2
Harvest Filesに上げたJPEGファイルが正しく表示されませんでした。
結論から言うと、Content-Typeヘッダの追加とデータの変換（base64のデコード）が必要だったようで、functionノードとhttp requestノードの間にchangeノードとfunctionノードを追加したらうまくいきました。
※さらっと書いてますが、基礎知識不足でかなりハマりました・・
changeノードでは「msg.headers.Content-Type」に「image/jpeg」を代入。
functionノードは「msg.payload = new Buffer(msg.payload, 'base64');」を追加。
Lagoonで可視化
こちらの手順を参考にSORACOM Harvest FilesとSORACOM Lagoonを連動させ、つづけてLagoonで可視化できます。
やりました！
定期実行設定
これだとNode-REDのinjectノードを手動クリックでしか動かないので、自動定期実行するようにします。
やり方は簡単でcameraのノードを直結して、最初のinjectノードを定期実行にするだけです。
例えば10分毎に写真を撮影する場合は以下とのなります。
応用
実際にイベントで発表したものは光センサーと連動させたものでした。
Node-RED
ダッシュボード（スマホ画面）
SORACOM Lagoon
また機会があれば実装方法をご紹介できればと思います。
そのほかにもスマホには以下のようなたくさんのセンサーが搭載されています。
- モーションセンサー
- ジャイロセンサー
- 音センサー
- GPS
写真やセンサーの組み合わせることで可能性が広がり、アイデア次第でいろいろできそうだと思いました。
Special thanks
この記事はすべて以下のしょーちゃんさんのブログから始まりました。
https://zenn.dev/showm001/articles/2021-08-12-01
またSORACOM UGのもくもく会では直接ご本人からアドバイスをいただくことができました。
参考にしたソラコムのIoTレシピも非常に丁寧で実用的です。
しょーちゃんさんおよび関係者の皆様、心より感謝申し上げます。
すべてのご縁に感謝しつつ、2年連続MVCの@1stshipさんにおつなぎします・・