LoginSignup
10
0

More than 1 year has passed since last update.

SORACOMAdvent Calendar 2021Day 12
@ozk009(Norio Ozaki)

Androidスマホで簡易監視カメラをつくる

Last updated at Posted at 2021-12-11

はじめに

こちらは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を使用）

準備

以下を事前にやります。

  1. スマホにGoogleプレイからRedMobileをインストールする
  2. しょーちゃんさんの手順を参考に、スマホにWireGuardをインストール、QRコードで設定し、SORACOM Arcに接続できるようにしておく
  3. RedMobileはスマホがスリープになると動かないようなので、スリープをオフにしておく

RedMobileの起動と編集画面の表示

RedMobileを起動し、Startをタップします。
image.png
Node-REDが起動され、「http://（ローカルIP）:1880/red」と表示されます。
image.png
同一ネットワークのパソコンでブラウザを起動し、先ほどの 「http://（ローカルIP）:1880/red」 にアクセスするとNode-REDの編集画面になります。
image.png

カメラの撮影と確認

以下にRedMobileで写真を撮影するサンプルが提供されています
https://gist.github.com/okhiroyuki/e9035569976b5e6e439b232f79abe40e
これをインポート（Node-RED日本ユーザ会へのリンク）すると以下のようになります。
image.png

このフローで1～3を順にクリックすると撮影ができます。
image.png
さらにWebブラウザから「http://（ローカルアドレス）/api/image」にアクセスすると撮影した画像が表示できます。
・・できるはずでした。

ハマりポイント1

この状態で撮影しました。
image.png

しかし「http://（ローカルアドレス）/api/image」にアクセスしても正しく画像が表示されません。
image.png
なんとなくデバッグメッセージ見てると画像データがうまく渡ってなさそうってことで以下のfunctionノードを変更してみました。
image.png
変更内容は以下の通り。

変更前：flow.set("image",msg.payload[0]);
変更後：flow.set("image",msg.payload.split(",")[1]);
msg.payload = flow.get("image");
return msg;

変更後にデプロイして再度撮影してブラウザでアクセス・・
やったー！
image.png

撮影画像のダッシュボード表示

Node-REDにはダッシュボード機能を使い、スマホで撮影画像を確認できるようにしてみます。
dashboardのtemplateノードを追加し、functionノードに接続します。
image.png

templateノードのグループを設定し、HTMLコードを記述します。
image.png
HTMLコードは以下です。

<div>
      <img src="data:image/jpeg;base64,{{msg.payload}}" width="144" height="312">
</div>

※widthとheightは適宜変更してください。

スマホのRedMobileでダッシュボードを起動するには以下のアイコンをタップします。
image.png

デプロイして撮影・・
やったー！
image.png

SORACOMへのアップロード

以降はWireGuardを起動し、SORACOM Arcに接続して作業します。

Harvest Filesへのアップロード

SIMグループ設定

こちらの手順を参考にバーチャルSIMのSIMの所属グループを作成し、バーチャルSIMに割り当てます。
image.png
デフォルトパスは「/sp/:time.jpg」にしました。

ノード追加

Node-REDのfunctionノードの後ろにhttp requestノードを追加します。
image.png
メソッドは「POST」、URLは「http://harvest-files.soracom.io」です。
image.png

ハマりポイント2

Harvest Filesに上げたJPEGファイルが正しく表示されませんでした。
image.png

結論から言うと、Content-Typeヘッダの追加とデータの変換（base64のデコード）が必要だったようで、functionノードとhttp requestノードの間にchangeノードとfunctionノードを追加したらうまくいきました。
image.png
※さらっと書いてますが、基礎知識不足でかなりハマりました・・
changeノードでは「msg.headers.Content-Type」に「image/jpeg」を代入。
image.png
functionノードは「msg.payload = new Buffer(msg.payload, 'base64');」を追加。
image.png

Lagoonで可視化

こちらの手順を参考にSORACOM Harvest FilesとSORACOM Lagoonを連動させ、つづけてLagoonで可視化できます。
image.png
やりました！
image.png

定期実行設定

これだとNode-REDのinjectノードを手動クリックでしか動かないので、自動定期実行するようにします。
やり方は簡単でcameraのノードを直結して、最初のinjectノードを定期実行にするだけです。
image.png
例えば10分毎に写真を撮影する場合は以下とのなります。
image.png

応用

実際にイベントで発表したものは光センサーと連動させたものでした。

Node-RED

image.png

ダッシュボード（スマホ画面）

image.png

SORACOM Lagoon

image.png

また機会があれば実装方法をご紹介できればと思います。
そのほかにもスマホには以下のようなたくさんのセンサーが搭載されています。

  • モーションセンサー
  • ジャイロセンサー
  • 音センサー
  • GPS

写真やセンサーの組み合わせることで可能性が広がり、アイデア次第でいろいろできそうだと思いました。

Special thanks

この記事はすべて以下のしょーちゃんさんのブログから始まりました。
https://zenn.dev/showm001/articles/2021-08-12-01
またSORACOM UGのもくもく会では直接ご本人からアドバイスをいただくことができました。
参考にしたソラコムのIoTレシピも非常に丁寧で実用的です。
しょーちゃんさんおよび関係者の皆様、心より感謝申し上げます。
すべてのご縁に感謝しつつ、2年連続MVCの@1stshipさんにおつなぎします・・

10
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
0