実験 JSカメラ

http://crocro.com/html5/jscam/app/test/index.html

2011年12月29日 04:43:05

1つ前の記事：2011年年間総合ランキング（Windows）ランキング - Vector Softライブラリ

　今年の春ぐらいに、JavaでARToolkit代替のライブラリをフルスクラッチで作ったのですが、JavaではWebカメラを使用する制限が大きいので、どうしようかなと思い、塩漬けにしていました。

　その後HTML5を少し触り、カメラの画像を取る仕様があることを知り、JavaScriptに移植しようかなと思ったのですが、ブラウザ未実装なことを知り、がっかりしていました。

　昨日、Flex SDKをダウンロードしてみて、今更ながらFlashを触り始めたので、ActionScriptからJavaScriptにデータを転送する形で、WebカメラのデータをCanvasに表示するライブラリを作ってみました。

□実験 - JSカメラ

　ActionScriptは、まだ完全な初心者なので、手探りでの実装です。

　とりあえず、既知の問題は以下2点。

　1番大きな問題は、IEでメモリが肥大していくことです。ChromeやFirefoxでは発生しないので、IEのバグなのかなあと思います。

　2番目の問題は実行速度が遅いことです。FlashからJavaScriptへのデータの受け渡しが非常に重いようです。ここはどうにもならないので、どうしようかなあというところです。

　なので、リアルタイム向けというよりは、Flashでプレビューして撮影みたいな使い方しかできないかもなあという感じです。

　うーん。

　とりあえず、将来、HTML5でカメラが実装された時に、そのまま使えるような形で、AR系の処理を実装できればなと思います。

　とはいえ、年末の空き時間2日を使って突貫で作ったので、先は未定です。

　ドキュメントを作って、ライブラリとして正式公開するのは、年明けかなあと思います。

　以下、ライブラリを使ったソースコードです。それなりにシンプルです。

// 変数
var one, loop;

// 起動時処理
$(document).ready(function() {
　　initJsCam();　　// JSカメラ初期化
});

// JSカメラ初期化
function initJsCam() {
　　// JSカメラ初期化
　　crocro.jscam.initJsCam();

　　// キャンバスの初期化（ループ描画用）
　　loop = new crocro.jscam.CanvasSet("cnvsLoop", "loop");
　　var fps = new crocro.jscam.calcFps("outFps");
　　loop.setExtrFnc(function() {fps.outVal()});
　　loop.capture();　　　// ループでキャプチャ開始

　　// キャンバスの初期化（1回描画用）
　　one = new crocro.jscam.CanvasSet("cnvsOne", "one");
}

// ループの停止・再開
function swicthCaptureLoop(my) {
　　loop.switchLoop(my.checked);
}

// キャプチャ1回分
function captureOne() {
　　one.capture();　　　// 1回キャプチャ
}

// 画像出力
function outputImg() {
　　var dId = "img" + new Date().getTime();
　　$("#output").append($("<img>").attr("id", dId));
　　loop.outputImage(dId, "");
}

1つ前の記事：2011年年間総合ランキング（Windows）ランキング - Vector Softライブラリ

1つ後の記事：[映画]　「フローズン・リバー」感想