Tech Sketch Bucket of Technical Chips by TIS Inc.

Kinect + OpenNIを使用して取得した「空間の使用頻度」をsocket.ioを利用してリアルタイムに確認する - ① (環境構築編)

Pocket

Kinect + OpenNIを使って「空間の使用頻度」を測定し、クライアント側にリアルタイムに送信しHeatmapを作成します。まずは環境構築を実施します。

Kinect使ってますか?

最近はLeap MotionMYOなど動きを感知して遊べるデバイスが増えつつあります。
今後どういったデバイスが流行るのかは未知数ですが、この分野は今後も色々と楽しそうですね。

さて、新しいデバイスが増えているとはいえKinectは今でもまだまだ遊べる素敵なデバイスです。
当ブログでも、Kinectに関するトピックを何回か取り上げているので、ご覧いただくとKinectを使って色々と遊べることが分かると思います。

今回は、Kinectの醍醐味であるDepthデータを利用して空間の使用状況を集計し、リアルタイムでHeatMap※を作成してみます。

※HeatMapとは通常Webページ上で多数の閲覧者の視線がどのように分布しているかを表したものですが、今回はKinectを利用して手などを入れた場所と頻度をHeatMap化してみます。
HeatMapの実装に際してはこちらを使わせていただきました。

想定する利用シーン

今回は、「Kinectをどこかに設置しておいて別の場所で状況を監視するようなアプリケーションを作れないか?」という発想からデモを作ってみました。
例えば、Kinectを本屋やスーパーマーケットのような場所に設置し、お客様がどの場所をどれくらい触ったか等の情報を取得することで、「購入していないけど実は気になって手にとって見た商品がどれくらいあるのか?」などの売上げだけでは分からないような情報が取得できるようになるかもしれません。
今回はKinectの前に手をかざすとKinectからの距離を測定、サーバにデータを送信し、ブラウザ側をリアルタイムに更新するデモを作成してみました。

デモ


完成イメージはこんな感じになりました。
左下の画面がKinectから取得した画面になります。Kinectの前方で手などをかざすと、Kinectからの距離を算出し正面からみた時の距離を描画します。その後、サーバを介してブラウザにリアルタイムでHeatMap表示されているのがわかると思います。(画面右側)

また、今回のアプリケーションでは下図のようにKinectを地面から上を見上げるように配置しています。

kinect_haiti2.jpg

デモでは同じPCを使っていますが、別のPCにも通信可能です。もちろん、複数のブラウザに同時にデータ送信することも可能です。

構成

先ほどのデモアプリケーションの全体像は以下のとおりです。

image_zentai.png

本アプリケーションは、以下のような順序で動作します。

  • Kinectのセンサ情報を集計描画してサーバに送信する(図中の①~④が該当)
  • サーバからクライアントにデータをリアルタイム送信(図中の⑤が該当)

検証に使用したアプリケーション、モジュール等とバージョン

今回使用したアプリケーションやモジュールのバージョンは以下のとおりです。

[Kinect側]

OpenNI SDK 2.0 Depthデータの取得、プロジェクション座標からリアル座標への変換等で使用
OpenCV 2.4.3 OpenNIから渡されたデータを画面に表示するために使用
libcurl 7.18.0 Kinectから取得したデータをサーバに送信するために使用

[サーバ側]

サーバ側はNode.jsを使っています。
Kinectで作成したデータを受信するために、RestAPIを準備しました。

Node 0.8.22 サーバサイドJavaScript言語
express 3.1.0 Webアプリケーションフレームワーク
express-resource 1.0.0 Express上でRestAPIを作成するために使用
ejs-locals 1.0.2 ejsのテンプレート機能を使うために使用
socket-io 0.9.13 クライアント側とのデータを送受信をするために使用

[クライアント(ブラウザ)側]

クライアント側ではHeatMapを作成するために、Heatmap.jsを使っています。
また、見た目を簡単にそれっぽくするためにBootstrapを使いました。

Bootstrap 2.3.1
Heatmap.js -

動作確認環境

本アプリケーションは以下の環境で動作確認を実施しています。

Kinect側 Windows7 SP1 KinectとOpenNI、OpenCVが動かせる環境であれば問題ないと思います
サーバ側 Amazon Web Services EC2(Amazon Linux) Node.jsが動けばどこでも動くハズです
クライアント側 Google Chrome 25.0.1364.172 m
Firefox 19.0.2

ソースコードや実行ファイルのダウンロード

以下に、ソースコード等を置いてあります。

https://github.com/tech-sketch/kinect_realtime_sample

フォルダ構成は大きく分けて以下のような構成になっています。

  • /kinect-libcurl-sample/
    →Kinectからデータを取得し、サーバ側にPostする部分
  • /kinect-rest-sample/
    →Socket.ioを使用し複数のクライアントと接続するサーバ
  • /testdata/
    →テストデータが入っています。

完成イメージ

サーバ側(第2回に解説)

AWS EC2上に環境を構築します。
サーバ側にはREST APIを準備しておき、curl等でデータが受信できるようにします。

実行前

curl_before.png

curlでサーバのデータを更新できるようにします。

実行後

curl_after.png

curl等で、サーバ側のデータが更新されると自動的にブラウザが更新されHeatMapのようなものが出力するようにします。

Kinect側(第3回に解説)

第3回目ではKinect側の実装を解説します。
この回では、Kinectからデータを取得し、サーバ側にデータを送信するプログラムを作成します。

jikkou.png

画面左がKinectの画面。画面右が、Kinectから取得したデータを元に算出したkinectからの距離を描画している箇所になります。

まとめ

Kinectからサーバ側にデータを送信するようなアプリケーションが作れるようになると、
「Kinectをどこかに固定しておいて別の場所でデータを確認する」ことが実現できます。
こういった使い方をすると「Kinectを正面に置いてゲームをする」以外にもKinectは色々な用途が考えられそうです。

今回はアプリケーションの完成イメージと実装のための準備をしました。
次回以降「Node.js編」と「Kinect編」の二回に分けてソースコードを見ていきましょう。

エンジニア採用中!私たちと一緒に働いてみませんか?