SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

 今回公開したライブラリ「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ファイルと同じフォルダに置きます(変更の方法はありますが、ここでは解説いたしません)。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
開発の背景

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

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

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6393 2012/02/15 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング