Node-RED+Dashboardを使い、WebブラウザからPCカメラをキャプチャして画像解析する

はじめに

2018年9月現在、AIブームです。特に画像解析にAIを使うケースが増えてきました。
ビジュアルプログラミング環境であるNode-REDを使うと画像解析API（OpenCVやIBM CloudのVisual Recognitionなど）を呼び出すアプリが簡単に作れます。node-red-dashboardを使えばWebベースで画像解析アプリを作ることも可能です。

以下の画面は、Web画面にて自分のPCについているカメラを使って画像をキャプチャし、OpenCVで顔判定して顔の部分に丸を付ける、という例です。
WebブラウザでURLを開くと、HTML5の機能によりPCカメラへのアクセスを要求してきます。これを承認すると、動画欄にカメラ画像が表示されます。画像の上部にあるCaptureボタンを押すと、すぐ下のCanvasに画像をキャプチャし、Node-REDサーバにCanvas内容を送信。サーバ側は、OpenCV顔分類器で画像分析し、結果をHTMLインライン画像としてWebブラウザに表示してくれます。

※自分の顔を晒すのは嫌なので、適当な顔写真を使いました・・・

本文は、このやり方をご紹介します。

条件

いくつか条件があります。
- Webブラウザ側ではHTML5 Videoタグを使いますが、Chrome、Firefoxなど、タグをサポートしているWebブラウザが必要です
- Videoタグでカメラにアクセスするためにはhttps接続が必須のため、サーバ（Node-RED）側はhttpsで稼働させる設定が必要です（IBM Cloudはデフォルトでhttps動作、Raspberry Pi等でローカル環境でNode-REDを動かす場合は”オレオレ認証”等の対応が必要です）
- もちろん、クライアント側にはカメラ（最近のPCは標準でついていると思いますがUSB接続カメラでも可能。なお、Androidスマホ＋Chromeでも動く）が必要です

では、始めましょう

Node-REDのインストールおよびhttps設定は終わっているものとします。本文では、IBM Cloud上のNode-RED、および、Raspberry Pi上のhttps設定済みNode-REDで試しました。クライアントは両方とも同じPC（Windows10＋Chrome＋PCのビルトインカメラ）を使いました。

1. Node-REDの追加設定

Node-REDは、node-red-dashboardを使用することでWebブラウザ上にダッシュボードを簡単に作れます。このノードには、templatesノードという自由にUIの中身を書けるノード（Angular 2のコンポーネントとして記述する）があり、これを使ってVideoキャプチャや、結果画像のインライン表示を行っていきます。
また、Webブラウザとサーバ間でBase64エンコードした画像データをやり取りするため、Base64エンコード／デコードノードも併せてインストールします。

node-red-dashboard
node-red-contrib-base64

画像解析APIとして、Raspberry PiではOpenCV環境を、IBM Cloud環境では、Watson Visual Recognitionサービスを使用しました。

node-red-contrib-opencv　※先だってOpenCVそのものをapt-getで入れておくこと（Raspberry Pi）
Watson Visual Recognitionノード（IBM Cloud上のNode-REDボイラープレートなら標準で入っている）

※Node-REDに追加ノードをインストールする方法は割愛します。
※IBM CloudでWatson Visual Recognitionサービスを設定する方法は割愛します。

2. Node-REDでフローを作成する

Raspberry Pi上でOpenCVによる顔認識する例（冒頭の写真）です。

※上記フローのコードは以下。
https://github.com/arrowmeiwaracing/test/blob/master/quiita_nodeflow1
※カメラから画像をキャプチャしサーバに投げるTemplatesコードは以下。
https://github.com/arrowmeiwaracing/test/blob/master/templates_1
※判定した画像データをWebページ（ダッシュボード）上にHTMLインライン画像で表示するTemplatesコードは以下。
https://github.com/arrowmeiwaracing/test/blob/master/templates_2

IBM Cloud上で年齢推定している例です。

・・・モナリザはアラサーなんですね・・・

※フローのイメージ
　APIキーなどが入っている都合上、コードは公開しません。

終わりに

Node-REDのフローを見ると、画像を受け取った後の画像解析ノードだけが異なっていることがわかります。今回紹介した画像解析API以外にも、以下のようなものもあり、
- QRcodeを読むノード
- Google CLOUD VISION API使う例
- IBMのRecognitionでリア充判定している人
色々探してみると面白い発見があるかもしれません。