「crocro.jscam」ライブラリの使い方 ――JavaScriptでWebカメラの画像やマーカー情報を取得するライブラリ

CodeZine / 2012年2月15日 14時0分

ドット・パターン

 JavaScriptの新しいライブラリ「crocro.jscam」は、Webカメラやマーカーの情報を取得するためのライブラリです。簡単な設定で、2値化、ラベリング、マーカー検知を行えます。また、コールバック設定で、Webカメラの画素データや、ラベル情報、マーカー情報など、多彩な情報を取得することが可能です。本記事では、このライブラリの使い方を解説します。

■はじめに

 いつもは「創活ノート」でマンガを描いている柳井です。その裏ではゴリゴリとコードを書いています。

 今回公開したライブラリ「crocro.jscam」は、Webカメラの情報を取得したり、マーカー情報を取得したりするためのライブラリです。

 簡単な設定で「2値化」「ラベリング」「マーカーの取得」を行えます。また、コールバック設定で「Webカメラの画素データ」や「ラベル情報」「マーカー情報」など、多彩な情報を取得できます。

 最新のライブラリやサンプルコード、リファレンスは、下記のサイトで公開されています。ソースコード付きのサンプルを見れば、どういったことが行えるのか、イメージがつかめると思います。

「crocro.jscam」JavaScriptでWebカメラの画像を取得するライブラリ というわけで、どういったことができるのかイメージをつかんでもらうために、キャプチャした画像を掲載します。これらは、すべて「フィルター設定」でカメラの挙動を切り替えて行います。

●キャプチャ

 まずは単純なキャプチャです。Webカメラの画像を取得して、HTML5のCanvas上に描画します。また画像を取得した際は、画素の配列を受け取っています。そのため、グラフィック処理を行いたい際は、直接画素配列を処理対象にすることもできます。

キャプチャ


●2値化

 次は「2値化」です。Webカメラから取得した画像を、白黒の画像に変換します。白黒が反転しているのは、黒い領域の部分をラベルと見なして、あとで色付けを行うためです。

2値化


●ラベリング

 次は「ラベリング」です。2値化した画像を解析して、領域分割を行います。本ライブラリではこの際に、直交座標(正座標)と45度回転した座標(45度座標)での上下左右の端点を取得します。この座標の意味は、後で説明します。

ラベリング



●マーカー検出

 次は「マーカー検出」です。ラベリングした画像を解析して、マーカーを検出します。ARToolKitとは違い、マーカーの外周をたどって内部を切り抜く形式ではありません。そのため、枠がきれいな四角でなくても、マーカーとして認識させることができます。この仕組みについても後述します。

マーカー検出



●ドット・パターン検出

 最後は「ドット・パターン検出」です。ラベリングした画像を解析して、点のパターンを検出します。柳井オリジナルのマーカー方式です。大きい丸を1、小さい丸を0として、ドットのパターンを検出します。

ドット・パターン検出



■対象読者

 JavaScriptをある程度使いこなせる人、およびHTMLに関して基本的な知識がある人を対象にしています。JavaScript初心者の方は、拙作の「マンガで分かるJavaScript プログラミング講座」も参考にしてください。

■必要な環境

 Webブラウザとテキストエディタが必要です。また、「crocro.jscam」をダウンロードして入手する必要があります(本記事のファイルよりも最新版の可能性があります)。

「crocro.jscam」JavaScriptでWebカメラの画像を取得するライブラリ ダウンロード 本ライブラリは、Webカメラの取得に「jscam.swf」というFlashファイルを、JavaScriptのライブラリとして「jscam.js」というJavaScriptファイルを利用します。

 これらのファイルは、HTMLファイルと同じフォルダに置きます(変更の方法はありますが、ここでは解説いたしません)。



■関連記事
「忍者ロワイヤル」を真似してみよう! ~サンプルで学ぶ、ngCoreを使ったゲーム開発
スマートフォン向けゲームエンジン「ngCore」とは? ~ JavaScriptでiOS/Android向け開発を共通化
Dojo道場 ~ 第9回「ウィジェット・レイアウト詳解」
「crocro.jscam」ライブラリの使い方 ――JavaScriptでWebカメラの画像やマーカー情報を取得するライブラリ
「CoffeeScript」の開発環境を用意して、サンプルを表示してみよう

■記事全文へ

CodeZine

この記事に関連するニュース

トピックスRSS

ランキング