技術とエンタメと、その他・・・

主に、技術ネタ、エンタメ系のネタを書いていく予定です。また、自分が参加したイベントに関する記事も投稿予定。

Kinect等のセンサーをJavascriptで扱う（調べてみた 〜 その１）

KinectやXtion、CarmineといったセンサーをJavascriptで扱えないかと思い、それを実現するための方法をいくつか調べてみました。
WebSocketでセンサー情報を送信するアプリケーションを自前で作れば実現はできますが、まずはライブラリなど既にあるものを調べるところからやってみました。

Kinect SDK のサンプル

Kinect SDK 1.8 からブラウザでKinectを扱える、HTML5で扱える、という情報がでていたので、その情報を見てみました。

 

どうやら「Kinect for Windows Developer Toolkit v1.8.0」の「Samples: C#」の中にある「Webserver Basics-WPF」がそれに該当するようです。
サンプルを動かすと、ブラウザ上に表示された写真と自分自身のカメラ映像（背景は除去されたもの）が合成されるというものを見ることができます。

サンプルを動かすまでは「SDK・Toolkitの導入 ⇒ Toolkitアプリ上でのサンプルのダウンロード ⇒ サンプル実行」 と、Kinect と Windows 8 のマシンを持っていれば割と簡単な手順で進めることができます。 

関連情報

このサンプルを試す際の制限があるようです。

「msdn.microsoft.com」の What's New を見ると下記のような記載があり、Windows 8 や 8.1 で試す必要があるとのことです。

The Webserver components and sample require .NET 4.5 (Visual Studio 2012) and Windows 8 (or later) for web socket functionality.
The Kinect for Windows SDK JavaScript APIs support Internet Explorer 10 and later, Mozilla Firefox, and Google Chrome.

 その他、英語の情報ばかりしかないようですが、関連するページのリンクを記載しておきます。

OpenNIの公式ページで紹介されているNode.js用ラッパー「NuiMotion」

KInectやXtion、Carmineといったセンサーを扱うアプリケーションをマルチプラットフォームで開発できる「OpenNI」の公式ページで紹介されているNode.js用のラッパー「NuiMotion」というものがあります。

下記のWikiの説明を見ると「Node Package Manager (NPM)」を利用して導入できるようです。ただし、OpenNI/NiTE を事前に導入しておく必要があります。

 

またしても英語の情報ばかりしかなさそうですが、関連するリンクをまとめておきます。

DEPTHJS

MIT Media Lab により提供されている「DEPTHJS」というものもあります。

今のところ、ブラウザのプラグインを FireBreath というものを使って自前でビルドする必要があるようです。その際、前述の「NuiMotion」と同様に、OpenNI/NiTE が必要です（※ これらを導入してないと、プラグインのビルドでエラーがでました）。

 

導入手順が書かれたページを探したのですが、ソースが提供されているGitHubのページ以外では下記が英語ではありますが、手順は一番見やすかったように思いました。

　Getting started with DepthJS - Andrew Deniszczyc

導入ではまったところ

MacでDEPTHJSを試しにビルドなどしてみたのですが、エラーではまったところがあったので記載しておきます。

導入手順の中で、Xcodeを利用したビルドを行うところがあるのですが、そこでファイルコピーに関するエラーがでます（2014/1/4 時点）。解決法は下記のページに記載があったのですが、必要な情報だけ抜粋すると下記になります。

DEPTHJS のファイル一式で「firebreath-plugin」というフォルダ内にある「PluginConfig.cmake」の「set(FBSTRING_PluginFileName "np${PLUGIN_NAME}.dll")」という行を「set(FBSTRING_PluginFileName "${PLUGIN_NAME}.dll")」と修正する（文字列の中の np という部分を削除する）。

　Failed to build plugin on OSX · Issue #49 · doug/depthjs · GitHub

 

Macで自分が試した導入手順は、おおまかには下記のとおりです。

  1. OpenNIの「OpenNI SDK history | OpenNI」というページから、OpenNI と NiTE の 1.X 系のファイルをダウンロードし、任意の場所に解凍
  2. OpenNI と NiTE のそれぞれについて、解凍したフォルダ内にある「install.sh」を sudo コマンドを使って実行
  3. GitHub の DEPTHJS のファイル一式をダウンロードし、任意の場所に解凍
  4. 上記の「firebreath-plugin/PluginConfig.cmake」の修正を行う
  5. 「FireBreath」のファイルをダウンロードし、任意の場所に解凍
  6. ターミナルを開き、DEPTHJS の中の「firebreath-plugin」フォルダへ移動
  7. 手順７ にいるフォルダ内から、ターミナル上で FireBreath のフォルダ内にある「prepmac.sh」を利用しビルドを実行（コマンドは $（FireBreathのパス）/prepmac.sh . build/ ）
  8. 「build」フォルダ内に生成された「FireBreath.xcodeproj」をXcodeで開き、プロジェクト一式をビルド
  9. DEPTHJS の中の「chrome-extension/plugin/」というフォルダ内に「DepthJSPlugin.plugin」というファイルが生成されているので、これを「/Library/Internet Plug-Ins/」にコピー（sudo コマンドを利用）
  10. Chromeの拡張機能（プラグイン）のリストを表示し、そこでディベロッパーモードを有効にした状態で表示される「パッケージ化されていない拡張機能を読み込む」を選択。その際の読み込み先対象フォルダとして DEPTHJS の中の「chrome-extension」フォルダを選択し、DEPTHJSを拡張機能として読み込む
  11. DEPTHJS の中の「developer-api」フォルダの中にある「BasicDemo.html」を実行してみて動作を確認する

自分はMacのChromeでプラグインが動作するところまでは確認できましたが、Kinectを認識させてブラウザ上にセンサーデータを読み込ませるところはできていないです。

そこはまだ調査中・・・。

その他

調査をしていてでてきた情報をリストにしておきます。やはり、日本語の情報をほとんど見つけられず・・・。詳細は調査中です。

ZigJS

KinectJS

いろいろ

 最後に

この続きとして、
実際にブラウザ上でセンサー情報を取得して、Javascriptで利用できた、
という内容が次の記事で書ければ、と思ってます。