Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/02/15 14:00

ダウンロード jscam_1.1.0.zip (60.2 KB)

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

目次

はじめに

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

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

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

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

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

キャプチャ

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

キャプチャ
キャプチャ

2値化

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

2値化
2値化

ラベリング

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

ラベリング
ラベリング
ラベリング2

マーカー検出

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

マーカー検出
マーカー検出1
マーカー検出2

ドット・パターン検出

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

ドット・パターン検出
ドット・パターン検出1
ドット・パターン検出2

対象読者

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

必要な環境

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

 本ライブラリは、Webカメラの取得に「jscam.swf」というFlashファイルを、JavaScriptのライブラリとして「jscam.js」というJavaScriptファイルを利用します。

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5