update.Node-RED+Dashboardを使い、WebブラウザからPCカメラをキャプチャして画像解析するはじめに2018年9月現在、AIブームです。画像解析にAIを使うケースが増えてきました。Recognitionなど)を呼び出すアプリが簡単に作れます。node-red-dashboardを使えばWebベースで画像解析アプリを作ることも可能です。以下の画面は、Web画面にて自分のPCについているカメラを使って画像をキャプチャし、OpenCVで顔判定して顔の部分に丸を付ける、という例です。WebブラウザでURLを開くと、HTML5の機能によりPCカメラへのアクセスを要求してきます。これを承認すると、動画欄にカメラ画像が表示されます。画像の上部にあるCaptureボタンを押すと、すぐ下のCanvasに画像をキャプチャし、Node-REDサーバにCanvas内容を送信。サーバ側は、OpenCV顔分類器で画像分析し、結果をHTMLインライン画像としてWebブラウザに表示してくれます。本文は、このやり方をご紹介します。条件いくつか条件があります。クライアント側にはカメラ(最近のPCは標準でついていると思いますがUSB接続カメラでも可能。Androidスマホ+Chromeでも動く)が必要ですでは、始めましょうNode-REDのインストールおよびhttps設定は終わっているものとします。Pi上のhttps設定済みNode-REDで試しました。クライアントは両方とも同じPC(Windows10+Chrome+PCのビルトインカメラ)を使いました。Node-REDの追加設定Node-REDは、node-red-dashboardを使用することでWebブラウザ上にダッシュボードを簡単に作れます。2のコンポーネントとして記述する)があり、これを使ってVideoキャプチャや、結果画像のインライン表示を行っていきます。Webブラウザとサーバ間でBase64エンコードした画像データをやり取りするため、Base64エンコード/デコードノードも併せてインストールします。Recognitionサービスを使用しました。Cloud上のNode-REDボイラープレートなら標準で入っている)※Node-REDに追加ノードをインストールする方法は割愛します。Recognitionサービスを設定する方法は割愛します。Pi上でOpenCVによる顔認識する例(冒頭の写真)です。※上記フローのコードは以下。https://github.com/arrowmeiwaracing/test/blob/master/quiita_nodeflow1※カメラから画像をキャプチャしサーバに投げるTemplatesコードは以下。https://github.com/arrowmeiwaracing/test/blob/master/templates_1※判定した画像データをWebページ(ダッシュボード)上にHTMLインライン画像で表示するTemplatesコードは以下。Cloud上で年齢推定している例です。※フローのイメージAPIキーなどが入っている都合上、コードは公開しません。終わりにNode-REDのフローを見ると、画像を受け取った後の画像解析ノードだけが異なっていることがわかります。探してみると面白い発見があるかもしれません。upLoginユーザーは見つかりませんでした。