Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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ブラウザに表示してくれます。

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

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

条件

いくつか条件があります。
- 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による顔認識する例(冒頭の写真)です。
node_rei.png
※上記フローのコードは以下。
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上で年齢推定している例です。
gamen2.png
・・・モナリザはアラサーなんですね・・・

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

終わりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした